本文筆者將與大家講述：什么是APP品牌感知？APP為什么需要品牌感知？以及，如何設(shè)計以加強(qiáng)APP的品牌感知？

什么是APP品牌感知？

只有被用戶感知，“品牌”才有可能形成

感知只是用戶對品牌信息在感官層面（視、聽、觸、嗅等）上的接收，而認(rèn)知是用戶大腦對品牌各種信息加工處理后的結(jié)果。所以，就算你設(shè)計了一套完整的品牌VI，不代表你就有了品牌。只有在用戶心智中形成了認(rèn)知后，品牌才開始形成。

APP的品牌設(shè)計就是以視覺形式（有APP開始重視聲音或點擊的物理反饋設(shè)計，也是加強(qiáng)品牌設(shè)計的形式，本文主要討論視覺）加強(qiáng)用戶對品牌的感知，讓品牌能夠潛入用戶心智形成認(rèn)知。

APP為什么需要品牌感知？

審美升級，設(shè)計趨同：沒有品牌個性就沒法打動用戶

大眾審美升級，對美的標(biāo)準(zhǔn)已經(jīng)改變，從追捧網(wǎng)紅臉轉(zhuǎn)向超模高級臉，時尚從甜美性感等女人味轉(zhuǎn)向西裝白T爸爸褲的中性風(fēng)。看似開始反傳統(tǒng)，其實是對個性和認(rèn)同有更熱烈的追求。

這個包寫了我的名字、這個廣告很杜蕾斯、這個年度歌單很網(wǎng)易云，看到有東西特別符合自己氣質(zhì)、代表自己獨特的品味的，必須馬上翻牌子。那些品牌名字成了形容詞，它們成為某一種氣質(zhì)風(fēng)格的典型深入人心。這就是成功建立起認(rèn)知的品牌的影響力。

而現(xiàn)在市場上很多的APP，尤其是同類產(chǎn)品，在滿足相同需求的前提下，從框架到表現(xiàn)層的設(shè)計都高度同質(zhì)化。我們需要至少一個亮點去吸引挑剔的目標(biāo)用戶，APP的視覺作為用戶對品牌最直接的感知，是打動用戶的有力武器。

形而上的東西說完了，實際到底怎么操做？

如何設(shè)計以加強(qiáng)APP的品牌感知？

STEP 1. 品牌調(diào)性定位

品牌調(diào)性由產(chǎn)品定位決定，產(chǎn)品視覺風(fēng)格也直接反映品牌定位，在定調(diào)這一步就看設(shè)計師功力了。經(jīng)驗豐富的設(shè)計師能夠準(zhǔn)備把握產(chǎn)品定位，并通過視覺設(shè)計將這種定位強(qiáng)化。

以下幾個APP是個人覺得品牌風(fēng)格非常獨特且符合產(chǎn)品定位的，比如：最右涂手是主打涂鴉的產(chǎn)品，限制黑白兩色來突出想法本身，APP的設(shè)計也采用了黑白和手繪形式，用戶通過這種設(shè)計也能感受到產(chǎn)品的這種定位。

STEP 2. 品牌視覺DNA提煉

品牌視覺基因是品牌設(shè)計語言的凝練和核心，是和競品區(qū)隔的關(guān)鍵。

可能有人會說因為自己的產(chǎn)品定位很普通，品牌沒有特別之處，挖不出什么亮點。在這里我提供一種比較具體的思路——從品牌的視覺資產(chǎn)切入。

但是，需要強(qiáng)調(diào)的是，這僅僅是一種方式，主要供大家練習(xí)找找感覺，大家不要局限于這種形式。

通過分析你的品牌VI，得到較為明確的設(shè)計語言，可以從形、色、質(zhì)、字、版式等多種維度去分析歸納設(shè)計特征。

接下來就以品牌5種常見的視覺資產(chǎn)——品牌LOGO、品牌色、品牌吉祥物、插畫和品牌圖案為例，結(jié)合具體設(shè)計給大家說明。

STEP 3. 品牌視覺DNA在APP設(shè)計中的應(yīng)用

1）LOGO

從品牌Logo就可以得到很多可應(yīng)用的元素，比如：造型特點、風(fēng)格、質(zhì)感。常見的做法是將logo直接作為tab icon使用。但飛豬做得更多，設(shè)計師提取了Logo豬的發(fā)型形狀，作了簡化（提取輪廓）和添加修飾（首頁icon的豬鼻子），再應(yīng)用到Search bar 和 Tab icon中，有很高的識別度。

（將品牌logo特點融入到圖標(biāo)設(shè)計的更多方法可以參考之前的一篇文章《APP圖標(biāo)風(fēng)格與創(chuàng)意設(shè)計的方法分享》）

2）品牌色

色彩是一個非常重要的品牌基因。從品牌色延展的色彩方案貫穿應(yīng)用到產(chǎn)品中，是最為常用的建立品牌印象的方法。

品牌色在APP設(shè)計中具體的應(yīng)用場景：

場景一：界面背景

引導(dǎo)注冊頁：品牌主色用在引導(dǎo)頁和注冊等界面背景。因為這些是用戶初次使用產(chǎn)品的時候，在這種場景用大量品牌色能讓用戶快速形成初步的品牌感知。

特殊界面：大面積品牌色用作主界面背景的比較少，因為會干擾用戶對內(nèi)容的吸收?？梢詰?yīng)用在需要特別強(qiáng)調(diào)氛圍感的運(yùn)營界面或娛樂型產(chǎn)品。

