品牌在UI設(shè)計中的色彩，圖形，插畫，字體，圖標五個維度到底怎么落地，如何成功打造一個UI的品牌，今天一同學(xué)習(xí)。

品牌ui是什么

首先大家要注意到，我們平時書寫中的UI正確的寫法應(yīng)該都是大寫，UI是User Interface的縮寫。

品牌VI跟UI只有一個字母的差別，且看起來十分相似。

UI即User Interface（用戶界面）的簡稱。泛指用戶的操作界面，包含移動APP，網(wǎng)頁，智能穿戴設(shè)備等。上海vi設(shè)計公司的小編說UI設(shè)計主要指界面的樣式，美觀程度。而使用上，對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計則是同樣重要的另一個門道。好的UI不僅是讓軟件變得有個性有品味，還要讓軟件的操作變得舒適、簡單、自由，充分體現(xiàn)軟件的定位和特點。UI還有其它的意義，如Unit Interval，Univ of Iowa，Unlock Ins

VI即（Visual Identity），通譯為視覺識別系統(tǒng)，是CIS系統(tǒng)最具傳播力和感染力的部分。是將CI的非可視內(nèi)容轉(zhuǎn)化為靜態(tài)的視覺識別符號，以無比豐富的多樣的應(yīng)用形式，在最為廣泛的層面上，進行最直接的傳播。設(shè)計到位、實施科學(xué)的視覺識別系統(tǒng)，是傳播企業(yè)經(jīng)營理念、建立企業(yè)知名度、塑造企業(yè)形象的快速便捷之途。 在品牌營銷的今天，沒有上海vi設(shè)計公司對于一個現(xiàn)代企業(yè)來說，就意味著它的形象將淹沒于商海之中，讓人辨別不清；就意味著它是一個缺少靈魂的賺錢機器；就意味著它的產(chǎn)品與服務(wù)毫無個性，消費者對它毫無眷戀；就意味著團隊的渙散和低落的士氣。

VI設(shè)計一般包括基礎(chǔ)部分和應(yīng)用部分兩大內(nèi)容。其中，基礎(chǔ)部分一般包括：企業(yè)的名稱、標志設(shè)計、標識、標準字體、標準色、輔助圖形、標準印刷字體、禁用規(guī)則等等；而應(yīng)用部分則一般包括：標牌旗幟、辦公用品、公關(guān)用品、環(huán)境設(shè)計、辦公服裝、專用車輛等等。更多關(guān)于素馬品牌VI設(shè)計報價方案，請訪問《Behance & Dribbble上的品牌設(shè)計師巧妙包裝logo標志作品》。

UI設(shè)計和VI設(shè)計，兩種設(shè)計的工作屬性不同。UI設(shè)計中，平面設(shè)計工作只是其中的一小部分內(nèi)容，其設(shè)計工作的主體，還是在軟件交互性設(shè)計上，軟件交互性設(shè)計，上海vi設(shè)計公司主要是針對軟件操作流程提出最優(yōu)方案，屬于應(yīng)用工程設(shè)計，而非平面設(shè)計。而其中涉及到軟件圖標、界面視覺布局等平面設(shè)計項目，只是整個交互設(shè)計工作中的一項。其主要目的，是為用戶提供更具親和力的界面外觀。是服務(wù)于交互性設(shè)計工作的。VI設(shè)計，則是完全的，且自成系統(tǒng)的平面設(shè)計工作。其設(shè)計成果，直接應(yīng)用于客戶的機構(gòu)或品牌。其設(shè)計目的，是將所服務(wù)的機構(gòu)或品牌的相關(guān)視覺要素加以系統(tǒng)化與規(guī)范化，進而強化其可識別性。

價值百萬的品牌設(shè)計模型

色彩

色彩毋庸置疑，每年很多產(chǎn)品品牌更新，或者迭代都會去更新色彩，好的色彩能讓人記憶深刻，平庸色彩只會讓人忽略，所以在塑造一個品牌時候，色彩一定不能土，要讓人記憶猶新。

陳宋品牌顧問

C&S BRAND DESIGN

陳宋品牌顧問前身為陳紹華設(shè)計，由中國著名設(shè)計大師陳紹華先生創(chuàng)辦于1992年，是中國最早成立的設(shè)計公司之一。伴隨中國經(jīng)濟的高速發(fā)展，服務(wù)過華潤、萬科、天虹、中國高鐵、中國華信、三一重工等眾多國內(nèi)外知名品牌與企業(yè)，為中國品牌的崛起樹立全新形象，北京申奧設(shè)計更成為我們作品中的里程碑。

