2019-12-17 資深UI設計者
設計并不只是為了區分市場定位，在視覺上對產品做一些修修補補。設計需要從品牌自身出發，設計出來的產品才能與用戶產生情感交流、為品牌而發聲，這樣的設計才能真正為品牌創造長尾的價值。
前陣子和朋友去看車，我們去的第一家店是沃爾沃，沃爾沃主打的品牌理念是「安全」「可靠」，當時我在沃爾沃店里看的每一輛車的外形就像從金屬盒子進化來的，棱角分明、線條硬朗，同時每個部件都相當厚實，當時我坐在車里的時候，感覺自己像是坐進了一個大保險箱，里三層外三層把我包裹起來，坐在里面特別有安全感。
我們去的另一家店是寶馬，寶馬的品牌概念主打的是「時尚」「運動」，所以寶馬車給人的感覺和沃爾沃又完全不同了。它的流線感非常明顯，而且這種流線型設計一直延伸到車內的每一個部件。印象特別深的是，車里座椅的荔枝皮紋和我們常見的品皮質特別相似，讓我感覺自己像是坐進一個時尚的愛馬仕箱包里。
其實無論是工業設計，還是我們的用戶界面設計，好的設計給用戶的感受與品牌理念是相契合的。設計中的每一個細節都是圍繞品牌自身而展開，設計出來的產品才能夠成為品牌的具象化延伸，與用戶產生情感交流的同時也會讓用戶更加忠誠于我們的品牌。具體怎么做？這需要我們運用統一的設計語言來完成。
什么是設計語言？從設計的層面理解，當你看到一組功能與形式相互融合，向你訴說其特色與優點的產品，從而喚起你的情感反應時，你正在體驗的就是設計語言。簡單講，當你的品牌運用設計語言的時候，你的產品會跟人說話：會告訴人們它能做什么，怎么做，以及你的品牌是個什么樣的品牌。而這個設計語言也將會從前期的風格設定到后期的設計執行，始終貫穿在我們整個產品設計的流程當中。
首先從一開始的風格設定，比如每次我們設計師接到一個 brief 都會先做視覺推導。但是我之前的視覺推導是這樣的：比如現在為一個類似拼多多的產品做設計，然后搜集了一圈競品的界面，發現拼多多、聚劃算、淘寶特價都是這種線框的、扁平的設計風格，所以最后推導的結論就是——因為我們拼購面向的用戶群體是低消費人群，而競品的設計風格是 xxxx 的，所以我們的用戶偏愛這種 xxxx 設計風格，所以我們需要用這種風格去設計我們的頁面。
搜狐總監總結的競品分析方法：
其實這是一種循環論證，并不能推導出真正有價值的內容。就像你問一個胖子「你為什么這么胖呀」，胖子說「因為我吃得多」，你又問「為什么要吃這么多呀」，胖子又說「因為我胖，所以需要吃多點」。
競品分析雖說也是一種前期設計調研的方法，但如果我們的設計只依賴于參考其他人怎么做，最后我們設計出來的產品不僅沒辦法向人們表達一個完整的品牌理念，而且我們的設計跟其他競品看起來很相似，失去了自己的特點與優勢。
所以，在我們設定產品的設計風格的時候就需要運用統一的設計語言，產出能夠表達我們品牌特質的設計。那具體怎么做？這里涉及 2 個關鍵點，一個是如何找到你的品牌特質，另一個是如何針對這個品牌特質找到對應的設計語言。
首先，想要找到我們的品牌特質，我們可以從一個很有意思的原型中得到啟發。如果想讓我們的品牌真正能夠影響用戶，讓用戶為我們的品牌買單，我們的品牌就需要基于用戶內心最深層次的需求，明白用戶買單的動機在哪里。這時候我們再對應這些深層次的動機和需求做出設計，效果自然會事半功倍。那么如何能把品牌和用戶的動機需求連接起來呢？我們可以借助心理學家榮格的原型理論來一一對應。
榮格的原型連接了人們最深層次的動機和感覺體驗，表達了人們的基本需求，最重要的是他將這些需求都具像化為一個個角色。所以我們可以從中找到自己品牌的角色，并且在往后的發展中根據這個角色設定我們的品牌特質和設計語言，進而與用戶建立根深蒂固的聯系（相當于為我們的品牌打造一個「人設」）。我們先看看榮格的原型具體有哪些：
1. 開拓者
我們也有稱之為探求者、朝圣者，它是敢于冒險的、首創的、獨立的、不墨守成規的，更多的尋求自我實現和改變，擁有自由的價值觀、自給自足的。開拓者通常會在未知的領域，開創新的路徑。同時是個驅動力很強的非常有個性的人，能夠忍受探索新路上形單影只的孤獨。屬于這種角色設定的品牌比如有星巴克、路虎都是。
2. 守護者
守護者通常是說無私的、有同情心的、仁慈的人，給弱勢群體提供幫助和支持的，同時具有慷慨大方、自我奉獻的精神。守護者更多立志于他人的安危和福利，像這種角色的品牌稍微少點，通常是一些救濟會、慈善組織等等。
3. 愛人
愛人相關的特點像熱情的、美麗的、感性的尋求真愛和愉悅，追求愛的價值觀和親密關系。愛人通常是通過給予和獲得愛的強烈愿望所驅動的，這個不局限于愛情，友誼也包含在內，主要是意味著情感，所以一般是香水或者化妝品品牌都是運用這個原型角色。就像 dior，當然還有巧克力費列羅等等。
4. 魔術師
我們知道魔術師的形象通常是愛惡作劇的、滑稽的，有時候能夠跨界，打破禁忌，并且自身帶有樂趣，善于改變的。魔術師通常渴望樂趣，從單調的生活中解脫出來，敢于打破禁忌，質疑不可能的事物。這種角色設定的品牌我們可以很快想到那個愛玩有趣、經常跨界合作的百事可樂。
5. 創造者
創造者更強調藝術感、想象力、創新性，以及自我表現的價值觀和美感上的愉悅性。創造者通過精心制作用來表現自我的事物，讓人們耳目一新從而得到認可。像這種強調創造力的品牌比如樂高，用有限的積木組合、創造出無限種可能。
6. 反叛者
反叛者也可以說是不法之徒、外來者，這種角色通常是具有變革性的、反常的、打破常規的，表達一種價值觀的解放。反叛者通常存在于社會邊緣的，被大部分社會群體看成局外人甚至異類的角色，我們也可以看成是亞文化的一種轉變。像這種主打標新立異、反常規的品牌，最著名的就是哈雷。
7. 魔法師
前面我們提到了魔術師，那么魔法師相對于魔術師而言，會帶有更多的非現實的想象，精神上的超凡魅力，帶來轉變的、形而上的意識的擴張。通俗地說，是帶有更多迷信元素的。但是最重要的是，魔法師趨向于駕馭各種能量和環境，進而給人們帶來身體上以及精神上的轉變。同樣，像這種強調 magic 的品牌我們第一個可以想到迪士尼，典型的魔法世界。
8. 智者
我們也可以稱之為「圣人」，智者通常是一種富有哲理性的、知識淵博的形象，忠于追求真理、樂于分享知識，也是智慧的代名詞。智者經常被當成真理的捍衛者以及智慧的來源，為人們指明方向，幫助大家前進的代表。這種角色設定適用于一些知識輸出的品牌，比如哈佛大學、金融時報等等。
9. 天真
這是 11 個原型中唯一一個形容詞而不是角色名詞，它代表著信任、純潔、健康樂觀，有希望的、誠實善良并且擁有簡單的快樂。天真代表著樂觀主義，不管處境如何都能保持希望和信仰，更像是紛雜世俗中的一片凈土或者是一個烏托邦世界。而像這種原型設定一樣傳達樂觀、希望、天真的品牌有麥當勞、可口可樂等等。
10. 統治者
統治者象征著權威、控制、至高無上，同時也有承擔、效率、和諧的屬性。統治者被得到和控制權利的欲望所驅動，通過對事物的掌控來防治混亂發生。同時也是一種責任承擔的表現，以有組織的的方式來完成義務。屬于這種角色設定的品牌比如有 IBM、花旗銀行等等。
11. 英雄
每個人心目中的英雄不盡相似，但是他們的共性都是勇敢的、有原則的，勇于克服障礙，同時敢于接受挑戰、伸張正義，面對逆境的時候堅韌不拔。這種角色設定的品牌比如強調挑戰、正義、勇敢的耐克、聯邦快遞等等。
總而言之，原型是將我們用戶內心最深層次的需求，具象化成一個角色，我們的品牌對應上這些角色，相當于對應上了我們用戶最深層次的需求，為我們品牌和用戶產生情感交流打下基礎。同時，它可以為我們設計師想為品牌找到對應的設計風格的時候，提供更多維度的靈感。而這之后的過程，就涉及到剛才提到的第二個關鍵點，如何為我們的品牌找到對應的設計語言？
我們從前面的心理原型中了解到品牌的角色設定之后，圍繞這個角色將會有一系列的關鍵詞去描繪這個角色的特質。我們將這些抽象的、描繪品牌特質的關鍵詞具像化，則可以得到描繪品牌自身的設計元素。具體我們可以借助一個圖形四象限來完成：
我們將圖形的基本構成（點、線、面）作為我們的坐標延伸——寬窄曲直，用這四個屬性我們可以組合出非常多不同形態的圖形元素。比如說，我們用「寬+曲」組合出來的圖形可以是：實心的圓形、波浪曲線等等；再比如說我們用「窄+直」可以組合出：細直線、帶有直角邊的矩形等等。
同時，在圖形屬性的坐標上，我們還需要延展出一些帶有這種屬性的事物或印象。比如，生活中帶有曲線的事物，像有花瓣、棉絮等等，這些事物給人的印象是柔和、溫暖的表現；而直線的事物，我們聯想一下生活中的帶有直角的事物，比如像玻璃、霓虹燈管等等，這些表現前衛、鋒芒畢露的事物。
像上面綠色部分的認知印象，針對每一個維度可以聯想出很多關鍵詞與事物，那么在我們延展出更加詳細的四象限之后，這時候可以再次拿出，我們前面說到的，原型角色的關鍵詞，再和剛才的圖形四象限進行比對，利用象限中的圖形基本屬性，來組合出屬于我們品牌的設計元素。具體怎么做，我舉一個京東直播改版的案例。
首先基于京東品牌特質（原型設定是英雄），圍繞英雄這一個原型我們會有很多關鍵詞去形容它，比如敢于挑戰、堅韌不拔等等。不過，京東直播作為京東 App 的主要欄目，更希望吸引更多的年輕人以及女性群體的參與，所以在京東直播里，我們表現的是更加年輕、女性向的英雄——驚奇隊長，一位自信、勇敢挑戰的女英雄形象。因為像人在不同場合下都會有不同的表現，對于品牌來說也是如此，我們設計師也需要根據不同的場景或者子產品的需求，基于原型的核心理念再做出適應性的設計，讓我們設計的品牌更像一個生命體，而不是一成不變的事物。
那么我們圍繞年輕、女性、自信這個主題再腦暴出更多相關的關鍵詞。比如具象的可以代表女性的事物：口紅、高跟鞋；比如一些抽象的內容，我們可以把他們具像化，比如年輕的「活力」，我們可以用泡泡、花朵來表現，女性的「優雅」可以用香水、絲帶表現，英雄的「自信勇敢」用笑容表現。
不過，我們知道用戶界面設計相對于平面設計的海報、插畫而言，更重要的是對產品信息功能的輔助，所以這里的設計元素運用會更加克制，這意味著需要我們回歸到更基礎的層面。所以我們需要從剛才的具象事物（比如花朵、笑容）中提取出他們的基礎屬性，比如花瓣是圓弧形的、片狀的，笑容是向上的曲線。同時借助圖形四象限，用「寬+曲」的手法來表達我們的設計元素（年輕、女性向在第二象限，對應的寬+曲屬性）。在后期設計過程中，融入這幾個元素再作出界面設計。
當然，在整個設計流程中，設計語言的設定并不單單包含元素這一部分，還包括顏色、框架、布局等，各個方面的考量缺一不可。
為什么是相對統一而非絕對一致？因為人們對大部分顏色的認知其實是來自于自身的行為，受到心理、環境、文化等背景因素的影響，更多是一種個體的主觀感受。比如同樣的紅色，在中國是吉祥喜慶的代表，在國外普遍認為危險警告的顏色。比如黑色，在大部分年輕人眼里會認為是酷的時尚的顏色，而相對年長傳統的人則更多會覺得是邪惡、忌諱的顏色。所以我們并不需要過分強調建立絕對一致的色彩規則，這樣也能使我們設計的品牌更像是一個有靈性的生物，而不僅僅是一個僵硬的組織。
比如今年的京東 618 項目，時間跨度長達 30 天，活動頁面覆蓋上千個，設計師不可能一個個去指定顏色規范、或者讓同一個顏色適用于所有頁面，所以需要設定的只有色彩感覺和表現手法，這種統一的大方向。所以我們可以看到這些在 618 期間的設計，雖然不盡相同但能讓人清楚的感知到，這是來自同一個生態下的主題，并不會因為顏色不同就無法識別。
雖然人們對大部分顏色的認知來自于心理的主觀感受，但還有對另一部分的顏色的認知是來自于人們的生理反應。而這一部分，才是我們在設計的時候需要注意的，關于造成人們「感知過強」和「感知過弱」的問題。
1. 感知過強 —— 顏色對抗通道
簡單講，就是相當于我們設計常說的——對比色，雖然我們知道對比色可以給用戶帶來視覺刺激，但是并不建議在設計中大面積的、長期的使用（紅綠或黃藍對比色），為什么呢？
因為我們所說的顏色，其實是人眼對頻率、光的波長的感知，就像我們耳朵聽的音高或一個音符時所感知的聲音的原理一樣。下圖是人們視網膜三類視錐細胞對光的敏感度，以及人造紅、綠、藍色光感受器對光的敏感度。我們可以看到，低頻視錐（紅線）信號是紅色和黃色，中頻視錐信號是綠色，高頻則對應藍色。而我們設計中常說的對比色，其實就是通過這些視錐細胞的低、中、高頻信號的極值相減，才得來的顏色對抗組。所以這種通過對視錐細胞兩極的強烈刺激才得到的對比色，長期使用下會讓人產生疲勞甚至煩躁的情緒，而在這種不穩定的情緒下，用戶非常容易產生誤操作，甚至最終遷怒于你的產品不再使用。
所以我們作為設計師可以運用一些方法來盡量控制對人眼的最極端的刺激，比如通過減少對抗色的面積，或者通過將對抗色組中的一個顏色用它的近色替換，等等。
2. 感知過弱 —— 色域跨度
除了以上，讓我們感知過強的顏色對抗通道，另一個需要注意的顏色問題就是，讓人們感知過弱的色域跨度。我們有時候會遇到一個問題就是，按鈕上的文字和按鈕的顏色融在一起，導致按鈕文字看不清。
這個問題其實就是兩個顏色的色域跨度過小導致的，首先我們用 H（色相）S（飽和度）B（明度）的數值來劃分色域（如下圖）。在統一H（色相）值的情況下，規定了 10 個標準的S（飽和度）、B（亮度）值，以 10 為單位作為一個跨度。兩種顏色在這個色域中，至少要相差 5個跨度，用戶才能有效感知到兩種顏色的差異。
比如下圖中的藍色背景色值是 60，那么放置在這個背景中的文字 A，至少要跟這個 60 的位置相差 5 個跨度，也就是 10 這個位置。如果文字A 的色值只有 30，與背景色的 60 跨度小于 5，那么文字 A 在這個背景上會難以識別。以此類推，深色模式中（如下圖）這個背景色值 100，那么在這個背景上的文字 A 色值，最多不能超過 50。
以上關于顏色對抗通道和色域跨度的問題，就是我們需要了解的一些顏色運用中的邊界，并在這個邊界以內讓設計保持最大的靈活度。所以對于顏色，我們需要強調的是相對統一的邊界極值，而不是絕對一致的色值。
如果我們把前面說的設計元素和顏色看作品牌的皮膚，那么視覺框架則是品牌的骨骼。如果想讓我們的品牌成為一個能夠真正影響用戶的存在，不僅要有好看的皮囊——在設計元素和顏色上延續品牌基因，還要有強大的內心——視覺框架要能足夠支撐起我們品牌的身軀。
視覺框架包括了層級和布局，我們需要在設計的過程中，加入對產品階段和品牌價值的思考。因為就像人一樣，處于不同階段的人追求的東西會有所差異。同樣的對于品牌也是如此，處于不同產品階段會有不同的需求，相應的品牌價值點也會有所差別。所以如果想讓設計的視覺框架能夠足以撐起品牌，在這其中將會涉及 2 個關鍵點：如何定位產品階段和品牌價值，以及如何圍繞產品階段與品牌價值點設計對應的視覺框架。
首先是定位我們的產品階段和品牌價值，我們可以通過對照經濟價值系統（如下圖）：產品的階段分為初級產品、產品、服務和體驗這 4 個階段。
拿京東舉個例子，如果我們位于初級產品階段，我們的平臺就是這樣的（如下圖）：展示出所有商品信息，用戶需要根據信息聯系商品的供應商，去和供應商進行交易。那么在這個階段的時候，品牌的核心價值在于對商品信息展現的完整性、全面性，只要這個平臺能夠覆蓋足夠多的商品，并展示完整的商品信息，這個階段的目標就達到了；
如果我們位于產品階段，我們會對商品進行分類，并在平臺上提供統一的購買渠道。相應的，這個是以后的品牌價值在于，平臺能夠對商品進行精準分類或者實現統一的購買渠道功能，讓用戶能夠在平臺上買到商品；
而當我們位于服務階段，我們的平臺不僅可以購買商品，我們還會提供售前售后的服務，對應不同的客戶群體推薦不同的商品，或者提供定制化的服務等等。平臺除了實現交易功能，需要提高品牌的競爭力，在競品之間形成差異化，為人們提供一系列附加價值的服務，吸引更多用戶在我們平臺上下單才是目標；
而如果我們位于體驗階段，我們可以從視、聽、味、嗅、觸覺給用戶帶來一系列的情感反應，為每個個體營造不同的回憶與感受。讓用戶與品牌產生情感上的互動，在更深層次上影響用戶認知并形成堅固的情感紐帶，讓用戶忠于我們的品牌才是這個階段的目標。
正因為不同的產品階段，對應的品牌價值與目標不同，我們才需要針對產品階段，為品牌設計合適的視覺框架，到后期設計出來的產品才能更貼合地為品牌發聲。像今年京東 app 改版項目，在接到這個 brief 之后，首先當然會先看看當時版本存在的問題，下圖為當時京東 7.0 版本。
當時團隊逐一列出了 7.0 版本存在的幾個主要問題：
1. 品牌識別度低
我們可以發現在這個界面里很難發現京東的品牌元素，就算現在換一個品牌同樣這個界面也適用；
2. 業務分發局限
這個版本里的商品坑位是固定的，業務展現的數量和形式是局限的；
3. 運營維護成本高
banner 模塊采用通欄而且上下漸變的樣式，這需要商家制作運營圖片的時候，將主要內容嚴格控制在我們的限制區域內，這同時也增加了我們運營審核的工作量；
4. 樓層過長、轉化率低
在 7.0 版本中，中間的樓層頻道長達 7 屏，同質化的內容導致平臺商品的轉化率不高；
5. 促銷信息干擾
界面的促銷信息讓用戶眼花繚亂，難以讓用戶快速找到自己想要的商品；
6. 個性化感知不足
電商平臺內容形式趨向單一化，沒有太多創新的表現。
有了這些具體的問題項，設計師們開始進行針對性地視覺框架設計。比如，針對個性化感知不足的問題，我們希望重新設計百寶箱區域，打破常見的圓底 icon 的樣式，每個圖標的邊框都是不規則的，讓整個區域更有表現力，同時與其他電商平臺的界面形成差異化。再比如，針對促銷信息干擾的問題，我們希望簡化原本頻道入口的信息，將原本好幾個 sku 信息對應同 1 個入口，優化為單個 sku 與單個入口一一對應，讓用戶保持專注力快速找到自己想要的頻道入口。
諸如此類，當時我們為這幾個問題延展出許多設計上的解決方案，輸出了不少有創新性的視覺稿。但是隨著設計工作越往后進行，我們發現手中的設計并不能很好地解決，品牌在當前階段中面臨的實際問題。
因為在前期框架設計的整個過程中，我們沒有把品牌定位這一因素考慮進去，我們發現舊版本的問題，埋著頭只想把這些問題都解決了，卻忘記抬起頭看看我們的品牌現在在哪。我們前面說過，對照經濟價值系統，京東目前主要處于服務階段，還在逐漸邁向體驗階段的進程中。
而處于這個階段的京東，外部環境是電商平臺的逐漸趨同化；內部環境是業務體量龐大，同時產品仍有上升空間。所以我們的階段目標就是需要加深用戶對品牌的認知，業務內容需要更加具備兼容性、延展性，同時需要提高產品的業務分發能力。
結合這個階段性目標，我們可以從舊版本存在的問題中，發現這 4 個問題才是當前優先級最高的、需要在當前階段中解決的內容。所以基于篩選后的 4 個問題，我們開始將設計往回收，從視覺框架上更多聚焦于這 4 個問題的優化。
比如針對業務分發局限性的問題，對首頁下拉區域的布局進行優化：下拉刷新除了常規的刷新狀態外，在營銷活動期間用戶可下拉跳轉至活動頁面。我們將下拉路徑縮短 30%，共享元素空間兼容更多的業務內容，充分利用首焦區域豐富業務的展現形式。
比如針對品牌識別度的問題，將首頁頭部區域的層級進行優化：在京東品牌形象 Joy 中提煉出微笑曲線，將微笑弧度應用在頭部的背景輪廓上，并且在整個頁面中統一植入品牌色京東紅，同時在當前我們的品牌尚未成熟的階段，直接使用京東 logo 強化用戶對品牌的感知度和記憶點。
比如針對運營維護成本高的問題，還記得前面說的我們一開始做的百寶箱的設計么，雖然那種設計是更具有差異化和創新性，但是目前產品量級大、業務入口多，而且這一區域涉及合作商家自己提供的素材露出，如果沒有統一的外框與規范的內容，運營維護成本是相當高的。所以我們保留了 icon 外框，同時規范每個框中只居中展示一個對應的圖形，不能包含文字等其他元素。
最終我們可以看到，改版后的京東 app 無論是在品牌、業務層面，還是在多種復雜的運營場景中，都能實現作為平臺的兼容性和延展性。所以，在視覺框架的時候需要預先考慮產品階段，針對不同階段需求作出相應的設計側重，讓設計出來的產品能夠更加貼合品牌本身。
經過剛才的推導和框架設定，我們對眼前要做的產品設計風格、視覺框架已經確定的七七八八，界面的形態也初具雛形了。接下來要做的設計執行階段就是我們設計師的魔法時刻，相信每位設計師都有自己的方式和能力讓我們的產品變得更優美，所以關于這部分的內容暫不在此贅述。
通過以上章節我們了解到，只有從品牌自身出發，設計出來的產品才能在每一個方面都延續品牌基因、展現出設計的整體性。一方面滿足品牌價值需求為品牌發聲，另一方面將用戶的所聞、所見、所感打造成一個特別的情感反應，讓用戶更長久的忠于我們的品牌。
不過，如果我們想要創造出能深化品牌基因的產品，我們在用戶方面也要投入和品牌方面同樣多的關注。因為不僅要看產品的外觀界面，還要看產品給用戶的感覺、使用方式和效果。比如用戶因為什么才被你的產品吸引，用戶會從中得到什么，你的產品能帶給用戶什么感受，用戶如何才能為你的產品發生實際行動，等等。正因為我們所做的一切，都應該對品牌產生支撐作用。所以不僅僅是品牌能夠識別和定義我們的產品，用戶的認知體驗也應該成為我們設計考量的一部分。究竟怎樣做，才能讓我們的設計能夠有效的影響用戶、讓用戶為我們的品牌買單呢？
文章來源：優設