【 設計理論】設計師先學會如何樹立品牌意識

設計師先學會如何樹立品牌意識

這一次的教學是屬於設計理論領域中的設計理論的相關教學。

文章出處是來自網易UED的設計理論類文章,寫教學的作者是佚名,感謝佚名提供設計理論的實作教學。

教學大綱:

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


設計理論教學開始

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

設計師先學會如何樹立品牌意識

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

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

蘋果的品牌做的非常好

我們作為大公司的設計師,也許並沒有別人想象中專業

只有懂得尊重品牌,別人才會尊重你的品牌。

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

設計師先學會如何樹立品牌意識

圖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 加載時建議出現產品名稱的水印效果

–本文轉載自 http://www.missyuan.net 教學網 —

文章永久連結為: 設計師先學會如何樹立品牌意識