互聯(lián)網(wǎng)行業(yè)走到今天，早已從增量時(shí)代轉(zhuǎn)為存量時(shí)代，人口、流量、資本的紅利都逐漸收緊。在存量時(shí)代，影響用戶(hù)選擇產(chǎn)品的很重要一個(gè)因素就是「品牌」，一個(gè)產(chǎn)品要想從同類(lèi)產(chǎn)品中跳脫出來(lái)需要有個(gè)性。如何在用戶(hù)心智中植入品牌成為產(chǎn)品整個(gè)生命周期很重要的一環(huán)，而面對(duì)互聯(lián)網(wǎng)產(chǎn)品越來(lái)越趨于同質(zhì)化的現(xiàn)象，UI 設(shè)計(jì)師已經(jīng)不能局限于界面表現(xiàn)層，更要了解產(chǎn)品背后整個(gè)商業(yè)鏈路，知道產(chǎn)品想在用戶(hù)心智中建立怎樣的定位，以業(yè)務(wù)為依據(jù)設(shè)計(jì)品牌，以品牌為基準(zhǔn)去設(shè)計(jì)產(chǎn)品。
？
1. 對(duì)內(nèi)：規(guī)范統(tǒng)一，高效協(xié)作
品牌本身就可以作為設(shè)計(jì)規(guī)范的一個(gè)重要指導(dǎo)原則，通過(guò)對(duì)配色、文字、圖標(biāo)、控件等建立設(shè)計(jì)規(guī)范，可以有效減少設(shè)計(jì)決策時(shí)間，傳達(dá)一致的品牌調(diào)性。
韓國(guó)的 NEVER 公司（相當(dāng)于國(guó)內(nèi)的BAT），旗下有很多款 APP 滲透到韓國(guó)人民日常生活的衣食住行當(dāng)中，由于一開(kāi)始沒(méi)有一個(gè)統(tǒng)一的品牌規(guī)范指導(dǎo)，各個(gè) APP 由不同的設(shè)計(jì)師設(shè)計(jì)，導(dǎo)致每個(gè) APP 的風(fēng)格迥異，體驗(yàn)也不一致，后面通過(guò)引入 SQUARE（方形）的設(shè)計(jì)理念，統(tǒng)一了所有 APP 的設(shè)計(jì)語(yǔ)言。
△ 圖片來(lái)自NAVER設(shè)計(jì)團(tuán)隊(duì)
2. 對(duì)外：提高認(rèn)知，溢價(jià)增值
最近幾年我們發(fā)現(xiàn)手機(jī)上的 APP 越來(lái)越同質(zhì)化了，同時(shí)也在慢慢地失去了產(chǎn)品的個(gè)性，不看 logo，單純看界面的話，很多時(shí)候根本分不清是誰(shuí)家的產(chǎn)品。如果能夠立足于品牌的高度去做設(shè)計(jì)，關(guān)注每一個(gè)設(shè)計(jì)細(xì)節(jié)對(duì)品牌的影響，在 UI 中適當(dāng)融入品牌元素，無(wú)疑將能更好地提高用戶(hù)對(duì)產(chǎn)品的認(rèn)知，通過(guò)創(chuàng)造情感性?xún)r(jià)值實(shí)現(xiàn)產(chǎn)品的溢價(jià)增值，同時(shí)也能夠?yàn)楫a(chǎn)品的營(yíng)銷(xiāo)推廣提供立足點(diǎn)。
品牌的根本目的，就是在目標(biāo)用戶(hù)群體的認(rèn)知中構(gòu)建品牌信念。所以想要做好品牌設(shè)計(jì)，首先要了解用戶(hù)是如何感知品牌。在設(shè)計(jì)產(chǎn)品的時(shí)候常常會(huì)發(fā)現(xiàn)我們覺(jué)得理所當(dāng)然的地方，用戶(hù)往往沒(méi)按我們預(yù)想的方式去使用。那是因?yàn)樵O(shè)計(jì)師通常有整體觀，站在金字塔頂端去規(guī)劃一個(gè)產(chǎn)品的設(shè)計(jì)，而用戶(hù)恰恰相反，在金字塔底端往上爬，他們不知道這個(gè)金字塔多高，也不知道從哪一面開(kāi)始最好爬，所以會(huì)遇到各種問(wèn)題。同樣，用戶(hù)對(duì)品牌的感知也是由外向內(nèi)，由低向高，用戶(hù)通過(guò)各種場(chǎng)景接觸到產(chǎn)品，再通過(guò)產(chǎn)品的視覺(jué)呈現(xiàn)、功能體驗(yàn)、信息內(nèi)容等感知品牌，然后進(jìn)一步了解品牌的特性與內(nèi)核，最后在心智中形成印象，構(gòu)建品牌信念，從而影響下次產(chǎn)生相應(yīng)需求時(shí)對(duì)產(chǎn)品的選擇。
因此，作為設(shè)計(jì)師，我們需要充分理解品牌內(nèi)核，由內(nèi)向外將抽象的品牌內(nèi)核轉(zhuǎn)化為具象的視覺(jué)符號(hào)，再延伸到用戶(hù)與產(chǎn)品的各個(gè)接觸點(diǎn)，從而將品牌理念打入用戶(hù)心智。
1. 明確定位，提取關(guān)鍵詞，建立情緒板
首先，需要明確品牌定位，美國(guó)的著名品牌學(xué)者馬蒂·諾伊邁爾提出了一個(gè)品牌快速定位測(cè)試的方法：
△ 圖片內(nèi)容來(lái)自徐適《品牌設(shè)計(jì)法則》
通過(guò)品牌定位找到細(xì)分市場(chǎng)和目標(biāo)用戶(hù)，再將定位策略作用于品牌識(shí)別系統(tǒng)，以此確保每一個(gè)品牌觸點(diǎn)都符合產(chǎn)品的品牌定位。
明確定位后，接著圍繞品牌定位提取關(guān)鍵詞，一開(kāi)始可以通過(guò)腦暴寫(xiě)多個(gè)關(guān)鍵詞，然后再一步步過(guò)濾剩下最核心最重要的幾個(gè)。
通過(guò)上一步確定的關(guān)鍵詞來(lái)建立品牌情緒板，品牌情緒板旨在營(yíng)造產(chǎn)品對(duì)應(yīng)的正確的情緒和符合預(yù)期的感覺(jué)，將比較抽象的概念轉(zhuǎn)化為可感知的視覺(jué)（比如柔軟、溫暖、光滑的線條感、低飽和度色彩等），進(jìn)而有效指導(dǎo)后面對(duì)品牌關(guān)鍵元素的提取與設(shè)計(jì)的融入。
2. 提取表現(xiàn)元素
基于前面的品牌情緒板，圍繞品牌內(nèi)核，進(jìn)一步提取視覺(jué)表現(xiàn)元素，包括顏色、圖形、紋理、字體、文案、聲音等。
顏色
顏色給人感官帶來(lái)的刺激是最直接的，而且顏色不止于視覺(jué)，而是與我們?nèi)康母兄枷嚓P(guān)，人對(duì)顏色的感受是一個(gè)綜合體。一只打破的蛋殼中濺出來(lái)的深黃色的極度新鮮的蛋液，或是一杯美式咖啡的深褐色都不只是顏色，還有材料性的質(zhì)感，苦澀的味道與氣味都透過(guò)顏色被感知。
有時(shí)甚至不需要任何圖形，單憑顏色就能產(chǎn)生對(duì)某一事物的聯(lián)想。
由此可見(jiàn)，顏色對(duì)于品牌的體現(xiàn)至關(guān)重要，不容忽視。顏色在 UI 中的體現(xiàn)有 logo、導(dǎo)航欄底色、圖標(biāo)、文字、可視化圖表、插圖、按鈕等。
近幾年 UI 設(shè)計(jì)圈掀起了一股極簡(jiǎn)風(fēng)，界面設(shè)計(jì)強(qiáng)調(diào)內(nèi)容本身，加大留白，去除不必要的顏色和 UI 元素，品牌顏色在界面中被大大弱化，個(gè)人覺(jué)得這種設(shè)計(jì)并不適用于所有產(chǎn)品。像 Facebook、Twitter、Instagram、Airbnb 本身就是體量很大的產(chǎn)品，早已在用戶(hù)心智中建立品牌信念，所以對(duì)于他們來(lái)說(shuō)或許主要的任務(wù)在于商業(yè)和體驗(yàn)層面。即便如此，我們也會(huì)發(fā)現(xiàn)這些應(yīng)用采用極簡(jiǎn)化設(shè)計(jì)的同時(shí)，應(yīng)用圖標(biāo)也變得更鮮艷，更引人注目，說(shuō)明他們也在尋求一個(gè)平衡，想在 UI 設(shè)計(jì)變得極簡(jiǎn)趨同的同時(shí)，仍然能保留核心的品牌基因。
圖形
圖形對(duì)于品牌表現(xiàn)的重要性不亞于顏色，不同于顏色的抽象感知，圖形是一種相對(duì)具象的表現(xiàn)方式。
一旦某個(gè)特有的圖形在用戶(hù)心智中形成深刻印象，用戶(hù)見(jiàn)到相似的圖形組合都能往該圖形聯(lián)想，從而關(guān)系到圖形背后所代表的品牌，這也是很多企業(yè)做品牌升級(jí)的時(shí)候 logo 都越來(lái)越簡(jiǎn)潔的原因，因?yàn)檫@樣能有效降低用戶(hù)的認(rèn)知負(fù)擔(dān)，提高品牌認(rèn)知。
圖形通常從 logo 本身提取，并在 UI 中延伸應(yīng)用。比如馬蜂窩、百度網(wǎng)盤(pán)、京東做品牌升級(jí)的時(shí)候都不約而同地從 logo 中提取了一個(gè)代表微笑的弧度，傳遞友好、溫暖的品牌形象。
還有飛豬提取了 logo 中「豬的發(fā)型」用于搜索框，韓國(guó)的電商品牌11街也將 logo 延長(zhǎng)作為界面中的搜索框。
紋理
通過(guò)提取品牌圖形元素，再運(yùn)用分形、排列、重復(fù)、平鋪等設(shè)計(jì)手法形成品牌紋理，在 UI 設(shè)計(jì)或者運(yùn)營(yíng)推廣設(shè)計(jì)方面都能有很好的運(yùn)用。如下圖所示，京東的啟動(dòng)頁(yè)用了 Joy 的外形輪廓做旋轉(zhuǎn)復(fù)制形成的紋理為背景；國(guó)外著名的聊天應(yīng)用 WhatsApp，在聊天頁(yè)的背景使用平鋪的涂鴉插圖紋理做為聊天背景，并在應(yīng)用市場(chǎng)的截圖中也得以應(yīng)用；還有騰訊文檔的啟動(dòng)頁(yè)、登錄頁(yè)也都用了漸變的小菱形作為紋理，輔助品牌視覺(jué)表現(xiàn)。
UBER 之前在做品牌升級(jí)的時(shí)候，設(shè)計(jì)師將每個(gè)國(guó)家富有代表性的圖形提煉出來(lái)， 然后重復(fù)運(yùn)?平鋪，形成?種時(shí)尚的?何紋理，運(yùn)?到閃屏和線上線下的產(chǎn)品當(dāng)中。
△ 圖片來(lái)自UBER設(shè)計(jì)團(tuán)隊(duì)
字體
字體常常是很容易被忽略的設(shè)計(jì)要素，通常都會(huì)認(rèn)為 UI 中的字體用系統(tǒng)默認(rèn)的就行。其實(shí)字體對(duì)于品牌和產(chǎn)品氣質(zhì)的體現(xiàn)同樣起著很大的作用，越來(lái)越多的品牌都把字體設(shè)計(jì)當(dāng)成品牌基因中必不可少的一部分。
字體的選擇需要契合產(chǎn)品功能特點(diǎn)與品牌調(diào)性。微信讀書(shū)閱讀時(shí)用的字體不是常見(jiàn)的黑體，而使用了方正宋三，文本秀麗、閱讀醒目；每日故宮則使用了方正清刻悅宋體，字里行間隱含著歷史古韻，滲透著文化氣息；澎湃新聞使用方正準(zhǔn)雅宋體，體現(xiàn)其作為新聞產(chǎn)品「專(zhuān)注時(shí)政與思想」的嚴(yán)肅一面。
英文字體的字體包比較小，能夠很方便地嵌入應(yīng)用當(dāng)中，所以可以大膽地拋棄系統(tǒng)默認(rèn)字體，而使用契合產(chǎn)品氣質(zhì)的英文字體。比如經(jīng)常被用作數(shù)字字體的 Din、優(yōu)雅經(jīng)典的襯線字體 Playfair Display、?歌御用的 Roboto 同樣非常簡(jiǎn)潔實(shí)用。
IP形象
越來(lái)越多的互聯(lián)網(wǎng)產(chǎn)品喜歡直接用 IP 形象來(lái)作為產(chǎn)品的品牌符號(hào)，比如阿里動(dòng)物園、京東、考拉海淘等。相較于圖形或文字 logo，IP 形象更具象，更討喜，在情感傳遞層面有著很大的優(yōu)勢(shì)，同時(shí) IP 形象的可拓展性也很高，在線上運(yùn)營(yíng)、線下活動(dòng)、周邊物料等方面都可以很好運(yùn)用。
在界面當(dāng)中適當(dāng)融入 IP 形象，能夠提高產(chǎn)品趣味，愉悅用戶(hù)，比如站酷的安卓版刷新時(shí)，騎著竹馬的小Z，就很討喜。
文案（語(yǔ)氣）
很多人可能認(rèn)為文案是產(chǎn)品或運(yùn)營(yíng)的事，不應(yīng)該設(shè)計(jì)師來(lái)負(fù)責(zé)，其實(shí)只要影響到用戶(hù)對(duì)產(chǎn)品品牌的感知就與設(shè)計(jì)有關(guān)。每個(gè)人有不同的性格，不同的性格有不同的說(shuō)話方式，產(chǎn)品也是如此，文案所傳遞出來(lái)的語(yǔ)氣是高冷、親切、文藝、俏皮或嚴(yán)肅全取決于產(chǎn)品的性格。
除了上面說(shuō)的這些，品牌的體現(xiàn)還有聲音、動(dòng)效、質(zhì)感、柵格等，就不一一舉例說(shuō)明了。
3. 融入品牌觸點(diǎn)
品牌觸點(diǎn)是指用戶(hù)有機(jī)會(huì)面對(duì)一個(gè)品牌信息的情景，這些接觸點(diǎn)是品牌信息的主要來(lái)源，是決定用戶(hù)對(duì)產(chǎn)品品牌印象好壞的關(guān)鍵。對(duì)于互聯(lián)網(wǎng)產(chǎn)品而言，我們可以把品牌觸點(diǎn)理解為用戶(hù)從產(chǎn)生一個(gè)需求，然后通過(guò)某一個(gè)產(chǎn)品完成需求的過(guò)程中品牌信息得以展示的情境。
如何尋找品牌觸點(diǎn)？
為了尋找品牌觸點(diǎn)，我們參照用戶(hù)體驗(yàn)地圖，引入「品牌體驗(yàn)地圖」的概念。和用戶(hù)體驗(yàn)地圖一樣，品牌體驗(yàn)地圖需要明確用戶(hù)目標(biāo)，提煉用戶(hù)行為，找到用戶(hù)完成目標(biāo)的完整使用流程，不同的是品牌體驗(yàn)地圖側(cè)重點(diǎn)在于各個(gè)階段用戶(hù)對(duì)品牌的感知程度和融入品牌信念的機(jī)會(huì)點(diǎn)。
如果是線上線下或軟硬件結(jié)合的產(chǎn)品還需要進(jìn)一步把品牌體驗(yàn)地圖延伸，以確保不遺漏每一個(gè)品牌融入的機(jī)會(huì)點(diǎn)。
互聯(lián)網(wǎng)產(chǎn)品常見(jiàn)的品牌觸點(diǎn)
啟動(dòng)頁(yè)：知乎的啟動(dòng)頁(yè)采用 slogan 加 logo 的方式來(lái)體現(xiàn)品牌，這也是絕大多數(shù)應(yīng)用的做法；每日故宮啟動(dòng)的時(shí)候伴隨著一聲鐘聲，頁(yè)面會(huì)有一個(gè)光線流動(dòng)的動(dòng)畫(huà)，非常驚艷且極具儀式感，一下子就把用戶(hù)帶入故宮莊嚴(yán)的氛圍當(dāng)中。
圖標(biāo)：東家的每一個(gè)圖標(biāo)都融入了漢字印刷術(shù)字體的元素，體現(xiàn)其匠人的品牌基因；mono 則直接把產(chǎn)品名稱(chēng)「 M O N O」用于導(dǎo)航欄。
插圖：Dropbox 的兒童風(fēng)格的插畫(huà)與 bilibili 的二次元插畫(huà)都非常契合產(chǎn)品品牌特征。
除此之外，還有應(yīng)用于商店截圖介紹、預(yù)加載圖、loading、動(dòng)效、新手引導(dǎo)等。
最近常有聽(tīng)到 UI 設(shè)計(jì)工作不好找的聲音。的確，一方面市場(chǎng)對(duì) UI 設(shè)計(jì)師的需求確實(shí)沒(méi)那么高了，互聯(lián)網(wǎng)行業(yè)已經(jīng)過(guò)了拓荒時(shí)代，行業(yè)沉淀下了許多有價(jià)值的知識(shí)，也有許多非常好的 UI 組件和規(guī)范文檔可以直接使用；另一方面，很多公司對(duì)于 UI 設(shè)計(jì)在整個(gè)產(chǎn)品生命周期中的價(jià)值普遍覺(jué)得不是非常重要，UI 設(shè)計(jì)部門(mén)只是一個(gè)業(yè)務(wù)支持部門(mén)，起不到主導(dǎo)作用。而如果 UI 設(shè)計(jì)師做的工作僅僅是把產(chǎn)品的原型文檔變漂亮，肯定是不被稀罕了。但是，行業(yè)的發(fā)展從來(lái)都是優(yōu)勝劣汰，為了不被市場(chǎng)淘汰，我們需要走出舒適圈，主動(dòng)去挖掘更深層次的設(shè)計(jì)價(jià)值，提升自我價(jià)值。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。