編者按：許多同學在嫻熟地掌握了Photoshop、Illustrator、Indesign等設計工具后，仍然無法觸碰大公司的橄欖枝。原因很多，但其中有一點需要單獨挑出來說說——很多設計師都沒考慮過的品牌意識。今天前網易UED主管@劉津legene?親自上陣，教你在設計里樹立品牌意識。

為什么要單獨談談品牌呢？這是源于一件讓我印象非常深刻的事情：有一個大公司的設計師，在公司官方博客上發表了一篇有關iPhone的文章，由于他在文章中把“iPhone”拼成了“iphone”，遭到了一個讀者憤怒的指責。這名讀者激動的斥責作者以及他所在的公司，是多么多么的不專業。

這件事讓我很愧疚，因為如果當時讓我去拼，我也一定會拼錯。從這件事情里，我總結出了三點：

1. 蘋果的品牌做的非常好
2. 我們作為大公司的設計師，也許并沒有別人想象中專業
3. 只有懂得尊重品牌，別人才會尊重你的品牌。

品牌有什么作用呢？我個人認為：好的品牌可以成為一種信仰：對內凝聚員工；對外樹立形象 。

圖1 品牌的作用

品牌怎樣凝聚員工？

好的品牌會吸引專業人士加盟、會提高員工的忠誠度；

品牌怎樣樹立形象？

好的品牌讓用戶更容易信任、給用戶帶來更大的附加價值（為什么很多人喜歡買名牌包？其實更重要的是擁有這個品牌給自己帶來的滿足感）。因此作為一個專業的設計師，一定要具備品牌意識。

品牌管理其實是個復雜的工程。logo、slogan、用戶體驗、名譽等等等等，都和品牌有關。那么到底該由誰來負責對品牌的維護呢？市場部？公關部？技術部？設計部？……貌似推到哪個部門都有道理。或者專門成立一個部門？也不太現實。其實塑造、維護品牌靠的是所有人的努力，更是自覺。對于我們設計師來說，我們確實不是專門做品牌的。但我們可以通過做好本職工作，為品牌建設添磚加瓦，這也是設計師專業度的體現。

怎樣才算是做好本職工作？很多設計師都希望自己的作品獨樹一幟，精美絕倫。但作為產品設計中的一員，有時候正確的表達比美觀的設計更重要。前面我們提到過：用戶體驗設計的目標其實就是要解決用戶需求、減少用戶理解和操作的成本、給用戶留下美好而深刻的印象。

解決用戶需求是第一位的、也是最基本的要求，達到這個程度可以算是“合格”；讓產品更易用、減少理解和操作成本，這是更進一步的要求，達到這個程度可算是“專業”；讓產品深深的吸引用戶，給用戶留下美好而深刻的印象，達到這個程度可謂“出色”。我們在第五、第六章已經詳細闡述了具體的設計方法。做好這些，其實就已經是為品牌建設貢獻了一份力量。

在這一章節，我還想再介紹一些實用的原則，它們對提升品牌形象有著更直接的作用：

圖2 提升品牌形象的一些設計規則

保證關聯性

首先，你要保證你設計的東西是和產品相關的，做不到這點就不算一個合格的作品。這看起來很簡單，但做起來并不容易。因為設計師必須真正的了解產品定位：產品功能、目標群體、產品特色。否則就有可能設計出外表華麗，但卻和產品方向相差甚遠的作品。所以，要正確的理解產品。

拿iPhone應用的圖標來舉例子。icon要體現這個產品的名稱、功能或者特色（目標群體間接體現了功能或特色），千萬別弄個“三不沾”。

圖3 一些優秀的移動應用圖標

借鑒產品在Web端（Facebook）、實體店（星巴克）的圖標、描述產品名稱（每日壁紙雜志）；通過圖片描述產品性質（天氣預報、電池管家、計算器）；借鑒應用界面的樣式和材質（Cellar）……這些方法，均可提高產品的識別度及用戶的忠誠度。

再來看看下面兩個移動應用圖標，它們有什么問題呢？

圖4 京東和丁丁優惠券的圖標（2011年）

每次點擊京東的圖標，我都會不由自主的想到淘寶（和京東Web端的風格不太像，和淘寶客戶端的圖標倒是很像，現已更改）……至于第二個圖標，你能猜出來這個應用是做什么的嗎？

力求一致性

與產品內容相關聯只是最基礎的一步，是每個合格的設計師都應該做到的，要想成為專業的設計師，光有這點還不夠。就像我前面提到的，還要注重對基本規則的學習和研究，融會貫通，使設計出來的作品不僅正確，并且有很好的易用性，間接提升品牌形象。

應用內一致：

