編者按：許多同學(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ù)立形象？

好的品牌讓用戶(hù)更容易信任、給用戶(hù)帶來(lái)更大的附加價(jià)值（為什么很多人喜歡買(mǎi)名牌包？其實(shí)更重要的是擁有這個(gè)品牌給自己帶來(lái)的滿(mǎn)足感）。因此作為一個(gè)專(zhuān)業(yè)的設(shè)計(jì)師，一定要具備品牌意識(shí)。

品牌管理其實(shí)是個(gè)復(fù)雜的工程。logo、slogan、用戶(hù)體驗(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ò)：用戶(hù)體驗(yàn)設(shè)計(jì)的目標(biāo)其實(shí)就是要解決用戶(hù)需求、減少用戶(hù)理解和操作的成本、給用戶(hù)留下美好而深刻的印象。

解決用戶(hù)需求是第一位的、也是最基本的要求，達(dá)到這個(gè)程度可以算是“合格”；讓產(chǎn)品更易用、減少理解和操作成本，這是更進(jìn)一步的要求，達(dá)到這個(gè)程度可算是“專(zhuān)業(yè)”；讓產(chǎn)品深深的吸引用戶(hù)，給用戶(hù)留下美好而深刻的印象，達(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í)別度及用戶(hù)的忠誠(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)格不太像，和淘寶客戶(hù)端的圖標(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í)別度高的界面

表里如一

為了避免用戶(hù)在理解上發(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)似的樣式，使用戶(hù)極容易誤操作（以為首頁(yè)的圖標(biāo)可點(diǎn)）。

圖10 代表不同含義的元素應(yīng)避免樣式接近

雖然元素的樣式需要根據(jù)情況仔細(xì)考慮，但控件風(fēng)格應(yīng)該保持一致。同類(lèi)型的控件，最好不要一會(huì)兒用圖形、一會(huì)兒用按鈕；一會(huì)兒有陰影、一會(huì)兒沒(méi)陰影；一會(huì)兒有漸變、一會(huì)兒無(wú)漸變等。雖然面對(duì)這么多界面、面對(duì)這么多控件，保持一致的風(fēng)格并不容易，但這樣可以讓讓你的應(yīng)用顯得更專(zhuān)業(yè)，更有檔次。

舉個(gè)例子：對(duì)于一般的應(yīng)用來(lái)說(shuō)，導(dǎo)航欄左右的按鈕樣式、風(fēng)格、尺寸要盡量保持一致（這個(gè)不是絕對(duì)的，但是這么做肯定沒(méi)錯(cuò)）。

圖11 不一致的圖標(biāo)風(fēng)格降低品質(zhì)感

為了降低風(fēng)險(xiǎn)，在不是很有把握的情況下，盡量使用標(biāo)準(zhǔn)控件，因?yàn)橛脩?hù)對(duì)標(biāo)準(zhǔn)控件最為習(xí)慣。另外當(dāng)視覺(jué)稿完成后，把所有控件統(tǒng)一集中在一個(gè)頁(yè)面上，來(lái)查看風(fēng)格是否統(tǒng)一，這樣也有利于日后形成界面規(guī)范。

圖12 界面元素歸納

親密接觸

在不同的頁(yè)面，針對(duì)同一性質(zhì)的操作，應(yīng)保持一致性。

比如下面這兩個(gè)應(yīng)用在功能上非常的接近。由于列表頁(yè)上的細(xì)微差別（上面的需要在下一級(jí)頁(yè)面執(zhí)行收藏操作；下面的可以在當(dāng)前列表頁(yè)執(zhí)行收藏操作），導(dǎo)致兩者在收藏頁(yè)面的交互形式有較大的區(qū)別。當(dāng)然，下面的應(yīng)用可采用和上面的同樣的刪除形式，但卻不如現(xiàn)在的方式直觀。

圖13 同樣性質(zhì)的操作保持一致的風(fēng)格

平臺(tái)內(nèi)一致：應(yīng)用內(nèi)部要保持一致，同時(shí)還要和該平臺(tái)上其他產(chǎn)品的通用規(guī)則盡量保持一致。因?yàn)橛脩?hù)不是只用你的應(yīng)用，他會(huì)下載、使用很多很多的應(yīng)用。比如設(shè)計(jì)iPhone應(yīng)用時(shí)，盡量遵循iPhone界面的規(guī)范，同時(shí)考慮大家的使用習(xí)慣。很多設(shè)計(jì)師鄙視使用iPhone自帶的圖標(biāo)、控件和樣式等，認(rèn)為這樣的話就不需要設(shè)計(jì)師了。

