五個點教你判斷好的UI設(shè)計

2017-12-16 21:21 作者:尹訓(xùn)標(biāo) 0人讀過 | 我要投稿

轉(zhuǎn)載聲明：本文轉(zhuǎn)自【融360RUX】

ID：rong360rux

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

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

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

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

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

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

通常意義來講，目標(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ī)，為了更適用于廣泛的受眾群。

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

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

/ 吸引力夠不夠 /

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

A wealth of information leads to a poverty of attention.”

“大量的信息會導(dǎo)致注意力的分散?！?

——Marty Neumeier

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

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

圖片來自ENJOY、PAPER

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

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

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

/ 用戶體驗好不好 /

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

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

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

圖片來自FUNNEL

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

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

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

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

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

圖片來自融360、FANCY

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

(圖2)Fancy 社區(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ù)操作下一步了，整個交互很流暢。

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

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

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