我們接觸一款產品，就好像接觸一個人，他的外觀、衣著、談吐、性格都會影響我們對他的印象和判斷。一個相貌堂堂、衣著得體、談吐優雅、表里一致、溫文爾雅的人一定會給我們留下深刻的印象，對其產生好感，愿意與他成為朋友，甚至莫逆之交；相反，；一個外形邋遢、毫無品味、表里不一的人只會讓我們敬而遠之。

初次見面三部曲

圖5 風格一致的icon、啟動畫面和首頁

中國人常說：一而再，再而三；事不過三；一鼓作氣，再而衰，三而竭……可見“三”這個數字對于人的記憶、認知、影響起到重要的作用。初次見面，憑借這三輪轟炸，想不記住這個應用都難啊。“Etsy”的一致性給我留下深刻的印象。

來看一個反例：

圖6 風格不一致的圖標、啟動畫面和首頁

該例中圖標、啟動畫面、首頁的風格都不一致。圖標中的“100”和啟動畫面中的“100”顏色不同，背景也不同。你可能會使用這樣的應用，但它未必會給你留下很深的印象。所以，設計師在設計這三個部分時，一定要放在一起對比一下。

衣著品味

我們都知道，西裝不能配球鞋穿。應用的界面也是一樣，不僅內外要協調，上下也要搭配呼應，至少要看起來協調。

圖7 配色協調的界面

另外，配色要盡量統一。我們常聽人說，身上的服裝顏色不要超過三種。界面也是一樣，太過花哨的界面讓人找不到重點，更難以記住你的品牌。比如下面這個應用，以黑白為主色調，需要強調的部分用橙黃色突出。底部標簽欄上有一個橙色的窄條，與上面很好的呼應。

圖8 配色簡練、識別度高的界面

表里如一

為了避免用戶在理解上發生歧義，因此同樣性質的元素應該表里如一；不同性質的元素應該盡量避免樣式相近。

比如花田圖標上的這個小元素，有的時候是紅色的，而有的時候又是綠色的。圖標代表了一個產品的形象，因此這種現象應該盡量避免。

圖9 代表同樣含義的元素應保持樣式一致

如果界面元素的性質不一致，則應該在外觀上盡量區別開：下面這個例子中，首頁的圖標樣式（不可點）和其他頁面的“返回”按鈕（可點）做成了類似的樣式，使用戶極容易誤操作（以為首頁的圖標可點）。

圖10 代表不同含義的元素應避免樣式接近

雖然元素的樣式需要根據情況仔細考慮，但控件風格應該保持一致。同類型的控件，最好不要一會兒用圖形、一會兒用按鈕；一會兒有陰影、一會兒沒陰影；一會兒有漸變、一會兒無漸變等。雖然面對這么多界面、面對這么多控件，保持一致的風格并不容易，但這樣可以讓讓你的應用顯得更專業，更有檔次。

舉個例子：對于一般的應用來說，導航欄左右的按鈕樣式、風格、尺寸要盡量保持一致（這個不是絕對的，但是這么做肯定沒錯）。

圖11 不一致的圖標風格降低品質感

為了降低風險，在不是很有把握的情況下，盡量使用標準控件，因為用戶對標準控件最為習慣。另外當視覺稿完成后，把所有控件統一集中在一個頁面上，來查看風格是否統一，這樣也有利于日后形成界面規范。

圖12 界面元素歸納

親密接觸

在不同的頁面，針對同一性質的操作，應保持一致性。

比如下面這兩個應用在功能上非常的接近。由于列表頁上的細微差別（上面的需要在下一級頁面執行收藏操作；下面的可以在當前列表頁執行收藏操作），導致兩者在收藏頁面的交互形式有較大的區別。當然，下面的應用可采用和上面的同樣的刪除形式，但卻不如現在的方式直觀。

圖13 同樣性質的操作保持一致的風格

平臺內一致：應用內部要保持一致，同時還要和該平臺上其他產品的通用規則盡量保持一致。因為用戶不是只用你的應用，他會下載、使用很多很多的應用。比如設計iPhone應用時，盡量遵循iPhone界面的規范，同時考慮大家的使用習慣。很多設計師鄙視使用iPhone自帶的圖標、控件和樣式等，認為這樣的話就不需要設計師了。

《觸動人心——設計優秀的iPhone應用》中說到：“創意的真諦，是在保證可用的情況下，尋求更好的表達方式。優秀的設計遵循規則，而又不會被規則所束縛。”其實創新的設計永遠是受歡迎的，只是不要挑戰基本規則。建議每一個參與iPhone應用設計的人，都好好讀一下iPhone的人機界面指南，研究iPhone的原生應用，在熟悉規則的基礎上創新。

