什么是品牌的UI設計?品牌在UI設計中的色彩、圖形、圖標、插畫和字體五個維度到底怎么落地，如何成功打造，UI設計又和VI設計有什么不同，今天我們就來一同學習下。

什么是品牌UI

首先大家要注意到，我們平時書寫中的UI正確的寫法應該都是大寫，UI是User Interface的縮寫。VI跟UI只有一個字母的差別，且看起來十分相似。

UI即User Interface（用戶界面）的簡稱。泛指用戶的操作界面，包含移動APP，網頁，智能穿戴設備等。我們這里主要指界面的樣式，美觀程度。而使用上，對軟件的人機交互、操作邏輯、界面美觀的整體設計則是同樣重要的。好的UI不僅是讓軟件變得有個性有品味，還要讓軟件的操作變得舒適、簡單、自由，充分體現軟件的定位和特點。UI還有其它的意義，如Unit Interval，Univ of Iowa，Unlock Ins...

VI即（Visual Identity），通譯為視覺識別系統，是CIS系統最具傳播力和感染力的部分。是將CI的非可視內容轉化為靜態的視覺識別符號，以無比豐富的多樣的應用形式，在最為廣泛的層面上，進行最直接的傳播。設計到位、實施科學的視覺識別系統，是傳播企業經營理念、建立企業知名度、塑造企業形象的快速便捷之途。 

在品牌營銷的今天，沒有VI對于一個現代企業來說，就意味著它的形象將淹沒于商海之中，讓人辨別不清；就意味著它是一個缺少靈魂的賺錢機器；就意味著它的產品與服務毫無個性，消費者對它毫無眷戀；就意味著團隊的渙散和低落的士氣。

VI設計一般包括基礎部分和應用部分兩大內容。其中，基礎部分一般包括：企業的名稱、標志設計、標識、標準字體、標準色、輔助圖形、標準印刷字體、禁用規則等等；而應用部分則一般包括：標牌旗幟、辦公用品、公關用品、環境設計、辦公服裝、專用車輛等等。

UI設計和VI設計，兩種設計的工作屬性不同。UI設計中，平面設計工作只是其中的一小部分內容，其設計工作的主體，還是在軟件交互性設計上。軟件交互性設計，主要是針對軟件操作流程提出最優方案，屬于應用工程設計，而非平面設計。而其中涉及到軟件圖標、界面視覺布局等平面設計項目，只是整個交互設計工作中的一項。其主要目的，是為用戶提供更具親和力的界面外觀。是服務于交互性設計工作的。

VI設計，則是完全的，且自成系統的平面設計工作。其設計成果，直接應用于客戶的機構或品牌。其設計目的，是將所服務的機構或品牌的相關視覺要素加以系統化與規范化，進而強化其可識別性。

下面我們就分別從色彩、圖形、圖標、插畫和字體五個元素來詳細說明UI設計。

色彩

色彩毋庸置疑，每年很多產品品牌更新，或者迭代都會去更新色彩，好的色彩能讓人記憶深刻，平庸色彩只會讓人忽略，所以在塑造一個品牌時候，色彩一定不能土，要讓人記憶猶新。色彩一定要和產品目標相匹配，如果你的產品是以年輕人為主，比如ins那么你的色彩可以更加飽和度高，更明亮一些，如果你的產品是比較商務包容性強一些，可以是Facebook的藍色。

Adobe每年的產品更新迭代，2年更換一次品牌，目的是區別這些不同的版本，可以發現，每年的更新除了視覺樣式的更新，整體的色彩也進行了更新，最新版本的PS顏色更加商務，更加穩重，和潘通流行色很貼近！這些知名公司每年的品牌升級，都會重點在色彩上去進行更新和迭代，一方面占據用戶心中的品牌色彩，比如微信綠色，支付寶藍色，美團黃色，淘寶橙色，另外一方面也是為了讓品牌更加和戰略貼合更緊密。

2019年最明顯案例應該是美團黃了，品牌從藍綠漸變變為黃色為主，從品牌LOGO到主頁面都進行了品牌色的變化，讓用戶明顯的感知到變化。之前陌陌升級新LOGO啟用了紅黃藍三原色，從冷色到暖色過渡，寓意是通過陌陌的連接，從陌生走向熟悉。眼睛圖案的使用，代表著陌陌用戶對這個世界的好奇與探索。多重色彩的設計，象征著產品視頻化。

所以當我們需求去重塑一個品牌時候，色彩一定是要優先級很高的去考慮，原因就在于色彩是人最容易感知，也最明顯的感覺，淘寶每一年改版變化最大的就是色彩，從當年的扁平化橙色調整為漸變色，從漸變色到現在版本的白色，每次都是讓用戶感知明顯。

圖形 

除了色彩，板式，圖像等優化還有一個很重要的元素就是形狀，這個很容易被很多設計師忽略，其實圖形也是有情感的。我們界面中經常用到的卡片，按鈕，菜單，圖像的等等都是由形狀組成了，在材料設計中也很明顯的強調了這一點，最新的谷歌材料設計中，很明確告訴設計師我們需要通過形狀來增加品牌的吸引力！

圓形的浮動動作按鈕和凹陷的底部應用導航欄在設計中脫穎而出。選中的卡片，選中效果有一個彎曲的弧度，來代表它的被選中狀態。如果想你的產品在競品中脫穎而出，除了色彩以外，形狀是很好的一個表達方式，一致的形狀配合色彩能為品牌帶來很好的記憶點。

不同的圖形，傳遞出來用戶心理感受是完全不一樣的，三角形是充滿活力的和動態的表達，一般和方向關聯。三角形的圖形會吸引我們眼睛自動的根據它的位置和方向，不同的三角形給人的視覺感受是完全不一樣的，等邊三角形給人穩定平衡的感覺，倒轉的三角形給人看起來冒險并且容易倒緊張的視覺感受！