場景二：頂部欄或banner背景

雖說現(xiàn)在頂部欄用品牌色的設(shè)計已經(jīng)不如過去流行，但對于初創(chuàng)期產(chǎn)品、或需要和競品區(qū)隔的品牌來說，頂部品牌色還是可以考慮使用的。

場景三：組件和高亮色

用品牌色作為組件和高亮色自然是不用多說的了，這里分享一種比較特別的設(shè)計（右圖快手電丸）。

電丸和nice的APP Icon都是黃黑配色，但是在產(chǎn)品中的配色思路卻不同。nice采用了大多數(shù)產(chǎn)品的做法，即沿用icon的黃色和黑色，電丸則是選用了對比色紫色作為組件和高亮色。可能是因為產(chǎn)品本身調(diào)性定位在可愛和有趣，所以配色方案也大膽地采用對比配色，來豐富視覺營造氛圍。

針對色彩的應(yīng)用這里補(bǔ)充幾個TIPS：

1. 色彩并非總是越豐富越好，根據(jù)產(chǎn)品調(diào)性控制好色彩數(shù)量，有時候單色或者雙色的配色方案能形成更為突出的風(fēng)格印象（比如：same和涂手）；
2. 使用多彩的配色方案時，要保持色調(diào)一致；
3. 大面積的色彩雖然能刺激用戶的視覺感知，但是也可能分散用戶注意力，因此資訊閱讀類的產(chǎn)品不適合用過多的色彩，會破壞用戶的沉浸體驗。

3）吉祥物

吉祥物作為有形的擬人化形象，能夠更直觀地為品牌代言，表現(xiàn)出產(chǎn)品的性格和氣質(zhì)。一般有吉祥物的品牌都會把形象作為產(chǎn)品的logo，并應(yīng)用到產(chǎn)品設(shè)計中。需要注意的是吉祥物的畫風(fēng)和性格要始終保持一致，是萌是丑還是賤。要像管理你自己的人設(shè)一樣經(jīng)營你的吉祥物形象。

吉祥物在APP設(shè)計中可發(fā)揮的空間很多：

1. 運(yùn)營配圖：以插畫的形式應(yīng)用到banner、瓷片等運(yùn)營模塊；
2. Tab：一般作為主頁或者個人主頁的icon；
3. List Icon：same從吉祥物延展出系列同風(fēng)格的人物設(shè)計作為列表圖標(biāo)；
4. 空狀態(tài)：吉祥物在空頁面可以有更多情感化和個性的表達(dá)；
5. 彈窗：吉祥物以插畫的形式出現(xiàn)，更多的是豐富視覺，同時提高品牌的友好度；
6. 動畫：如bilibili的下拉刷新loading，可愛的形象讓人更愿意等待。

4）插畫

在各種設(shè)計趨勢的報告中都可以看到品牌插畫的影子，插畫設(shè)計已經(jīng)成為越來越重要的品牌視覺資產(chǎn)：

運(yùn)營插畫：

在瓷片、banner中應(yīng)用插畫，需要統(tǒng)一插畫的表現(xiàn)形式和風(fēng)格。

空白頁插畫：

空白頁的設(shè)計不再是一個簡單的灰色圖標(biāo)，很多產(chǎn)品嘗試用更豐富的色彩、故事性的插圖來渲染氛圍，并引導(dǎo)用戶操作。

5）紋理圖案

和插畫類似，圖案是從品牌屬性發(fā)散的相關(guān)聯(lián)的小元素，構(gòu)成無縫銜接的圖案設(shè)計，或是從品牌VI延展的輔助圖形和紋理。多使用在：界面背景、圖片加載態(tài)、運(yùn)營模塊、個人主頁的背景圖。

再次強(qiáng)調(diào)：不要直接一一套用

前面也有說過，以上分享的思路和例子只是為了幫助大家更快找到感覺打開思路，不能局限于這種形式。

實際上還有很多靈活操作的優(yōu)秀設(shè)計，比如：黃油相機(jī)，名字就情懷滿滿，據(jù)說出自“你是我面包上的黃油，生命里的呼吸”，意指產(chǎn)品主打的“圖和文字”的關(guān)系。

設(shè)計師是直接從“黃油”這個具體的物出發(fā)，結(jié)合產(chǎn)品的調(diào)性定位，提煉出黃油的柔和色調(diào)和圓角方形的造型，設(shè)計出可愛的黃油小人、以及黃油和面包的icon。

總結(jié)

1. 鮮明的品牌形象能讓產(chǎn)品更快地潛入用戶心智，和競品區(qū)隔，建立品牌感知；
2. 品牌色彩的應(yīng)用要統(tǒng)一且克制；
3. 擬人的吉祥物形象能讓你的品牌個性更容易被用戶理解；
4. 插畫是品牌重要的視覺資產(chǎn)，插畫的風(fēng)格和表現(xiàn)形式需要規(guī)范；
5. 在細(xì)節(jié)處運(yùn)用品牌圖案設(shè)計，打造更精致的品牌視覺；
6. 要確保設(shè)計語言是統(tǒng)一的。

（文中部分圖片采集自網(wǎng)絡(luò)未標(biāo)注出處，如設(shè)計師本人看到請和我聯(lián)系補(bǔ)充出處或刪除。謝謝！）

本文由 @REMY 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議