陳宋品牌顧問官方網(wǎng)站主色采用了高亮黃色，給人印象深刻。紅色與深灰的搭配也是經(jīng)典的色彩搭配方案。

色彩一定要和產(chǎn)品目標相匹配，如果你的產(chǎn)品是以年輕人為主，比如ins那么你的色彩可以更加飽和度高，更明亮一些，如果你的產(chǎn)品是比較商務(wù)包容性強一些，可以是Facebook的藍色。

Adobe每年的產(chǎn)品更新迭代，2年更換一次品牌，目的是區(qū)別這些不同的版本，可以發(fā)現(xiàn)，每年的更新除了視覺樣式的更新，整體的色彩也進行了更新，最新版本的PS顏色更加商務(wù)，更加穩(wěn)重，和潘通流行色很貼近！

這些知名公司每年的品牌升級，都會重點在色彩上去進行更新和迭代，一方面占據(jù)用戶心中的品牌色彩，比如微信綠色，支付寶藍色，美團黃色，淘寶橙色，另外一方面也是為了讓品牌更加和戰(zhàn)略貼合更緊密。

2019年最明顯案例應(yīng)該是美團黃了，品牌從藍綠漸變變?yōu)辄S色為主，從品牌LOGO到主頁面都進行了品牌色的變化，讓用戶明顯的感知到變化。

之前陌陌升級新LOGO啟用了紅黃藍三原色，從冷色到暖色過渡，寓意是通過陌陌的連接，從陌生走向熟悉。眼睛圖案的使用，代表著陌陌用戶對這個世界的好奇與探索。多重色彩的設(shè)計，象征著產(chǎn)品視頻化。

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

圖形

除了色彩，板式，圖像等優(yōu)化還有一個很重要的元素就是形狀，這個很容易被很多設(shè)計師忽略，其實圖形也是有情感的。

我們界面中經(jīng)常用到的卡片，按鈕，菜單，圖像的等等都是由形狀組成了，在材料設(shè)計中也很明顯的強調(diào)了這一點，最新的谷歌材料設(shè)計中，很明確告訴設(shè)計師我們需要通過形狀來增加品牌的吸引力！

圓形的浮動動作按鈕和凹陷的底部應(yīng)用導(dǎo)航欄在設(shè)計中脫穎而出。

選中的卡片，選中效果有一個彎曲的弧度，來代表它的被選中狀態(tài)。

谷歌材料設(shè)計官方文檔，https://material.io/design/shape/#components-shape

如果想你的產(chǎn)品在競品中脫穎而出，除了色彩以外，形狀是很好的一個表達方式，一致的形狀配合色彩能為品牌帶來很好的記憶點。

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

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

圓形和大自然的太陽地球宇宙關(guān)聯(lián)性比較大，橢圓也和宇宙很像，因此圓形給人永恒，未來，神秘的感受，和其它圖形不同的是圓形更加柔和，因此在很多年輕化產(chǎn)品中經(jīng)常可以看見圓形的運用。

因為圓形沒有終點，線條柔和，特別是形狀大屏手機越來越多，圓形和手機屏幕適配也更加靈活，在很多運動，年輕，潮流產(chǎn)品設(shè)計基本都能看見圓形作為主要圖形的運用，手淘就是一個很好的案例，從"淘"字的LOGO提取一個圓點，到界面中圓形符號等！所以當你需要對你的設(shè)計進行升級時候，記住圖形千萬不要忽略。

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

蘋果最新的apple pay設(shè)計的卡面圖案就是運用的這種分形的幾何圖形，非常抽象且具有生命力，instagram早上的圖片軟件的logo也是類似的設(shè)計手法！以及各類型科技發(fā)布會的海報設(shè)計，詳細更多案例歡迎去我的pinterest上查閱！

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

插畫

插畫對于品牌來說也是非常重要的一個因素，無論在界面設(shè)計，還是在品牌營銷很多場景我們都需要插畫去營造我們的產(chǎn)品氛圍和氣質(zhì)，插畫有助于將我們的品牌故事講述給聽眾聽，所以在構(gòu)建一個品牌時候，插畫是非常重要的點之一，但是做之前我們一定要盡量多去了解我們?yōu)榭蛻籼峁┑脑O(shè)計價值，只有了解了用戶價值，才能去定義去特色的故事，幫助產(chǎn)品！

菲安妮

FION

