什么是好的UI設(shè)計?好在哪里?為什么好?有哪些判斷依據(jù)?有些設(shè)計師卻說不出個所以然來。

 

很多設(shè)計師尤其是初級設(shè)計師的第一反應(yīng)是「好看的呀」 或者是「我分不出好壞」。

UI設(shè)計師只負(fù)責(zé)把它做的好看嗎?沒錯，高顏值的產(chǎn)品確實養(yǎng)眼，但這只是其中的一部分，它不能決定整個產(chǎn)品的整體體驗，設(shè)計最終是為人民服務(wù)的。著名設(shè)計師菲利普·史塔克說過：我們是設(shè)計師，不是藝術(shù)家。所以我們既要提供視覺上的感受，也要提供體驗上的享受。

那么，我們需要哪些標(biāo)準(zhǔn)來判斷呢?

01/

風(fēng)格定位是否準(zhǔn)確

每個公司每個產(chǎn)品都有一批精準(zhǔn)用戶，有些比較大眾(用戶群比較廣泛)，有些比較小眾(垂直到某領(lǐng)域)。如果你知道公司的定位是什么?你的服務(wù)對象是誰?那么剩下的問題就是，我們該怎么做可以滿足他/她/它們的需求，解決他們的痛點。

編者注：定位清晰后，接下來該解決用戶的問題了→ 《聚沙成塔!平臺型產(chǎn)品從「分散用戶痛點」推導(dǎo)「統(tǒng)一優(yōu)化方案」的思路總結(jié)》

通常意義來講，目標(biāo)受眾越廣泛，那么設(shè)計就需要越簡潔且偏傳統(tǒng)。這就是你經(jīng)常會看到一些APP沒什么特色，缺少了性格色彩方面等元素，但又很實用。另一些設(shè)計很炫酷、華麗、或者很奇葩，這些特點適用于小眾群體，卻不適用大眾口味，如果你的受眾數(shù)量較少且比較典型，那么可以投其所好，依靠設(shè)計噱頭來吸引他們的注意力，這就是你在設(shè)計前需要思考的取舍關(guān)系。

設(shè)計體現(xiàn)點：頁面氣質(zhì)(調(diào)性)、主色系、字體、交互方式�！　�

 

　　△ 圖片來自淘寶、GILT、單讀

圖1淘寶的定位是大而全的網(wǎng)絡(luò)商城，沒有你買不到，只有你想不到，是一個綜合型的百貨。服務(wù)涵蓋吃喝玩樂，輻射到各種各樣的用戶，受眾群很廣泛，因此他們的風(fēng)格特征就是熱鬧，選擇橙色作為品牌色，也是襯托熱鬧活力親民等特征，字體和交互方式都是偏常規(guī)，為了更適用于廣泛的受眾群。

圖2GILT是美國的一個奢侈品電商，采用一種非常特殊的模式，會員制的奢侈品折扣模式，主要是銷售一些著名設(shè)計師的限量奢侈品或者是從未與大眾見面的產(chǎn)品。由于目標(biāo)用戶明確，所以風(fēng)格定位也很清晰，主要突出奢侈感、品質(zhì)感，采用經(jīng)典色黑色為主色，白色為輔助，瀑布流模式，字體會有一些襯線字體，商品內(nèi)容、圖片品質(zhì)都是極高的，整個頁面中沒有雜亂的其他信息，有助于提高用戶的閱讀體驗。

圖3單讀一個很小眾的閱讀產(chǎn)品，而且還可以聽， 內(nèi)容是一些作品、書、電影等等。目標(biāo)用戶明確，內(nèi)容質(zhì)量高，每一屏是一個故事的引言和配圖，簡潔精致，風(fēng)格定位很文藝，文字是襯線體，精美的配圖，米白的紙色和金色的輔助，使得整個APP散發(fā)著一種精致書本的味道。

02/

吸引力夠不夠

這里所說的吸引力不單單是說你的設(shè)計有多炫酷，多吸眼球，而是你想展現(xiàn)的內(nèi)容是否第一時間吸引到用戶的目光，從而引導(dǎo)用戶完成目標(biāo)需求。