比如說某應用的iPhone彈框，設計師為了美觀和對稱，把“取消”和“確定”按鈕都設計成了同樣的紅色。這樣會有什么問題呢？

圖14 某iPhone應用彈框的視覺方案

如果了解iPhone的原生應用以及相應的人機界面規范，就會知道紅色按鈕一般表示警戒或刪除等含義（在iOS7中略有改變），且多數iPhone應用都遵循這個規則，用戶已經形成了認知習慣；并且iPhone應用一般會刻意區分兩個按鈕的樣式，以避免用戶做無謂的思考。如果兩個按鈕都設計成同樣的樣式，并且都是紅色，用戶首先可能會緊張一下，認為這是一個很嚴重的提醒，然后還需要仔細辨認，生怕自己點錯了。但其實這是毫無必要的，設計師完全可以通過更好的方式去引導。

平臺間一致：如果你的產品不止有iPhone版，還有Android版，iPad版，Web版等。那么應該保證這些平臺間的風格是一致的。這樣更容易樹立統一的品牌形象。

圖15 Web端和客戶端界面風格統一

內部產品一致：如果是同一個公司的產品，為了提升品牌性，可以考慮制定統一的標準（產品戰略級方向的設計規范），來增強該公司產品的識別性和品牌感。該工作一般由專門的設計中心來負責。

追求獨特性

你真的會認真的理解產品，通過設計貼切的表達你的產品嗎？你真的熟悉了基本的設計方法及規則？在設計方面已游刃有余？易用性對你來說已不在話下？……好吧，如果你能保證做到這些，那么恭喜你，你有機會去追求創新，成為一個出色的設計師了。

個性的標志

圖標對一個產品的重要性不用多說。圖標應該是美的、和諧的；如前面所說，圖標需要正確的表達你的產品理念，或你的產品名稱；當然也可以是你的產品功能和特色。然而對一個優秀的圖標來說，這些還不夠。圖標還應該是獨樹一幟，鶴立雞群的，讓你區別于、甚至高于你的競爭者。

圖16 一些識別性較強的圖標

微博類的產品這方面做的不錯，即使不配文字，也很容易區分。但是閱讀類的就有些問題了。你能一眼區分出來這些圖標分別代表哪些應用嗎？

圖17 一些識別性欠佳的圖標

獨特的風格

有些應用確實是不按牌理出牌的，它們不完全遵循官方規范的交互方式，但也獲得了用戶的喜愛，惹來其他應用爭相效仿之。比如“path”應用富有創意的菜單彈出效果。

圖18 Path的菜單彈出效果

但并不是所有的創意都是合理的，其實絕大多數的易用性問題都是源于不專業的“創新”。有的人不去鉆研用戶習慣、界面規范，完全按照自己的喜好去做設計，以為這就是所謂的“創新”和“突破”，這種行為是不可取的。專業的創新一定是在真正領悟了用戶體驗、界面設計原則的基礎上所做的令人眼前一亮的改變。

比如圖19中“下拉啟動語音助手”這個操作，雖然乍一看覺得很新穎、操作起來也很方便，但這卻違背了大多數用戶下拉刷新的習慣（在社交、閱讀類應用中，下拉刷新已成為慣例）。因此很多用戶反饋說這里非常容易誤操作，不知道怎么就啟動了語音助手，這種操作違背了用戶的預期，在一定程度上影響了用戶的體驗。

圖19 易信（1.2.0版本）的下拉啟動語音助手操作

因此“創新”一定要建立在合理、超越預期的基礎上，優秀的創意既不違背規則，也不拘泥于規則。

亮眼的細節

“去哪兒”應用中有一個小細節我很喜歡：點擊首頁的欄目時，上面會相應的顯示一個手印，這種感覺很接近真實生活。當然，iPhone應用中細節出眾的實在是太多了，這里限于篇幅，就不一一列舉了。大家有心的話會發現很多有意思的地方。

圖20 點擊選項后出現的指紋效果

最后，品牌宣傳無處不在

頁面加載時，不要白白的浪費時間和空間，利用這個機會宣傳你的品牌吧。這樣不但不會讓用戶感到反感，還會讓他覺得加載時間變短了（現已成為一種常規的做法）。

圖21 加載時建議出現產品名稱的水印效果

如果想多一些了解這本書的內容，看看這兩篇：

交互新手絕佳自學教程！
《網易美女設計主管！交互設計菜鳥如何入門？》

想進大公司的專業設計師注意了！
《網易美女設計主管！專業設計師有哪些必知的設計流程》

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

此文為人民郵電出版社與優設合作刊發，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

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