APP為什么需要品牌設(shè)計(jì)
距離上一篇App系列文章已經(jīng)過(guò)去兩個(gè)星期了，我除去教學(xué)生的時(shí)間，都在準(zhǔn)備這篇文章的資料，因?yàn)檫@篇文章的內(nèi)容除了大量的截圖還有視頻需要處理。上篇文章有人留言說(shuō)文字太多，懶得看。我想說(shuō)我的文章是寫給愛(ài)學(xué)習(xí)的同學(xué)看的，不是娛樂(lè)貼。所以這篇文章依然很長(zhǎng)，干貨十足。
現(xiàn)在打開(kāi)各種設(shè)計(jì)網(wǎng)站，去尋找App界面設(shè)計(jì)參考。你會(huì)發(fā)現(xiàn)如果去掉圖標(biāo)，僅僅去看界面設(shè)計(jì)，很多App的界面設(shè)計(jì)差異性非常小。App設(shè)計(jì)有一種同質(zhì)化的傾向。
在產(chǎn)品型公司，UI設(shè)計(jì)師的工作流程一般是這樣的，和產(chǎn)品經(jīng)理或者交互設(shè)計(jì)師討論每個(gè)版本的規(guī)劃，在這個(gè)討論過(guò)程中用草圖的形式畫出大致的流程。之后將流程圖細(xì)化并分析使用上的便利性和技術(shù)上的可行性，然后設(shè)計(jì)師將界面設(shè)計(jì)好，經(jīng)過(guò)評(píng)審沒(méi)有問(wèn)題，直接輸出給程序員。這是一個(gè)標(biāo)準(zhǔn)化的流水作業(yè)流程，留給設(shè)計(jì)師發(fā)揮的時(shí)間和空間并不多，更多時(shí)候是以功能實(shí)現(xiàn)為第一需求。另外的有部分原因是設(shè)計(jì)師趨向于保守設(shè)計(jì)，遵循各種平臺(tái)規(guī)范，這樣的保守設(shè)計(jì)不容易出錯(cuò)。因?yàn)閭€(gè)性的設(shè)計(jì)的App可能非常成功，也可能是大家眼中的異類。以上的原因?qū)е潞芏嗌虡I(yè)的App設(shè)計(jì)的大同小異。
經(jīng)過(guò)這幾年的移動(dòng)創(chuàng)業(yè)風(fēng)潮，大量App設(shè)計(jì)已經(jīng)存在，現(xiàn)在設(shè)計(jì)師遇到的不是從零起步，如何設(shè)計(jì)一款A(yù)pp的問(wèn)題了。而是面臨各種改版設(shè)計(jì)的需求，如何設(shè)計(jì)一款和競(jìng)品有差異化設(shè)計(jì)的界面，這是UI設(shè)計(jì)師越來(lái)越迫切的需求。面對(duì)現(xiàn)在App設(shè)計(jì)趨同的市場(chǎng)行情，如果誰(shuí)可以做出不一樣的設(shè)計(jì)，那么你就可以鶴立雞群。差異化設(shè)計(jì)這對(duì)界面設(shè)計(jì)師也是一個(gè)巨大的挑戰(zhàn)和機(jī)會(huì)。
APP品牌植入設(shè)計(jì)
品牌設(shè)計(jì)是在企業(yè)自身正確定位的基礎(chǔ)之上，基于正確品牌定義下的視覺(jué)溝通。我們平?？吹降膌ogo設(shè)計(jì)只是品牌設(shè)計(jì)視覺(jué)延伸的一部分。因?yàn)橐苿?dòng)界面設(shè)計(jì)的同質(zhì)化嚴(yán)重，所以越來(lái)越多的公司重視對(duì)App的品牌塑造，希望通過(guò)品牌的塑造，使用戶快速的對(duì)產(chǎn)品形象進(jìn)行有效深刻的記憶。 App中的 Logo圖標(biāo)、界面的視覺(jué)風(fēng)格，甚至App Store上的介紹和宣傳Banner等，都是品牌設(shè)計(jì)的組成部分。 App的品牌設(shè)計(jì)，對(duì)移動(dòng)互聯(lián)網(wǎng)時(shí)代的的產(chǎn)品質(zhì)量提升帶來(lái)了更多的可能性。也對(duì)設(shè)計(jì)師本身的平面視覺(jué)技能帶來(lái)了更大的機(jī)會(huì)和挑戰(zhàn)。
移動(dòng)端產(chǎn)品品牌視覺(jué)設(shè)計(jì)的點(diǎn)：
圖標(biāo)：APP圖標(biāo)、底部導(dǎo)航欄、其他頁(yè)面的功能圖標(biāo)
字體：字體（APP可以內(nèi)置字體包變換字體）、字號(hào)
頁(yè)面設(shè)計(jì)：引導(dǎo)頁(yè)、啟動(dòng)頁(yè)、刷新控件
排版：元素的留白
圖片：頁(yè)面的配圖、占位圖片、頁(yè)面的情感插畫
線下物料：線下的各種物料及其衍生品。
APP品牌設(shè)計(jì)的步驟
1、 發(fā)掘產(chǎn)品的氣質(zhì)
2、 品牌圖形的提煉
3、 品牌圖形的幾何化輪廓
4、 品牌圖形在界面設(shè)計(jì)中的應(yīng)用
5、 視覺(jué)語(yǔ)言的一致性
第一步：發(fā)掘產(chǎn)品的氣質(zhì)
當(dāng)我們看一個(gè)人的時(shí)候，會(huì)根據(jù)他的外表+內(nèi)涵，我們會(huì)對(duì)他有第一個(gè)印象的認(rèn)知，這個(gè)就是氣質(zhì)。APP也一樣。App的外表是我們產(chǎn)品的視覺(jué)設(shè)計(jì)呈現(xiàn)，也就是這個(gè)產(chǎn)品看起來(lái)讓人感覺(jué)如何。內(nèi)涵就是App的內(nèi)容和功能的呈現(xiàn)，就是能否進(jìn)一步留住用戶駐足。所以產(chǎn)品就是這樣，呈現(xiàn)什么樣的氣質(zhì)，就會(huì)吸引來(lái)什么樣子的用戶。
常見(jiàn)的品牌氣質(zhì)
1、 高冷氣質(zhì)
2、 文藝氣質(zhì)
3、 時(shí)尚氣質(zhì)
4、 活力向上
5、 個(gè)性張揚(yáng)
1、高冷氣質(zhì)
高冷的人自帶著一種生人勿近的冷淡氣質(zhì)，喜歡穿著黑白灰。朋友不是很多，不需要融入小圈子。然后嚴(yán)格按照自己任性極致的標(biāo)準(zhǔn)篩選良莠，深交的少，淺交的保持距離懶得討好。所謂可親而難以靠近。所以高冷氣質(zhì)的應(yīng)用不需要討好所有人，只服務(wù)好這個(gè)App定位的群體就好。例如（圖1-1）的Gucci應(yīng)用，整個(gè)界面只有黑白以及一些色彩豐富的配圖，非常的簡(jiǎn)潔明快，沒(méi)有任何多余的修飾，隱隱透露出大牌的傲嬌。
（圖1-1）Gucci應(yīng)用
2、文藝氣質(zhì)
這個(gè)說(shuō)到文藝氣質(zhì)，其實(shí)就是一個(gè)字“范兒”， 如何才能有范兒？首先要有文化底蘊(yùn)，素質(zhì)修養(yǎng)，如果沒(méi)有的話，裝不像的。具體什么樣，可以去看看一些詩(shī)人，搞民謠音樂(lè)的人的裝扮，尤其是上個(gè)世紀(jì)的。穿著寬松的毛衣，戴著圓圓的黑框眼鏡，搞一條素色的圍巾，拿個(gè)老式的手動(dòng)旁軸相機(jī)，留著稀疏的胡渣，或是女生長(zhǎng)發(fā)飄飄的感覺(jué)。所以應(yīng)用從界面設(shè)計(jì)到頁(yè)面內(nèi)容，都要有足夠的范兒，這樣才是文藝的徹底。例如（圖1-2）最美有物，從界面設(shè)計(jì)到內(nèi)容標(biāo)題的文字都散發(fā)出足夠的文藝氣質(zhì)。這種范兒可能不是所有人都學(xué)的來(lái)的，比如讓做B2C綜合電商的應(yīng)用學(xué)這樣的氣質(zhì)就不倫不類，也許這就是產(chǎn)品基因吧。
（圖1-2）最美有物的內(nèi)容模塊
3、時(shí)尚氣質(zhì)
所謂時(shí)尚，是時(shí)與尚的結(jié)合體。代表當(dāng)前世界對(duì)社會(huì)某項(xiàng)事物崇尚的潮流。是一個(gè)時(shí)期的流行風(fēng)氣與社會(huì)環(huán)境，時(shí)尚引領(lǐng)潮流，是流行文化的表現(xiàn)。對(duì)時(shí)尚最為敏感的就是家居、服飾行業(yè)。沒(méi)有人希望自己買來(lái)的衣服或者家具是一個(gè)落伍淘汰的風(fēng)格。當(dāng)前的在界面設(shè)計(jì)中最流行的就是使用各種幾何元素，通過(guò)點(diǎn)線面的搭配塑造頁(yè)面的時(shí)尚感。例如（圖1-3）男衣邦應(yīng)用，從啟動(dòng)界面到首頁(yè)都穿插了非常多的幾何線條，界面具有濃濃的幾何構(gòu)成時(shí)尚感。
（圖1-3）男衣邦啟動(dòng)頁(yè)和廣告頁(yè)
4、活力向上
有活力的感覺(jué)，就是充滿了朝氣。 Same是一個(gè)非常有個(gè)性的社交應(yīng)用。你安裝完App打開(kāi)應(yīng)用首先呈現(xiàn)的就是兩個(gè)陽(yáng)光可愛(ài)的美少女。通過(guò)開(kāi)場(chǎng)的短片秀（圖1-4），就給人信心滿滿，自信陽(yáng)光的感覺(jué)。
（圖1-4）Same的啟動(dòng)視頻
有些人，從頭到腳散發(fā)出一股吸引你的氣息，這就是所謂志趣相投。有些產(chǎn)品也一樣，你可以在上面找到和你一樣特質(zhì)的人群。Same定位的用戶是90后、00后的年輕人，他們內(nèi)心世界豐富，喜歡新鮮事物。所以界面內(nèi)的表情（圖1-4），是繼line表情之后，對(duì)當(dāng)前年輕人群身份、氣質(zhì)、角色和代入感相當(dāng)強(qiáng)的作品。
（圖1-4）Same的表情設(shè)計(jì)
（圖1-5）Same的表情設(shè)計(jì)
5、個(gè)性張揚(yáng)
個(gè)性意味和人家不一樣，不是隨大流的那種，張揚(yáng)就是外向活潑，給人不見(jiàn)外的感覺(jué)，到任何地方都能引起別人的關(guān)注，張揚(yáng)的壞處就是，過(guò)分的顯擺自己，容易招人嫉妒。所以你的應(yīng)用設(shè)計(jì)的明顯和別人不一樣。兩種結(jié)果。好評(píng)如潮，說(shuō)這個(gè)設(shè)計(jì)不一樣，有自己特點(diǎn)。還有一種結(jié)果就是，這個(gè)應(yīng)用怎么能這樣設(shè)計(jì)，太不符合主流習(xí)慣了。例如（圖1-6）野獸派應(yīng)用，這是綜合類的時(shí)尚類家居相關(guān)售賣平臺(tái)。做為一個(gè)電商類的應(yīng)用，他的設(shè)計(jì)明顯是非常個(gè)性的，沒(méi)有傳統(tǒng)的底部標(biāo)簽欄模塊設(shè)計(jì)，而是首頁(yè)就是一整張插畫，作為首頁(yè)各種子模塊店鋪的入口。這樣的設(shè)計(jì)非常有個(gè)性，讓人一下就記住了。
（圖1-6）野獸派應(yīng)用
所以UI設(shè)計(jì)師需要做的是提煉出的產(chǎn)品氣質(zhì)并轉(zhuǎn)化為具象化的視覺(jué)語(yǔ)言。讓用戶通過(guò)界面這層介質(zhì)感知到你產(chǎn)品的氣質(zhì)。
第二步：品牌圖形的提煉
這個(gè)過(guò)程與平面設(shè)計(jì)logo基本類似，其實(shí)某種程度上就是設(shè)計(jì)logo，現(xiàn)在的App圖標(biāo)游戲圖標(biāo)還會(huì)使用復(fù)雜的光影質(zhì)感。其他主流的商業(yè)應(yīng)用圖標(biāo)都是極簡(jiǎn)的扁平圖標(biāo)。所以更需要一個(gè)獨(dú)特的品牌圖形。
1、具象圖形
通常情況下，具象圖形的LOGO設(shè)計(jì)會(huì)更受到移動(dòng)設(shè)計(jì)的親睞。部分原因是這些LOGO圖形容易辨認(rèn)，可以更清晰的表述出應(yīng)用是做什么的。例如（圖1-7）里的應(yīng)用只看圖形就能很清晰的明白這個(gè)應(yīng)用的屬性或者應(yīng)用的功能。只留給大家很少的開(kāi)放性解釋空間。有些應(yīng)用的圖形甚至很聰明地運(yùn)用了雙關(guān)含義和隱藏圖形。例如OFO既使用品牌的名稱，又表達(dá)了自行車的圖形符合共享單車的屬性。是一個(gè)非常 成功的logo品牌圖形。
（圖1-7）具象圖形的應(yīng)用圖標(biāo)
2、抽象的幾何圖形
抽象圖形，抽象圖形LOGO設(shè)計(jì)同樣很適用于多元化企業(yè)，因?yàn)樗鼈儌鬟_(dá)出的是情緒和基調(diào)，而非具體的公司類型。一個(gè)LOGO未必需要直接反映出公司是做什么的。想想Nike旋風(fēng)，McDonald’s金色拱門，或是Apple的LOGO。所以有時(shí)候App的圖標(biāo)也是如此，更多通過(guò)一些抽象的圖形傳達(dá)一些特別的含義。比如愛(ài)彼迎的圖形背后有四層含義（圖1-8）。首先，這是一個(gè)字母A，代表了Airbnb；第二，這像是一個(gè)人張開(kāi)雙手，代表了人；第三，這像是一個(gè)標(biāo)記地理位置的符號(hào)，代表地點(diǎn)；第四，這是一個(gè)倒過(guò)來(lái)的愛(ài)心，代表了愛(ài)。
（圖1-8）Airbnb的圖形釋義
3、吉祥物
互聯(lián)網(wǎng)公司非常喜歡用動(dòng)物做為公司的吉祥物。這些互聯(lián)網(wǎng)公司的logo有很多是采用讓人萌化的動(dòng)物圖案，這成了一種風(fēng)氣，感覺(jué)互聯(lián)網(wǎng)的圈子成了動(dòng)物園一樣。比如京東的狗（圖1-9），Tmall的天貓、UC的松鼠，騰訊的企鵝等。當(dāng)然吉祥物并非只有選擇使用動(dòng)物圖形，比如站酷的小酷圖形。
（圖1-9）吉祥物為品牌圖形
第三步：品牌圖形的幾何化輪廓
我經(jīng)常和學(xué)生強(qiáng)調(diào)，繪畫和設(shè)計(jì)是兩回事情，也許你會(huì)畫但并不意味著設(shè)計(jì)可以做的好?，F(xiàn)在主流App的LOGO圖形傾向于扁平化設(shè)計(jì)，可能就是一個(gè)簡(jiǎn)單的剪影圖形。比如你要設(shè)計(jì)一個(gè)表現(xiàn)自然或者格調(diào)感的應(yīng)用。設(shè)計(jì)師想使用“鹿”這個(gè)圖形。如果直接用鋼筆勾勒鹿的圖形（圖1-10），那么這個(gè)呈現(xiàn)的是一副剪影插畫。這個(gè)圖形又很多細(xì)節(jié)，線條充滿了不規(guī)則感，這些不規(guī)則線條對(duì)于一個(gè)LOGO設(shè)計(jì)來(lái)說(shuō)是非常冗余的。
（圖1-10）偏插畫的未經(jīng)處理的剪影圖形
1、設(shè)計(jì)輔助線
好的品牌圖形是需要對(duì)基本圖形進(jìn)行2次提煉，去除一些不必要線條細(xì)節(jié)，對(duì)原有的剪影圖形進(jìn)行幾何抽象化。我們經(jīng)?？吹皆诋婰OGO時(shí)候出現(xiàn)的各種輔助線（圖1-11），這些輔助線以各種圓為參考形。輔助線的作用是幫助設(shè)計(jì)師用規(guī)整的幾何圖形去切分原有的剪影。讓線條更加規(guī)整幾何化。這樣幾何規(guī)整化的圖形已經(jīng)和不規(guī)則的偏插畫的剪影圖形區(qū)分開(kāi)來(lái)了?，F(xiàn)在更像一個(gè)有設(shè)計(jì)感的圖標(biāo)圖形了。當(dāng)然現(xiàn)在這樣的設(shè)計(jì)輔助線，在一些設(shè)計(jì)師中有濫用的嫌疑。在一些不需要的加輔助線的地方，加了很多線條，營(yíng)造一種專業(yè)的感覺(jué)。這種做法在有經(jīng)驗(yàn)的設(shè)計(jì)師眼中是非?？尚Φ?。
（圖1-11）用橢圓切割的鹿剪影形狀
2、設(shè)計(jì)的圖形語(yǔ)言
經(jīng)過(guò)幾何規(guī)整化的圖形只能算是一個(gè)好的圖標(biāo)，離好的品牌圖形還有一段距離。品牌圖形一定要有自己獨(dú)特的設(shè)計(jì)，講白圖形一定要有自己的特色，讓別人一下記住你。例如（圖1-12）的設(shè)計(jì)語(yǔ)言就是流暢柔和的線條，通過(guò)這個(gè)極簡(jiǎn)的線條構(gòu)造了鹿的品牌圖形。
（圖1-12）極簡(jiǎn)的線條構(gòu)造鹿的圖形
例如（圖1-13）的鹿圖形使用的是幾何圖形做為設(shè)計(jì)語(yǔ)言，用各種三角形和其他不規(guī)則圖形。類似七巧板一樣的設(shè)計(jì)拼接出鹿的輪廓。這個(gè)鹿的圖形具有獨(dú)特的設(shè)計(jì)感。
（圖1-13）幾何塊面的鹿圖形
3、提取典型的特征
由于移動(dòng)設(shè)計(jì)的LOGO需要在一個(gè)圓角矩形中展示，并沒(méi)有那么大面積供設(shè)計(jì)師發(fā)揮。所以需要選取最具有代表的形的局部圖形（圖1-14），比如鹿的頭部是最具有代表性的圖形部分。
（圖1-14）提取典型特征的鹿頭部圖形
第四步：品牌圖形在界面設(shè)計(jì)中的運(yùn)用
1、 引導(dǎo)頁(yè)
抽象形式感的圖形，與廣告頁(yè)進(jìn)行呼應(yīng)。點(diǎn)擊App圖標(biāo)，第一次打開(kāi)應(yīng)用的界面。會(huì)呈現(xiàn)一組引導(dǎo)頁(yè)。引導(dǎo)頁(yè)是用戶進(jìn)入主界面之前，首先見(jiàn)到的頁(yè)面。這是產(chǎn)品給用戶的第一印象。由于第一印象的好壞會(huì)極大地影響到后續(xù)的產(chǎn)品使用體驗(yàn)，因此我們需要花一些時(shí)間去精心設(shè)計(jì)引導(dǎo)頁(yè)。匠物APP的應(yīng)用通過(guò)一個(gè)動(dòng)畫，把LOGO的圖形放大（圖1-15），映射在引導(dǎo)頁(yè)的背景上。這樣品牌圖形前后有了一個(gè)呼應(yīng)，加深了用戶的印象。
（圖1-15）匠物的引導(dǎo)頁(yè)
現(xiàn)在很多應(yīng)用都放棄了四頁(yè)引導(dǎo)頁(yè)的傳統(tǒng)做法，而是偏向內(nèi)置視頻的做法。視頻具有更好的視覺(jué)動(dòng)態(tài)效果。比如最美有物引導(dǎo)頁(yè)使用了一段視頻（圖1-16），使用各種絢麗效果，最后一幀放出品牌logo圖形，這種手法是不是很像我們以前看的各種國(guó)外大牌廣告。比如耐克的廣告從來(lái)不會(huì)放什么XX產(chǎn)品就是好的廣告，而是喜歡放一段情懷畫面，最后一個(gè)大大的LOGO告訴消費(fèi)者我這是耐克的廣告。
（圖1-16）最美有物的引導(dǎo)頁(yè)視頻
2、 啟動(dòng)頁(yè)
每次打開(kāi)一個(gè)App，都會(huì)看到啟動(dòng)頁(yè)，所以這是一個(gè)品牌露出非常高頻次的頁(yè)面，大多數(shù)應(yīng)用都是品牌圖形+ Slogan的設(shè)計(jì)形式，比如Life的啟動(dòng)頁(yè)（圖1-17），直接把品牌Slogan反復(fù)在啟動(dòng)頁(yè)，和隨后的廣告頁(yè)反復(fù)呈現(xiàn)。
（圖1-17）Life啟動(dòng)頁(yè)
如果覺(jué)得直接放品牌圖形+背景的做法，比較老套的話，也可以嘗試在品牌圖形上進(jìn)行2次設(shè)計(jì)。比如良倉(cāng)的啟動(dòng)頁(yè)（圖1-18）運(yùn)用logo圖標(biāo)的典型輪廓進(jìn)行2次創(chuàng)作。
（圖1-18）良倉(cāng)啟動(dòng)視頻
3、刷新控件
刷新控件用于刷新當(dāng)前頁(yè)面內(nèi)容。在我的書中《術(shù)與道移動(dòng)應(yīng)用設(shè)計(jì)必修課》中有介紹。目前主流有下拉刷新和上拉刷新兩種方式，這兩種交互方式有很大區(qū)別。以網(wǎng)易新聞為例，我們?cè)诳串?dāng)前頁(yè)面的時(shí)候，使用下拉動(dòng)作，界面反饋當(dāng)前頁(yè)面內(nèi)容條數(shù)不變，而內(nèi)容更新。而上拉刷新代表是加載。一個(gè)頁(yè)面固定加載一定條數(shù)的新聞，從上往下看，看完一定條數(shù)，往上一拉，后面的內(nèi)容繼續(xù)載入。
方法1使用幾何圖形
Enjoy的品牌圖形有一個(gè)非常鮮明的圖形是那個(gè)波浪線，Enjooy下拉刷新的時(shí)候使用了這個(gè)波浪圖形（圖1-19），讓品牌圖形無(wú)處不在。
（圖1-19）Enjoy的刷新圖形
當(dāng)然使用的圖形也可以是一種圖形的設(shè)計(jì)風(fēng)格，比如造作的全局是較為硬朗的圖形，這點(diǎn) 在他的個(gè)人中心就可以看出來(lái)，他的個(gè)人中心（圖1-20）都是非常硬朗的直接圖標(biāo)。所以他的刷新使用了一個(gè)矩形做為刷新圖形（圖1-21）。
（圖1-20）造作的個(gè)人中心圖標(biāo)
（圖1-21）造作的矩形刷新圖形
方法2使用吉祥物圖形
在界面設(shè)計(jì)中嗎，必須有一個(gè)設(shè)計(jì)語(yǔ)言貫穿，這樣你的設(shè)計(jì)才會(huì)有特色，這個(gè)語(yǔ)言可以是一個(gè)圖形，也可以是一個(gè)吉祥物卡通形象。如果有這樣一個(gè)形象存在，你的界面設(shè)計(jì)會(huì)一下提升不少的特色。
（圖1-22）大眾點(diǎn)評(píng)的刷新控件
4、 占位圖片
在界面設(shè)計(jì)中，很多圖片需要考慮數(shù)據(jù)為空的情況，也有可能由于網(wǎng)絡(luò)的情況圖片可能沒(méi)有加載出來(lái)，這些都需要設(shè)計(jì)一個(gè)默認(rèn)的占位圖片。例如最美有物的品牌圖形是一個(gè)鹿（圖1-23），他的個(gè)人中心默認(rèn)頭像就是一個(gè)鹿的占位圖
（圖1-23）最美有物個(gè)人中心頁(yè)
需要注意的是在社交或者內(nèi)容社區(qū)，品牌圖形的個(gè)人頭像有時(shí)候是需要慎重使用的，因?yàn)槟菢訒?huì)讓人誤以為這是官方頭像。
5、 界面其他小元素
有時(shí)候界面中功能會(huì)配上一些圖標(biāo)，讓設(shè)計(jì)更好的釋義。對(duì)于一些約定俗成的功能，如果把這個(gè)圖標(biāo)去除也不會(huì)很明顯的影響含義。這個(gè)時(shí)候可以考慮使用特別的品牌圖形替代。比如life的卡片banner上的點(diǎn)贊功能圖標(biāo)，使用了品牌圖形指紋替代來(lái)傳統(tǒng)的心形（圖1-24）。從體驗(yàn)來(lái)說(shuō)，這個(gè)數(shù)字很容易讓人聯(lián)想到這是評(píng)論數(shù)或者點(diǎn)贊數(shù)。所以替換為品牌圖形對(duì)于用戶體驗(yàn)并沒(méi)有明顯的降低。
（圖1-24）LIFE的卡片Banner
六、底部導(dǎo)航欄圖標(biāo)
典型的IOS應(yīng)用的結(jié)構(gòu)是把App的主要模塊放在底部導(dǎo)航進(jìn)行切換，底部導(dǎo)航一般分為4到5個(gè)模塊。以圖標(biāo)+文字的設(shè)計(jì)形式進(jìn)行展示。那么這些圖標(biāo)就可以與品牌圖形相結(jié)合，加深用戶的印象。
方法1：品牌圖形應(yīng)用在首頁(yè)圖標(biāo)
首頁(yè)最常見(jiàn)使用的圖標(biāo)是一個(gè)房子的圖形，這個(gè)圖形來(lái)源于PC時(shí)代的面包屑結(jié)構(gòu)，Home的圖形代表家，代表不管你在網(wǎng)站哪個(gè)層級(jí)，點(diǎn)擊Home圖標(biāo)像回家一樣可以回到起始的位置。很多應(yīng)用的圖標(biāo)上的logo，都是一個(gè)讓人印象深刻的主圖形，那么我們可以直接把這個(gè)logo圖形做為應(yīng)用的首頁(yè)模塊圖標(biāo)使用。這樣的好處很明顯，每次用戶打開(kāi)應(yīng)用后，都會(huì)看到這個(gè)圖形，反復(fù)加強(qiáng)了用戶對(duì)App的logo的印象。例如大眾點(diǎn)評(píng)、餓了么、花瓣、貓途鷹、網(wǎng)易云音樂(lè)提取各自品牌圖形（圖1-25），應(yīng)用在了App底部導(dǎo)航欄首頁(yè)模塊上。
（圖1-25）大眾點(diǎn)評(píng)、餓了么、花瓣、貓途鷹、網(wǎng)易云音樂(lè)首頁(yè)圖標(biāo)使用了品牌圖形
方法2：品牌名稱應(yīng)用在底部導(dǎo)航欄
一些應(yīng)用的名稱是字母構(gòu)成，為了強(qiáng)化用戶對(duì)于應(yīng)用名稱的認(rèn)知，直接把名稱做為標(biāo)簽欄的圖標(biāo)。例如MONO（圖1-26）應(yīng)用的標(biāo)簽欄圖標(biāo)，設(shè)計(jì)的非常大膽，提取logo上面的4個(gè)字母M、O、N、O后，直接將其作為圖標(biāo)。但是這種設(shè)計(jì)策略的缺陷也很大，每個(gè)字母和功能模塊本身的含義并沒(méi)有直接聯(lián)系，對(duì)用戶幫助理解模塊有一定的困難。所以這種方法適合一些極客小眾App去使用。
（圖1-26）MONO的底部標(biāo)簽欄圖標(biāo)
第五步：視覺(jué)語(yǔ)言的一致性
1、顏色的一致性
在完成了產(chǎn)品的整體風(fēng)格和功能構(gòu)架后，我們可以著眼于一些細(xì)節(jié)層面的設(shè)計(jì)。比如統(tǒng)一你的產(chǎn)品中，色彩和圖形的意義。比如設(shè)計(jì)一套套標(biāo)準(zhǔn)的配色方案，：用品牌色代表可點(diǎn)擊的按鈕，用橙色代表與金錢有關(guān)的操作，用藍(lán)色代表鏈接，用戶對(duì)這些顏色的含義就進(jìn)行了學(xué)習(xí)和習(xí)慣。讓用戶對(duì)這個(gè)App內(nèi)的顏色形成記憶。例如好物（圖1-27）好物每個(gè)可點(diǎn)擊的按鈕都是品牌黃色。
（圖1-27）好物界面設(shè)計(jì)
2、圖形設(shè)計(jì)的一致性
圖形設(shè)計(jì)包含各種插圖和圖標(biāo)。對(duì)于插圖如果是一個(gè)人設(shè)計(jì)的，那么更容易形成統(tǒng)一的風(fēng)格。
插圖的風(fēng)格和圖標(biāo)的風(fēng)格也需要保持一致。一些應(yīng)用的插圖設(shè)計(jì)師和界面設(shè)計(jì)師是2個(gè)人，插圖的風(fēng)格偏卡通或者手繪，而界面的圖標(biāo)設(shè)計(jì)偏規(guī)整。那么這個(gè)風(fēng)格就顯得格格不入。比如Same（圖1-28）的插圖風(fēng)格和圖標(biāo)風(fēng)格就協(xié)調(diào)的非常好。
（圖1-28）Same的插圖和圖標(biāo)設(shè)計(jì)
3、元素的一致性
界面的本質(zhì)是信息傳遞的一種介質(zhì)，界面中包含各種繁雜的信息。所以如果我們希望通過(guò)設(shè)計(jì)讓界面自己會(huì)說(shuō)明，我們可能會(huì)加上一些樣式的區(qū)分，比如我把標(biāo)題加粗加大，把輔助信息變淺色變小一些，但這只能區(qū)分主次，很難具體說(shuō)明每一部分的意義；那我還可以給一些信息加上可識(shí)別的圖標(biāo)。Life采用的是圖標(biāo)+標(biāo)題+欄目上下排版形式（圖1-29）。這樣的設(shè)計(jì)好處是每個(gè)模塊很清晰，且用戶可以很清晰的對(duì)應(yīng)分類各種子頻道。所以設(shè)計(jì)樣式不是隨意的選擇，單純的看視覺(jué)美學(xué)樣式。而是需要有效的對(duì)產(chǎn)品運(yùn)營(yíng)的需求進(jìn)行支撐。
（圖1-29） Life首頁(yè)樓層banner與分類頁(yè)
設(shè)計(jì)結(jié)語(yǔ)
一個(gè)成功商業(yè)產(chǎn)品，首先需要所有團(tuán)隊(duì)成員有一個(gè)共同的目標(biāo)，并且大部分人具有品牌思維和設(shè)計(jì)思維，將其落實(shí)到和用戶的每一個(gè)觸點(diǎn)中去，也就是我們所說(shuō)的服務(wù)設(shè)計(jì)，這樣品牌的影響力才能逐漸深入人心。今天我們說(shuō)的視覺(jué)圖形設(shè)計(jì)只是品牌設(shè)計(jì)中的冰山一角，是最容易被普通用戶感知的一層。寫完這一篇《品牌設(shè)計(jì)在界面設(shè)計(jì)中的植入》，感覺(jué)還有很多沒(méi)有說(shuō)完。所以下一篇繼續(xù)說(shuō)品牌設(shè)計(jì)的內(nèi)容，題目是《品牌設(shè)計(jì)在圖標(biāo)設(shè)計(jì)中的運(yùn)用》。我的微信是booui2017,可以加我交流。加我請(qǐng)注明站酷，不要加我一句話不說(shuō)，我會(huì)刪人的。因?yàn)槲⑿诺娜藬?shù)有限，5000人很容易加滿。