　　A wealth of information leads to a poverty of attention.

　　大量的信息會導(dǎo)致注意力的分散�！�—Marty Neumeier

　　編者注：想讓你的設(shè)計更能吸引用戶，試試這些方法　

好的設(shè)計里是沒有使用阻力的，在龐大的信息架構(gòu)中篩選你想表達(dá)的信息重點是非常重要的。要避免信息超負(fù)荷，過多的信息是在給你的設(shè)計添加阻力。因此，你需要去切實了解一下你的用戶從你的設(shè)計中想要得到什么，并且在很多情況下，你需要自己提煉信息，做一些加減法，進(jìn)行重組。

設(shè)計體現(xiàn)點：文案、字號、字間距、版式、層級關(guān)系�！　�

 

　　△ 圖片來自ENJOY、PAPER

圖1ENJOY 一個精選美食電商，首頁清新有節(jié)奏，從文案、文字、字間距的把控都是很通氣的，瀏覽起來不壓抑。首頁banner作為今日推薦的模式，配圖精美品質(zhì)高，首屏占比很大，吸睛度很高，五個分類圖標(biāo)精致奪目，很容易吸引用戶做出行動。作為用戶，首屏告訴我這些就足夠了。內(nèi)容多了會讓用戶視覺焦慮產(chǎn)生煩躁，反而打斷需求目標(biāo)。

圖2、3paper 作為一個效率類的產(chǎn)品，他的功能點有很多，包括思維導(dǎo)圖、設(shè)計圖、筆記、靈感、清單、注釋等。它的首頁非常具有吸引力，它的特點是把不同的功能都展示在一起，就像一個墻面，把所有的創(chuàng)作靈感或是主要記錄以縮略圖的方式展示出來，一目了然。左側(cè)抽屜做為分類頁，方便收納查找。而不是像一般的效率類應(yīng)用，首頁做了很多入口，層級很深。

市面上有些類似應(yīng)用，會把新手教學(xué)、新功能提醒等放在首次開機(jī)引導(dǎo)頁，只顯示一次。但是paper巧妙的把新手引導(dǎo)和新功能展示放在首頁的每個縮略圖模塊里，這樣既減少了步驟，又可以強(qiáng)調(diào)功能，還可以有效的引導(dǎo)用戶去做操作。

03/

用戶體驗好不好

好的用戶體驗包含很多方面，比如說Whitney Quesenbery提出的5E原則，包含了有用性(Effective)、效率性(Efficient)、易學(xué)性(Easy to learn)、容錯性(Error Tolerant)、吸引力(Engaging)。

簡單來說就是，我們設(shè)計的產(chǎn)品要對用戶有實際幫助，能一定程度上提高生活的效率，容易理解并快速地知道如何操作。在用戶進(jìn)行失誤操作后，能夠有挽回措施或者不會造成較大的損失。對用戶是有吸引力的，無論從功能還是造型上�！　�

 

設(shè)計體現(xiàn)點：交互方式、產(chǎn)品思維、表現(xiàn)手法。　　

 

△ 圖片來自FUNNEL

新聞APP是日常生活中經(jīng)常用到的一類APP，普遍是嚴(yán)肅的、單色調(diào)的設(shè)計。Funnel是其中設(shè)計感比較強(qiáng)的一款A(yù)PP，F(xiàn)unnel的界面非常簡潔，功能簡單，設(shè)計活潑生動，看不出來是新聞類的APP，F(xiàn)unnel的主要功能是播放新聞，用戶可以根據(jù)自己喜好挑選適合自己的新聞。

交互方式也十分簡單，選項設(shè)計一目了然，使用不同的色彩和縮寫來表現(xiàn)不同的新聞臺。內(nèi)容實時更新，適合快節(jié)奏生活的上班人群，可以在上下班路上，聽自己喜歡的新聞頻道，用耳機(jī)或底部控制欄切換播放。不感興趣的內(nèi)容直接點擊取消，十分方便。整個APP使用流暢，配合悅耳的點擊聲和彈性的動效，體驗感很強(qiáng)。

