想成為設(shè)計(jì)總監(jiān)要先學(xué)會(huì)如何樹(shù)立品牌意識(shí)

編者按：許多同學(xué)在嫻熟地掌握了Photoshop、Illustrator、Indesign等設(shè)計(jì)工具后，仍然無(wú)法觸碰大公司的橄欖枝。原因很多，但其中有一點(diǎn)需要單獨(dú)挑出來(lái)說(shuō)說(shuō)——很多設(shè)計(jì)師都沒(méi)考慮過(guò)的品牌意識(shí)。今天前網(wǎng)易UED主管@劉津legene 親自上陣，教你在設(shè)計(jì)里樹(shù)立品牌意識(shí)。
為什么要單獨(dú)談?wù)勂放颇兀窟@是源于一件讓我印象非常深刻的事情：有一個(gè)大公司的設(shè)計(jì)師，在公司官方博客上發(fā)表了一篇有關(guān)iPhone的文章，由于他在文章中把“iPhone”拼成了“iphone”，遭到了一個(gè)讀者憤怒的指責(zé)。這名讀者激動(dòng)的斥責(zé)作者以及他所在的公司，是多么多么的不專(zhuān)業(yè)。 這件事讓我很愧疚，因?yàn)槿绻?dāng)時(shí)讓我去拼，我也一定會(huì)拼錯(cuò)。從這件事情里，我總結(jié)出了三點(diǎn)：

1. 蘋(píng)果的品牌做的非常好
2. 我們作為大公司的設(shè)計(jì)師，也許并沒(méi)有別人想象中專(zhuān)業(yè)
3. 只有懂得尊重品牌，別人才會(huì)尊重你的品牌。

品牌有什么作用呢？我個(gè)人認(rèn)為：好的品牌可以成為一種信仰：對(duì)內(nèi)凝聚員工；對(duì)外樹(shù)立形象 。
圖1 品牌的作用 品牌怎樣凝聚員工？ 好的品牌會(huì)吸引專(zhuān)業(yè)人士加盟、會(huì)提高員工的忠誠(chéng)度； 品牌怎樣樹(shù)立形象？ 好的品牌讓用戶更容易信任、給用戶帶來(lái)更大的附加價(jià)值（為什么很多人喜歡買(mǎi)名牌包？其實(shí)更重要的是擁有這個(gè)品牌給自己帶來(lái)的滿足感）。因此作為一個(gè)專(zhuān)業(yè)的設(shè)計(jì)師，一定要具備品牌意識(shí)。 品牌管理其實(shí)是個(gè)復(fù)雜的工程。logo、slogan、用戶體驗(yàn)、名譽(yù)等等等等，都和品牌有關(guān)。那么到底該由誰(shuí)來(lái)負(fù)責(zé)對(duì)品牌的維護(hù)呢？市場(chǎng)部？公關(guān)部？技術(shù)部？設(shè)計(jì)部？……貌似推到哪個(gè)部門(mén)都有道理?；蛘邔?zhuān)門(mén)成立一個(gè)部門(mén)？也不太現(xiàn)實(shí)。其實(shí)塑造、維護(hù)品牌靠的是所有人的努力，更是自覺(jué)。對(duì)于我們?cè)O(shè)計(jì)師來(lái)說(shuō)，我們確實(shí)不是專(zhuān)門(mén)做品牌的。但我們可以通過(guò)做好本職工作，為品牌建設(shè)添磚加瓦，這也是設(shè)計(jì)師專(zhuān)業(yè)度的體現(xiàn)。 怎樣才算是做好本職工作？很多設(shè)計(jì)師都希望自己的作品獨(dú)樹(shù)一幟，精美絕倫。但作為產(chǎn)品設(shè)計(jì)中的一員，有時(shí)候正確的表達(dá)比美觀的設(shè)計(jì)更重要。前面我們提到過(guò)：用戶體驗(yàn)設(shè)計(jì)的目標(biāo)其實(shí)就是要解決用戶需求、減少用戶理解和操作的成本、給用戶留下美好而深刻的印象。 解決用戶需求是第一位的、也是最基本的要求，達(dá)到這個(gè)程度可以算是“合格”；讓產(chǎn)品更易用、減少理解和操作成本，這是更進(jìn)一步的要求，達(dá)到這個(gè)程度可算是“專(zhuān)業(yè)”；讓產(chǎn)品深深的吸引用戶，給用戶留下美好而深刻的印象，達(dá)到這個(gè)程度可謂“出色”。我們?cè)诘谖?、第六章已?jīng)詳細(xì)闡述了具體的設(shè)計(jì)方法。做好這些，其實(shí)就已經(jīng)是為品牌建設(shè)貢獻(xiàn)了一份力量。 在這一章節(jié)，我還想再介紹一些實(shí)用的原則，它們對(duì)提升品牌形象有著更直接的作用：
圖2 提升品牌形象的一些設(shè)計(jì)規(guī)則

