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

品牌ui是什么

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

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

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

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

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

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

價(jià)值百萬的品牌設(shè)計(jì)模型

色彩

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

陳宋品牌顧問

C&S BRAND DESIGN

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

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

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

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

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

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

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

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

圖形

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

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

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

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

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

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

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

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

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

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

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

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

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

插畫

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

菲安妮

FION

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

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

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

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

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

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

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

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

故事二：大漠足印

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

故事三：擁擠的傳送帶

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

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

字體

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

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

OPPO字體，跟隨著整個(gè)品牌升級(jí)，OPPO也更新了自己字體，圍繞著探索科技美感，有獨(dú)特的語言打造具有標(biāo)志性的，與眾不同的品牌體驗(yàn)。

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

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

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

圖標(biāo)

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

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

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

這套圖標(biāo)中，圓角元素，圖標(biāo)顏色和LOGO匹配，保留LOGO中黃色元素，同時(shí)圖標(biāo)的弧度在圓弧的地方，運(yùn)用比較大的柔和的角度和整體的LOGO匹配。

最后

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

1.色彩（有特點(diǎn)的顏色，顏色不能太普通）

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

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

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

5.圖標(biāo)（基于LOGO找到特別符號(hào)的圖標(biāo)）

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