04/

設(shè)計細(xì)節(jié)有沒有

就算細(xì)節(jié)不能決定成敗，那也能博得用戶眼球。在琳瑯滿目的APP里，各路花色的設(shè)計中，怎樣能脫穎而出，怎樣能讓用戶眼前一亮，怎樣能給用戶帶來新鮮感，怎樣讓用戶在使用你的產(chǎn)品會因為一些細(xì)節(jié)而記住你。好的細(xì)節(jié)能給產(chǎn)品注入生命力和活力，博得好感，而不是一個呆板冷漠的人機(jī)操作。但細(xì)節(jié)使用不當(dāng)就是畫蛇添足，帶來體驗上的阻力，所以添加細(xì)節(jié)也要合理使用，一切要建立在需求和體驗之上。

設(shè)計體現(xiàn)點：加載、icon、引導(dǎo)、分割線、音效等各種合理的地方�！　�

 

 

△ 圖片來自融360、FANCY

圖1融360在這次全新視覺升級之后，增加了很多小細(xì)節(jié)。比如底導(dǎo)航在用戶每次切換點擊時，高亮圖標(biāo)增加了延遲動效，交互流暢，互動感很強(qiáng)，比傳統(tǒng)的切換點亮增加了不少活力。

圖2Fancy 社區(qū)是一個可以幫助你發(fā)現(xiàn)并購買世界上最具品位的精美產(chǎn)品，F(xiàn)ancy 網(wǎng)站是基于圖片分享的B2C及C2C電商平臺，產(chǎn)品偏向于時尚、高端、創(chuàng)意，新奇。它的注冊按鈕很有趣，當(dāng)你開始輸入內(nèi)容的第一項時，注冊按鈕就開始點亮25%，有點步驟引導(dǎo)的意思。隨著四項注冊信息的輸入完成，注冊按鈕就被全部點亮，綠色的按鈕也意味著輸入信息完整無誤，用戶可以繼續(xù)操作下一步了，整個交互很流暢。

05/

數(shù)據(jù)反饋怎么樣

數(shù)據(jù)反饋是對產(chǎn)品和設(shè)計結(jié)果的驗證。數(shù)據(jù)是人類行為的痕跡，通過數(shù)據(jù)來判斷用戶們的思考，行為和交流方式，了解用戶的動機(jī)和痛點，找到對你有價值的數(shù)據(jù)，創(chuàng)造有意義的產(chǎn)品體驗。所以數(shù)據(jù)反饋是重要的參考，數(shù)據(jù)驅(qū)動設(shè)計，能夠幫助我們在設(shè)計中做出決策。

GSM：Goal 目標(biāo) 、Signal 信號 、Metric 指標(biāo)五度模型：吸引度、完成度、滿意度、忠誠度、推薦度。　　

 

簡單來說就是，我們設(shè)計的產(chǎn)品要對用戶有實際幫助，能一定程度上提高生活的效率，容易理解并快速的知道如何操作;在用戶進(jìn)行失誤操作后，能夠挽回措施或者不會造成較大的損失;對用戶是有吸引力的，無論從功能還是造型上。

設(shè)計師可以短信發(fā)送訪談邀約問卷，進(jìn)行面對面訪談或可用性測試。　　

 

△ 圖片來自融360

我們和交互組同學(xué)對融360首頁進(jìn)行了用戶訪談及可用性測試，目的是了解大首頁改版對用戶的影響，了解用戶主要業(yè)務(wù)使用的狀況，挖掘用戶的體驗痛點及訴求點。針對吸引度、完成度、滿意度做了用研，得到了一些直觀反饋，因此我們就需要針對這些反饋結(jié)果提煉重點，重新再設(shè)計。

最后，一個產(chǎn)品的設(shè)計是好是壞，不是你的主觀感受，也不是你的一眼之緣。要學(xué)會分析產(chǎn)品、分析用戶場景，結(jié)合用戶需求和操作體驗，階段性的做總結(jié)，才能培養(yǎng)你的判斷能力，不要再做一個只停留在視覺層面的設(shè)計師了。‍‍