矩形和圓角是我們最常用的，生活中很多產品也都是這些圖形組成的，手機，電腦，書籍，相機等等都是矩形組織，矩形形狀和直角給人可靠性和安全感！另外包豪斯建筑風格也多是以直角和圓角為主，所以如果你的產品是走安全感和權威感，用矩形和圓角矩形沒錯。

圓形和大自然的太陽地球宇宙關聯性比較大，橢圓也和宇宙很像，因此圓形給人永恒，未來，神秘的感受，和其它圖形不同的是圓形更加柔和，因此在很多年輕化產品中經常可以看見圓形的運用。因為圓形沒有終點，線條柔和，特別是形狀大屏手機越來越多，圓形和手機屏幕適配也更加靈活，在很多運動，年輕，潮流產品設計基本都能看見圓形作為主要圖形的運用。手淘就是一個很好的案例，從“淘”字的LOGO提取一個圓點，到界面中圓形符號等！所以當你需要對你的設計進行升級時候，記住圖形千萬不要忽略。

分形，這個圖形經常在大自然中看見，花朵職位等等，這些圖形會圍繞一個圖形進行延展變化，非常具有生命力。也經常在設計中運用到，特別在現在互聯網產品中，給人視覺感受是創造力和新思維的表現，在很多科技的發布會上都會運用到這些圖形。

除了上述圖形之外還有各種各樣的大自然圖形，比如葉子，花朵，動物等等，這些圖形經常被設計師和藝術家當做創意的靈感來源，因為大自然的形狀表意清晰，能讓人和自然聯系在一起！作為設計師，我們需要去了解這些圖形給人的視覺感受，然后將其運用到我們的設計中去！

圖標 

圖標是界面中除了文字以外經常運用到的點，一個好的圖標能把產品特點體現的淋漓盡致！

我們結合一個實際案例，看看設計師是如何在圖標中融于品牌元素的：這是產品LOGO，粗略看沒什么特點，但是設計師從LOGO中挖掘了一個圖形，也就是這個半弧的圖形作為一個設計創意點，然后將這個圖形進行運用到各個場景！

這套圖標中，圓角元素，圖標顏色和LOGO匹配，保留LOGO中黃色元素，同時圖標的弧度在圓弧的地方，運用比較大的柔和的角度和整體的LOGO匹配。

插畫 

插畫對于品牌來說也是非常重要的一個因素，無論在界面設計，還是在品牌營銷很多場景我們都需要插畫去營造我們的產品氛圍和氣質，插畫有助于將我們的品牌故事講述給聽眾聽，所以在構建一個品牌時候，插畫是非常重要的點之一，但是做之前我們一定要盡量多去了解我們為客戶提供的設計價值，只有了解了用戶價值，才能去定義去特色的故事，幫助產品！

Uber系列插畫提供暖色，以及安全藍的運用，突出打車服務中安全的關鍵要素。東南亞電商lazada整體品牌定位年輕活力的用戶，所以對東南亞人群氣質提煉出一系列的人物插畫運用到UI產品界面中，在傳遞個性同時也把產品的情緒融入其中。

設計師根據這些插畫的特別，延展出一系列運營場景，在界面，空白頁等場景傳遞出品牌的氣質！在淘寶產品中，設計師將空白頁面運用有趣的小故事傳遞給用戶，給用戶帶來更好的購物體驗和感受！

設計師提供故事將我們的一些功能融于場景中，讓我們的產品變成一個有血有肉有故事的人，讓用戶更加的親切，在產品設計中，插畫是非常重要的一個點！不可忽視。

字體 

自從騰訊在20周年發布了騰訊字體，運用一些有向前感覺的斜體，越來越多的公司在品牌升級時候，加入品牌字體。阿里巴巴在2019年UCAN大會上發布了阿里普惠體，為了解決廣大的素材需求和高昂版權費用之間的矛盾，整個字體采用現代簡潔的筆畫，適用于多個業務場景，這套字體不是單純從某一種西文或中文字體的造型特征出發進行延展，而是以 9 個品牌體感詞為切入點，將體感共鳴轉換為字體造型。

OPPO字體，跟隨著整個品牌升級，OPPO也更新了自己字體，圍繞著探索科技美感，有獨特的語言打造具有標志性的，與眾不同的品牌體驗。小米發布了小米蘭亭體，整個字體可以動態變化粗細是一大創新亮點，可見現在設計越來越難做了，作為一個大型公司品牌設計，一套專屬字體好像已經成為標配了。

Facebook推出的企業LOGO采用定制字體，以全部大寫的形式在應用產品之間建立視覺區別。以不同的顏色顯示，表現出旗下不同社交品牌的屬性，如藍色代表和公司同名的 Facebook 社交平臺，綠色代表 WhatsApp（跨平臺應用程序，用于智能手機之間的通訊），粉色代表 Instagram 等等。

和以往不同的是，之前我們在定義一個字體時，只需要根據產品的氣質去選擇一個合適字體即可，現在成本變的更大了，可喜的是行業中越來越多的開源字體，對于沒有條件去設計字體的團隊，我們要學會去借力！另外就是一定要注意字體版權問題。

總之，品牌就像內褲，看不見但是很重要。作為設計師，除了做好滿足產品的功能設計外，也應該給產品賦予性格和生命力，這是設計師的職責也是必須要具備的能力。

當然塑造品牌遠遠不止我們上面說的那些，還包括話術，圖片，產品功能等等。而這遠遠不是一朝一夕，一套模板就能搞定的，這一系列文章也只是打開大家的眼界和思路，具體如何做好，是需要我們在不斷實施的項目中實踐得來。