《觸動(dòng)人心——設(shè)計(jì)優(yōu)秀的iPhone應(yīng)用》中說(shuō)到：“創(chuàng)意的真諦，是在保證可用的情況下，尋求更好的表達(dá)方式。優(yōu)秀的設(shè)計(jì)遵循規(guī)則，而又不會(huì)被規(guī)則所束縛。”其實(shí)創(chuàng)新的設(shè)計(jì)永遠(yuǎn)是受歡迎的，只是不要挑戰(zhàn)基本規(guī)則。建議每一個(gè)參與iPhone應(yīng)用設(shè)計(jì)的人，都好好讀一下iPhone的人機(jī)界面指南，研究iPhone的原生應(yīng)用，在熟悉規(guī)則的基礎(chǔ)上創(chuàng)新。

比如說(shuō)某應(yīng)用的iPhone彈框，設(shè)計(jì)師為了美觀和對(duì)稱(chēng)，把“取消”和“確定”按鈕都設(shè)計(jì)成了同樣的紅色。這樣會(huì)有什么問(wèn)題呢？

圖14 某iPhone應(yīng)用彈框的視覺(jué)方案

如果了解iPhone的原生應(yīng)用以及相應(yīng)的人機(jī)界面規(guī)范，就會(huì)知道紅色按鈕一般表示警戒或刪除等含義（在iOS7中略有改變），且多數(shù)iPhone應(yīng)用都遵循這個(gè)規(guī)則，用戶(hù)已經(jīng)形成了認(rèn)知習(xí)慣；并且iPhone應(yīng)用一般會(huì)刻意區(qū)分兩個(gè)按鈕的樣式，以避免用戶(hù)做無(wú)謂的思考。如果兩個(gè)按鈕都設(shè)計(jì)成同樣的樣式，并且都是紅色，用戶(hù)首先可能會(huì)緊張一下，認(rèn)為這是一個(gè)很?chē)?yán)重的提醒，然后還需要仔細(xì)辨認(rèn)，生怕自己點(diǎn)錯(cuò)了。但其實(shí)這是毫無(wú)必要的，設(shè)計(jì)師完全可以通過(guò)更好的方式去引導(dǎo)。

平臺(tái)間一致：如果你的產(chǎn)品不止有iPhone版，還有Android版，iPad版，Web版等。那么應(yīng)該保證這些平臺(tái)間的風(fēng)格是一致的。這樣更容易樹(shù)立統(tǒng)一的品牌形象。

圖15 Web端和客戶(hù)端界面風(fēng)格統(tǒng)一

內(nèi)部產(chǎn)品一致：如果是同一個(gè)公司的產(chǎn)品，為了提升品牌性，可以考慮制定統(tǒng)一的標(biāo)準(zhǔn)（產(chǎn)品戰(zhàn)略級(jí)方向的設(shè)計(jì)規(guī)范），來(lái)增強(qiáng)該公司產(chǎn)品的識(shí)別性和品牌感。該工作一般由專(zhuān)門(mén)的設(shè)計(jì)中心來(lái)負(fù)責(zé)。

追求獨(dú)特性

你真的會(huì)認(rèn)真的理解產(chǎn)品，通過(guò)設(shè)計(jì)貼切的表達(dá)你的產(chǎn)品嗎？你真的熟悉了基本的設(shè)計(jì)方法及規(guī)則？在設(shè)計(jì)方面已游刃有余？易用性對(duì)你來(lái)說(shuō)已不在話下？……好吧，如果你能保證做到這些，那么恭喜你，你有機(jī)會(huì)去追求創(chuàng)新，成為一個(gè)出色的設(shè)計(jì)師了。

個(gè)性的標(biāo)志

圖標(biāo)對(duì)一個(gè)產(chǎn)品的重要性不用多說(shuō)。圖標(biāo)應(yīng)該是美的、和諧的；如前面所說(shuō)，圖標(biāo)需要正確的表達(dá)你的產(chǎn)品理念，或你的產(chǎn)品名稱(chēng)；當(dāng)然也可以是你的產(chǎn)品功能和特色。然而對(duì)一個(gè)優(yōu)秀的圖標(biāo)來(lái)說(shuō)，這些還不夠。圖標(biāo)還應(yīng)該是獨(dú)樹(shù)一幟，鶴立雞群的，讓你區(qū)別于、甚至高于你的競(jìng)爭(zhēng)者。