保證關(guān)聯(lián)性 首先，你要保證你設(shè)計(jì)的東西是和產(chǎn)品相關(guān)的，做不到這點(diǎn)就不算一個(gè)合格的作品。這看起來(lái)很簡(jiǎn)單，但做起來(lái)并不容易。因?yàn)樵O(shè)計(jì)師必須真正的了解產(chǎn)品定位：產(chǎn)品功能、目標(biāo)群體、產(chǎn)品特色。否則就有可能設(shè)計(jì)出外表華麗，但卻和產(chǎn)品方向相差甚遠(yuǎn)的作品。所以，要正確的理解產(chǎn)品。 拿iPhone應(yīng)用的圖標(biāo)來(lái)舉例子。icon要體現(xiàn)這個(gè)產(chǎn)品的名稱(chēng)、功能或者特色（目標(biāo)群體間接體現(xiàn)了功能或特色），千萬(wàn)別弄個(gè)“三不沾”。
圖3 一些優(yōu)秀的移動(dòng)應(yīng)用圖標(biāo) 借鑒產(chǎn)品在Web端（Facebook）、實(shí)體店（星巴克）的圖標(biāo)、描述產(chǎn)品名稱(chēng)（每日壁紙雜志）；通過(guò)圖片描述產(chǎn)品性質(zhì)（天氣預(yù)報(bào)、電池管家、計(jì)算器）；借鑒應(yīng)用界面的樣式和材質(zhì)（Cellar）……這些方法，均可提高產(chǎn)品的識(shí)別度及用戶的忠誠(chéng)度。 再來(lái)看看下面兩個(gè)移動(dòng)應(yīng)用圖標(biāo)，它們有什么問(wèn)題呢？
圖4 京東和丁丁優(yōu)惠券的圖標(biāo)（2011年） 每次點(diǎn)擊京東的圖標(biāo)，我都會(huì)不由自主的想到淘寶（和京東Web端的風(fēng)格不太像，和淘寶客戶端的圖標(biāo)倒是很像，現(xiàn)已更改）……至于第二個(gè)圖標(biāo)，你能猜出來(lái)這個(gè)應(yīng)用是做什么的嗎？

力求一致性 與產(chǎn)品內(nèi)容相關(guān)聯(lián)只是最基礎(chǔ)的一步，是每個(gè)合格的設(shè)計(jì)師都應(yīng)該做到的，要想成為專(zhuān)業(yè)的設(shè)計(jì)師，光有這點(diǎn)還不夠。就像我前面提到的，還要注重對(duì)基本規(guī)則的學(xué)習(xí)和研究，融會(huì)貫通，使設(shè)計(jì)出來(lái)的作品不僅正確，并且有很好的易用性，間接提升品牌形象。 應(yīng)用內(nèi)一致： 我們接觸一款產(chǎn)品，就好像接觸一個(gè)人，他的外觀、衣著、談吐、性格都會(huì)影響我們對(duì)他的印象和判斷。一個(gè)相貌堂堂、衣著得體、談吐優(yōu)雅、表里一致、溫文爾雅的人一定會(huì)給我們留下深刻的印象，對(duì)其產(chǎn)生好感，愿意與他成為朋友，甚至莫逆之交；相反，；一個(gè)外形邋遢、毫無(wú)品味、表里不一的人只會(huì)讓我們敬而遠(yuǎn)之。 初次見(jiàn)面三部曲 圖5 風(fēng)格一致的icon、啟動(dòng)畫(huà)面和首頁(yè) 中國(guó)人常說(shuō)：一而再，再而三；事不過(guò)三；一鼓作氣，再而衰，三而竭……可見(jiàn)“三”這個(gè)數(shù)字對(duì)于人的記憶、認(rèn)知、影響起到重要的作用。初次見(jiàn)面，憑借這三輪轟炸，想不記住這個(gè)應(yīng)用都難啊。“Etsy”的一致性給我留下深刻的印象。 來(lái)看一個(gè)反例：
圖6 風(fēng)格不一致的圖標(biāo)、啟動(dòng)畫(huà)面和首頁(yè) 該例中圖標(biāo)、啟動(dòng)畫(huà)面、首頁(yè)的風(fēng)格都不一致。圖標(biāo)中的“100”和啟動(dòng)畫(huà)面中的“100”顏色不同，背景也不同。你可能會(huì)使用這樣的應(yīng)用，但它未必會(huì)給你留下很深的印象。所以，設(shè)計(jì)師在設(shè)計(jì)這三個(gè)部分時(shí)，一定要放在一起對(duì)比一下。 衣著品味 我們都知道，西裝不能配球鞋穿。應(yīng)用的界面也是一樣，不僅內(nèi)外要協(xié)調(diào)，上下也要搭配呼應(yīng)，至少要看起來(lái)協(xié)調(diào)。 圖7 配色協(xié)調(diào)的界面 另外，配色要盡量統(tǒng)一。我們常聽(tīng)人說(shuō)，身上的服裝顏色不要超過(guò)三種。界面也是一樣，太過(guò)花哨的界面讓人找不到重點(diǎn)，更難以記住你的品牌。比如下面這個(gè)應(yīng)用，以黑白為主色調(diào)，需要強(qiáng)調(diào)的部分用橙黃色突出。底部標(biāo)簽欄上有一個(gè)橙色的窄條，與上面很好的呼應(yīng)。
圖8 配色簡(jiǎn)練、識(shí)別度高的界面 表里如一 為了避免用戶在理解上發(fā)生歧義，因此同樣性質(zhì)的元素應(yīng)該表里如一；不同性質(zhì)的元素應(yīng)該盡量避免樣式相近。 比如花田圖標(biāo)上的這個(gè)小元素，有的時(shí)候是紅色的，而有的時(shí)候又是綠色的。圖標(biāo)代表了一個(gè)產(chǎn)品的形象，因此這種現(xiàn)象應(yīng)該盡量避免。
圖9 代表同樣含義的元素應(yīng)保持樣式一致 如果界面元素的性質(zhì)不一致，則應(yīng)該在外觀上盡量區(qū)別開(kāi)：下面這個(gè)例子中，首頁(yè)的圖標(biāo)樣式（不可點(diǎn)）和其他頁(yè)面的“返回”按鈕（可點(diǎn)）做成了類(lèi)似的樣式，使用戶極容易誤操作（以為首頁(yè)的圖標(biāo)可點(diǎn)）。