資深UI設(shè)計(jì)師教你怎么點(diǎn)評(píng)

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

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

 

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

每個(gè)公司每個(gè)產(chǎn)品都有一批精準(zhǔn)用戶，有些比較大眾(用戶群比較廣泛)，有些比較小眾(垂直到某領(lǐng)域)。如果你知道公司的定位是什么？你的服務(wù)對(duì)象是誰(shuí)？那么剩下的問題就是，我們?cè)撛趺醋隹梢詽M足他/她/它們的需求，解決他們的痛點(diǎn)。

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

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

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

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

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

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

 

吸引力夠不夠

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

A wealth of information leads to a poverty of attention.

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

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

設(shè)計(jì)體現(xiàn)點(diǎn)：文案、字號(hào)、字間距、版式、層級(jí)關(guān)系。

△ 圖片來自ENJOY、PAPER

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

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

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

 

用戶體驗(yàn)好不好

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

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

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

△ 圖片來自FUNNEL

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

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

 

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

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

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

△ 圖片來自融360、FANCY

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

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

 

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

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

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

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

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

△ 圖片來自融360

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

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