圖16 一些識(shí)別性較強(qiáng)的圖標(biāo)

微博類(lèi)的產(chǎn)品這方面做的不錯(cuò)，即使不配文字，也很容易區(qū)分。但是閱讀類(lèi)的就有些問(wèn)題了。你能一眼區(qū)分出來(lái)這些圖標(biāo)分別代表哪些應(yīng)用嗎？

圖17 一些識(shí)別性欠佳的圖標(biāo)

獨(dú)特的風(fēng)格

有些應(yīng)用確實(shí)是不按牌理出牌的，它們不完全遵循官方規(guī)范的交互方式，但也獲得了用戶(hù)的喜愛(ài)，惹來(lái)其他應(yīng)用爭(zhēng)相效仿之。比如“path”應(yīng)用富有創(chuàng)意的菜單彈出效果。

圖18 Path的菜單彈出效果

但并不是所有的創(chuàng)意都是合理的，其實(shí)絕大多數(shù)的易用性問(wèn)題都是源于不專(zhuān)業(yè)的“創(chuàng)新”。有的人不去鉆研用戶(hù)習(xí)慣、界面規(guī)范，完全按照自己的喜好去做設(shè)計(jì)，以為這就是所謂的“創(chuàng)新”和“突破”，這種行為是不可取的。專(zhuān)業(yè)的創(chuàng)新一定是在真正領(lǐng)悟了用戶(hù)體驗(yàn)、界面設(shè)計(jì)原則的基礎(chǔ)上所做的令人眼前一亮的改變。

比如圖19中“下拉啟動(dòng)語(yǔ)音助手”這個(gè)操作，雖然乍一看覺(jué)得很新穎、操作起來(lái)也很方便，但這卻違背了大多數(shù)用戶(hù)下拉刷新的習(xí)慣（在社交、閱讀類(lèi)應(yīng)用中，下拉刷新已成為慣例）。因此很多用戶(hù)反饋說(shuō)這里非常容易誤操作，不知道怎么就啟動(dòng)了語(yǔ)音助手，這種操作違背了用戶(hù)的預(yù)期，在一定程度上影響了用戶(hù)的體驗(yàn)。

圖19 易信（1.2.0版本）的下拉啟動(dòng)語(yǔ)音助手操作

因此“創(chuàng)新”一定要建立在合理、超越預(yù)期的基礎(chǔ)上，優(yōu)秀的創(chuàng)意既不違背規(guī)則，也不拘泥于規(guī)則。

亮眼的細(xì)節(jié)

“去哪兒”應(yīng)用中有一個(gè)小細(xì)節(jié)我很喜歡：點(diǎn)擊首頁(yè)的欄目時(shí)，上面會(huì)相應(yīng)的顯示一個(gè)手印，這種感覺(jué)很接近真實(shí)生活。當(dāng)然，iPhone應(yīng)用中細(xì)節(jié)出眾的實(shí)在是太多了，這里限于篇幅，就不一一列舉了。大家有心的話會(huì)發(fā)現(xiàn)很多有意思的地方。

圖20 點(diǎn)擊選項(xiàng)后出現(xiàn)的指紋效果

最后，品牌宣傳無(wú)處不在

頁(yè)面加載時(shí)，不要白白的浪費(fèi)時(shí)間和空間，利用這個(gè)機(jī)會(huì)宣傳你的品牌吧。這樣不但不會(huì)讓用戶(hù)感到反感，還會(huì)讓他覺(jué)得加載時(shí)間變短了（現(xiàn)已成為一種常規(guī)的做法）。

圖21 加載時(shí)建議出現(xiàn)產(chǎn)品名稱(chēng)的水印效果

如果想多一些了解這本書(shū)的內(nèi)容，看看這兩篇：

交互新手絕佳自學(xué)教程！
《網(wǎng)易美女設(shè)計(jì)主管！交互設(shè)計(jì)菜鳥(niǎo)如何入門(mén)？》

想進(jìn)大公司的專(zhuān)業(yè)設(shè)計(jì)師注意了！
《網(wǎng)易美女設(shè)計(jì)主管！專(zhuān)業(yè)設(shè)計(jì)師有哪些必知的設(shè)計(jì)流程》

眾籌項(xiàng)目，友情推薦，24 號(hào)前結(jié)束呦！
比京東便宜還有東西送的地址：http://www.zhongchou.cn

此文為人民郵電出版社與優(yōu)設(shè)合作刊發(fā)，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量75萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：