先學(xué)會如何樹立品牌意識
為什么要單獨談?wù)勂放颇??這是源于一件讓我印象非常深刻的事情:有一個大公司的設(shè)計師,在公司官方博客上發(fā)表了一篇有關(guān)iPhone的文章,由于他 在文章中把“iPhone”拼成了“iphone”,遭到了一個讀者憤怒的指責(zé)。這名讀者激動的斥責(zé)作者以及他所在的公司,是多么多么的不專業(yè)。
這件事讓我很愧疚,因為如果當(dāng)時讓我去拼,我也一定會拼錯。從這件事情里,我總結(jié)出了三點:
-
蘋果的品牌做的非常好
-
我們作為大公司的設(shè)計師,也許并沒有別人想象中專業(yè)
-
只有懂得尊重品牌,別人才會尊重你的品牌。
品牌有什么作用呢?我個人認為:好的品牌可以成為一種信仰:對內(nèi)凝聚員工;對外樹立形象 。
圖1 品牌的作用
品牌怎樣凝聚員工?
好的品牌會吸引專業(yè)人士加盟、會提高員工的忠誠度;
品牌怎樣樹立形象?
好的品牌讓用戶更容易信任、給用戶帶來更大的附加價值(為什么很多人喜歡買名牌包?其實更重要的是擁有這個品牌給自己帶來的滿足感)。因此作為一個專業(yè)的設(shè)計師,一定要具備品牌意識。
品牌管理其實是個復(fù)雜的工程。logo、slogan、用戶體驗、名譽等等等等,都和品牌有關(guān)。那么到底該由誰來負責(zé)對品牌的維護呢?市場部?公關(guān) 部?技術(shù)部?設(shè)計部?……貌似推到哪個部門都有道理。或者專門成立一個部門?也不太現(xiàn)實。其實塑造、維護品牌靠的是所有人的努力,更是自覺。對于我們設(shè)計 師來說,我們確實不是專門做品牌的。但我們可以通過做好本職工作,為品牌建設(shè)添磚加瓦,這也是設(shè)計師專業(yè)度的體現(xiàn)。
怎樣才算是做好本職工作?很多設(shè)計師都希望自己的作品獨樹一幟,精美絕倫。但作為產(chǎn)品設(shè)計中的一員,有時候正確的表達比美觀的設(shè)計更重要。前面我們提到過:用戶體驗設(shè)計的目標(biāo)其實就是要解決用戶需求、減少用戶理解和操作的成本、給用戶留下美好而深刻的印象。
解決用戶需求是第一位的、也是最基本的要求,達到這個程度可以算是“合格”;讓產(chǎn)品更易用、減少理解和操作成本,這是更進一步的要求,達到這個程度 可算是“專業(yè)”;讓產(chǎn)品深深的吸引用戶,給用戶留下美好而深刻的印象,達到這個程度可謂“出色”。我們在第五、第六章已經(jīng)詳細闡述了具體的設(shè)計方法。做好 這些,其實就已經(jīng)是為品牌建設(shè)貢獻了一份力量。
在這一章節(jié),我還想再介紹一些實用的原則,它們對提升品牌形象有著更直接的作用:
圖2 提升品牌形象的一些設(shè)計規(guī)則
保證關(guān)聯(lián)性
首先,你要保證你設(shè)計的東西是和產(chǎn)品相關(guān)的,做不到這點就不算一個合格的作品。這看起來很簡單,但做起來并不容易。因為設(shè)計師必須真正的了解產(chǎn)品定位:產(chǎn)品功能、目標(biāo)群體、產(chǎn)品特色。否則就有可能設(shè)計出外表華麗,但卻和產(chǎn)品方向相差甚遠的作品。所以,要正確的理解產(chǎn)品。
拿iPhone應(yīng)用的圖標(biāo)來舉例子。icon要體現(xiàn)這個產(chǎn)品的名稱、功能或者特色(目標(biāo)群體間接體現(xiàn)了功能或特色),千萬別弄個“三不沾”。
圖3 一些優(yōu)秀的移動應(yīng)用圖標(biāo)
借鑒產(chǎn)品在Web端(Facebook)、實體店(星巴克)的圖標(biāo)、描述產(chǎn)品名稱(每日壁紙雜志);通過圖片描述產(chǎn)品性質(zhì)(天氣預(yù)報、電池管家、計算器);借鑒應(yīng)用界面的樣式和材質(zhì)(Cellar)……這些方法,均可提高產(chǎn)品的識別度及用戶的忠誠度。
再來看看下面兩個移動應(yīng)用圖標(biāo),它們有什么問題呢?
圖4 京東和丁丁優(yōu)惠券的圖標(biāo)(2011年)
每次點擊京東的圖標(biāo),我都會不由自主的想到淘寶(和京東Web端的風(fēng)格不太像,和淘寶客戶端的圖標(biāo)倒是很像,現(xiàn)已更改)……至于第二個圖標(biāo),你能猜出來這個應(yīng)用是做什么的嗎?
力求一致性
與產(chǎn)品內(nèi)容相關(guān)聯(lián)只是最基礎(chǔ)的一步,是每個合格的設(shè)計師都應(yīng)該做到的,要想成為專業(yè)的設(shè)計師,光有這點還不夠。就像我前面提到的,還要注重對基本規(guī)則的學(xué)習(xí)和研究,融會貫通,使設(shè)計出來的作品不僅正確,并且有很好的易用性,間接提升品牌形象。
應(yīng)用內(nèi)一致:
我們接觸一款產(chǎn)品,就好像接觸一個人,他的外觀、衣著、談吐、性格都會影響我們對他的印象和判斷。一個相貌堂堂、衣著得體、談吐優(yōu)雅、表里一致、溫 文爾雅的人一定會給我們留下深刻的印象,對其產(chǎn)生好感,愿意與他成為朋友,甚至莫逆之交;相反,;一個外形邋遢、毫無品味、表里不一的人只會讓我們敬而遠 之。
初次見面三部曲
圖5 風(fēng)格一致的icon、啟動畫面和首頁
中國人常說:一而再,再而三;事不過三;一鼓作氣,再而衰,三而竭……可見“三”這個數(shù)字對于人的記憶、認知、影響起到重要的作用。初次見面,憑借這三輪轟炸,想不記住這個應(yīng)用都難啊?!癊tsy”的一致性給我留下深刻的印象。
來看一個反例:
圖6 風(fēng)格不一致的圖標(biāo)、啟動畫面和首頁
該例中圖標(biāo)、啟動畫面、首頁的風(fēng)格都不一致。圖標(biāo)中的“100”和啟動畫面中的“100”顏色不同,背景也不同。你可能會使用這樣的應(yīng)用,但它未必會給你留下很深的印象。所以,設(shè)計師在設(shè)計這三個部分時,一定要放在一起對比一下。
衣著品味
我們都知道,西裝不能配球鞋穿。應(yīng)用的界面也是一樣,不僅內(nèi)外要協(xié)調(diào),上下也要搭配呼應(yīng),至少要看起來協(xié)調(diào)。
圖7 配色協(xié)調(diào)的界面
另外,配色要盡量統(tǒng)一。我們常聽人說,身上的服裝顏色不要超過三種。界面也是一樣,太過花哨的界面讓人找不到重點,更難以記住你的品牌。比如下面這個應(yīng)用,以黑白為主色調(diào),需要強調(diào)的部分用橙黃色突出。底部標(biāo)簽欄上有一個橙色的窄條,與上面很好的呼應(yīng)。
圖8 配色簡練、識別度高的界面
表里如一
為了避免用戶在理解上發(fā)生歧義,因此同樣性質(zhì)的元素應(yīng)該表里如一;不同性質(zhì)的元素應(yīng)該盡量避免樣式相近。
比如花田圖標(biāo)上的這個小元素,有的時候是紅色的,而有的時候又是綠色的。圖標(biāo)代表了一個產(chǎn)品的形象,因此這種現(xiàn)象應(yīng)該盡量避免。
圖9 代表同樣含義的元素應(yīng)保持樣式一致
如果界面元素的性質(zhì)不一致,則應(yīng)該在外觀上盡量區(qū)別開:下面這個例子中,首頁的圖標(biāo)樣式(不可點)和其他頁面的“返回”按鈕(可點)做成了類似的樣式,使用戶極容易誤操作(以為首頁的圖標(biāo)可點)。
圖10 代表不同含義的元素應(yīng)避免樣式接近
雖然元素的樣式需要根據(jù)情況仔細考慮,但控件風(fēng)格應(yīng)該保持一致。同類型的控件,最好不要一會兒用圖形、一會兒用按鈕;一會兒有陰影、一會兒沒陰影; 一會兒有漸變、一會兒無漸變等。雖然面對這么多界面、面對這么多控件,保持一致的風(fēng)格并不容易,但這樣可以讓讓你的應(yīng)用顯得更專業(yè),更有檔次。
舉個例子:對于一般的應(yīng)用來說,導(dǎo)航欄左右的按鈕樣式、風(fēng)格、尺寸要盡量保持一致(這個不是絕對的,但是這么做肯定沒錯)。
圖11 不一致的圖標(biāo)風(fēng)格降低品質(zhì)感
為了降低風(fēng)險,在不是很有把握的情況下,盡量使用標(biāo)準(zhǔn)控件,因為用戶對標(biāo)準(zhǔn)控件最為習(xí)慣。另外當(dāng)視覺稿完成后,把所有控件統(tǒng)一集中在一個頁面上,來查看風(fēng)格是否統(tǒng)一,這樣也有利于日后形成界面規(guī)范。
圖12 界面元素歸納
親密接觸
在不同的頁面,針對同一性質(zhì)的操作,應(yīng)保持一致性。
比如下面這兩個應(yīng)用在功能上非常的接近。由于列表頁上的細微差別(上面的需要在下一級頁面執(zhí)行收藏操作;下面的可以在當(dāng)前列表頁執(zhí)行收藏操作),導(dǎo)致兩者在收藏頁面的交互形式有較大的區(qū)別。當(dāng)然,下面的應(yīng)用可采用和上面的同樣的刪除形式,但卻不如現(xiàn)在的方式直觀。
圖13 同樣性質(zhì)的操作保持一致的風(fēng)格
平臺內(nèi)一致:應(yīng)用內(nèi)部要保持一致,同時還要和該平臺上其他產(chǎn)品的通用規(guī)則盡量保持一致。因為用戶不是只用你的應(yīng)用,他會下載、使用很 多很多的應(yīng)用。比如設(shè)計iPhone應(yīng)用時,盡量遵循iPhone界面的規(guī)范,同時考慮大家的使用習(xí)慣。很多設(shè)計師鄙視使用iPhone自帶的圖標(biāo)、控件 和樣式等,認為這樣的話就不需要設(shè)計師了。
《觸動人心——設(shè)計優(yōu)秀的iPhone應(yīng)用》中說到:“創(chuàng)意的真諦,是在保證可用的情況下,尋求更好的表達方式。優(yōu)秀的設(shè)計遵循規(guī)則,而又不會被規(guī) 則所束縛?!逼鋵崉?chuàng)新的設(shè)計永遠是受歡迎的,只是不要挑戰(zhàn)基本規(guī)則。建議每一個參與iPhone應(yīng)用設(shè)計的人,都好好讀一下iPhone的人機界面指南, 研究iPhone的原生應(yīng)用,在熟悉規(guī)則的基礎(chǔ)上創(chuàng)新。
比如說某應(yīng)用的iPhone彈框,設(shè)計師為了美觀和對稱,把“取消”和“確定”按鈕都設(shè)計成了同樣的紅色。這樣會有什么問題呢?
圖14 某iPhone應(yīng)用彈框的視覺方案
如果了解iPhone的原生應(yīng)用以及相應(yīng)的人機界面規(guī)范,就會知道紅色按鈕一般表示警戒或刪除等含義(在iOS7中略有改變),且多數(shù)iPhone 應(yīng)用都遵循這個規(guī)則,用戶已經(jīng)形成了認知習(xí)慣;并且iPhone應(yīng)用一般會刻意區(qū)分兩個按鈕的樣式,以避免用戶做無謂的思考。如果兩個按鈕都設(shè)計成同樣的 樣式,并且都是紅色,用戶首先可能會緊張一下,認為這是一個很嚴(yán)重的提醒,然后還需要仔細辨認,生怕自己點錯了。但其實這是毫無必要的,設(shè)計師完全可以通 過更好的方式去引導(dǎo)。
平臺間一致:如果你的產(chǎn)品不止有iPhone版,還有Android版,iPad版,Web版等。那么應(yīng)該保證這些平臺間的風(fēng)格是一致的。這樣更容易樹立統(tǒng)一的品牌形象。
圖15 Web端和客戶端界面風(fēng)格統(tǒng)一
內(nèi)部產(chǎn)品一致:如果是同一個公司的產(chǎn)品,為了提升品牌性,可以考慮制定統(tǒng)一的標(biāo)準(zhǔn)(產(chǎn)品戰(zhàn)略級方向的設(shè)計規(guī)范),來增強該公司產(chǎn)品的識別性和品牌感。該工作一般由專門的設(shè)計中心來負責(zé)。
追求獨特性
你真的會認真的理解產(chǎn)品,通過設(shè)計貼切的表達你的產(chǎn)品嗎?你真的熟悉了基本的設(shè)計方法及規(guī)則?在設(shè)計方面已游刃有余?易用性對你來說已不在話下?……好吧,如果你能保證做到這些,那么恭喜你,你有機會去追求創(chuàng)新,成為一個出色的設(shè)計師了。
個性的標(biāo)志
圖標(biāo)對一個產(chǎn)品的重要性不用多說。圖標(biāo)應(yīng)該是美的、和諧的;如前面所說,圖標(biāo)需要正確的表達你的產(chǎn)品理念,或你的產(chǎn)品名稱;當(dāng)然也可以是你的產(chǎn)品功能和特色。然而對一個優(yōu)秀的圖標(biāo)來說,這些還不夠。圖標(biāo)還應(yīng)該是獨樹一幟,鶴立雞群的,讓你區(qū)別于、甚至高于你的競爭者。
圖16 一些識別性較強的圖標(biāo)
微博類的產(chǎn)品這方面做的不錯,即使不配文字,也很容易區(qū)分。但是閱讀類的就有些問題了。你能一眼區(qū)分出來這些圖標(biāo)分別代表哪些應(yīng)用嗎?
圖17 一些識別性欠佳的圖標(biāo)
獨特的風(fēng)格
有些應(yīng)用確實是不按牌理出牌的,它們不完全遵循官方規(guī)范的交互方式,但也獲得了用戶的喜愛,惹來其他應(yīng)用爭相效仿之。比如“path”應(yīng)用富有創(chuàng)意的菜單彈出效果。
圖18 Path的菜單彈出效果
但并不是所有的創(chuàng)意都是合理的,其實絕大多數(shù)的易用性問題都是源于不專業(yè)的“創(chuàng)新”。有的人不去鉆研用戶習(xí)慣、界面規(guī)范,完全按照自己的喜好去做設(shè) 計,以為這就是所謂的“創(chuàng)新”和“突破”,這種行為是不可取的。專業(yè)的創(chuàng)新一定是在真正領(lǐng)悟了用戶體驗、界面設(shè)計原則的基礎(chǔ)上所做的令人眼前一亮的改變。
比如圖19中“下拉啟動語音助手”這個操作,雖然乍一看覺得很新穎、操作起來也很方便,但這卻違背了大多數(shù)用戶下拉刷新的習(xí)慣(在社交、閱讀類應(yīng)用 中,下拉刷新已成為慣例)。因此很多用戶反饋說這里非常容易誤操作,不知道怎么就啟動了語音助手,這種操作違背了用戶的預(yù)期,在一定程度上影響了用戶的體 驗。
圖19 易信(1.2.0版本)的下拉啟動語音助手操作
因此“創(chuàng)新”一定要建立在合理、超越預(yù)期的基礎(chǔ)上,優(yōu)秀的創(chuàng)意既不違背規(guī)則,也不拘泥于規(guī)則。
亮眼的細節(jié)
“去哪兒”應(yīng)用中有一個小細節(jié)我很喜歡:點擊首頁的欄目時,上面會相應(yīng)的顯示一個手印,這種感覺很接近真實生活。當(dāng)然,iPhone應(yīng)用中細節(jié)出眾的實在是太多了,這里限于篇幅,就不一一列舉了。大家有心的話會發(fā)現(xiàn)很多有意思的地方。
圖20 點擊選項后出現(xiàn)的指紋效果
最后,品牌宣傳無處不在
頁面加載時,不要白白的浪費時間和空間,利用這個機會宣傳你的品牌吧。這樣不但不會讓用戶感到反感,還會讓他覺得加載時間變短了(現(xiàn)已成為一種常規(guī)的做法)。
圖21 加載時建議出現(xiàn)產(chǎn)品名稱的水印效果
原文來自:優(yōu)設(shè)
品牌的構(gòu)建是個很漫長的過程
建議作者您再去看看CI的概念,品牌的建設(shè)最近幾年已經(jīng)很少有人知道了。其實您說的就是vi體系的設(shè)計,只是不太全