20世紀七十年代，F(xiàn)ION帶著藝匠的初心，對時尚的追求，于1979年正式成立。三十多年來，F(xiàn)ION 對傳統(tǒng)技藝的堅持始終如一 ， 繼承香港"第一代皮匠" 的頂尖工藝，成就其一貫的精工品質(zhì)和對細節(jié)的考究。 同時，F(xiàn)ION致力于帶給都市女性精致的品質(zhì)生活， 通過藝術(shù)聯(lián)乘與時尚潮流的碰撞，將藝術(shù)創(chuàng)意融入在FION的產(chǎn)品設(shè)計中，用更多元的內(nèi)容和更多樣的商品，帶給女性高品質(zhì)的生活美學(xué)和有幸福感的生活方式，讓藝術(shù)走進生活。

素馬為時尚品牌菲安妮官方網(wǎng)站建設(shè)時就采用了插畫設(shè)計技巧。

Uber系列插畫提供暖色，以及安全藍的運用，突出打車服務(wù)中安全的關(guān)鍵要素

東南亞電商lazada整體品牌定位年輕活力的用戶，所以對東南亞人群氣質(zhì)提煉出一系列的人物插畫運用到UI產(chǎn)品界面中，在傳遞個性同時也把產(chǎn)品的情緒融入其中。

設(shè)計師根據(jù)這些插畫的特別，延展出一系列運營場景，在界面，空白頁等場景傳遞出品牌的氣質(zhì)！

在淘寶產(chǎn)品中，設(shè)計師將空白頁面運用有趣的小故事傳遞給用戶，給用戶帶來更好的購物體驗和感受！

故事一：太空網(wǎng)絡(luò)遺跡

通用的"網(wǎng)絡(luò)異常"的場景，講的是"一個宇航員在外太空尋找網(wǎng)絡(luò)遺跡"的故事，太空場景本身就是一種神秘且容易丟失的空間，將網(wǎng)絡(luò)夸張擬物保證意義明確，最后定格在正向俯視圖上。

故事二：大漠足印

"足跡為空"的場景，是"一個考古學(xué)家在大漠中追尋巨人足跡"的故事，一個在沙漠中找尋的學(xué)家，發(fā)現(xiàn)了一個類似巨人的足印，但足印的主人不知所蹤。

故事三：擁擠的傳送帶

通用限流場景，把貨物擬人化，卡在貨物傳送帶的入口上你推我搡，豐富的畫面間接體現(xiàn)擁擠的感覺。

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

字體

自從騰訊在20周年發(fā)布了騰訊字體，運用一些有向前感覺的斜體，越來越多的公司在品牌升級時候，加入品牌字體設(shè)計。

阿里巴巴在2019年UCAN大會上發(fā)布了阿里普惠體，為了解決廣大的素材需求和高昂版權(quán)費用之間的矛盾，整個字體采用現(xiàn)代簡潔的筆畫，適用于多個業(yè)務(wù)場景，這套字體不是單純從某一種西文或中文字體的造型特征出發(fā)進行延展，而是以 9 個品牌體感詞為切入點，將體感共鳴轉(zhuǎn)換為字體造型。

OPPO字體，跟隨著整個品牌升級，OPPO也更新了自己字體，圍繞著探索科技美感，有獨特的語言打造具有標志性的，與眾不同的品牌體驗。

小米發(fā)布了小米蘭亭體，整個字體可以動態(tài)變化粗細是一大創(chuàng)新亮點，可見現(xiàn)在設(shè)計越來越難做了，作為一個大型公司品牌設(shè)計，一套專屬字體好像已經(jīng)成為標配了。

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

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

圖標

圖標是界面中除了文字以外經(jīng)常運用到的點，一個好的圖標能把產(chǎn)品特點體現(xiàn)的淋漓盡致！

我們結(jié)合一個實際案例，看看設(shè)計師是如何在圖標中融于品牌元素的：

這是產(chǎn)品LOGO，粗略看沒什么特點，但是設(shè)計師從LOGO中挖掘了一個圖形，也就是這個半弧的圖形作為一個設(shè)計創(chuàng)意點，然后將這個圖形進行運用到各個場景！

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

最后

正如我們之前文章中所說，品牌就像內(nèi)褲，看不見但是很重要，作為設(shè)計師，除了做好滿足產(chǎn)品的功能設(shè)計外，把你負責(zé)的產(chǎn)品賦予性格和生命力，是我們必須的職責(zé)也是作為產(chǎn)品設(shè)計師必須要具備的能力，最后我們來回顧下今天的內(nèi)容，如何在UI中塑造一個品牌，可以通過以下維度：

1.色彩（有特點的顏色，顏色不能太普通）

2.形狀（合理運用形狀特點，定義圖形風(fēng)格）

3.插畫（符合產(chǎn)品調(diào)性的插畫風(fēng)格）

4.字體（定義獨特氣質(zhì)的字體，或者選擇一套）

5.圖標（基于LOGO找到特別符號的圖標）

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