一個醉漢引發(fā)的Web端界面設(shè)計思考
2015-10-30 劉亞業(yè)，孫璟澤 鵜鶘全面客戶體驗管理
有一個關(guān)于醉漢的故事。故事講的是有一天醉漢不小心把鑰匙掉在地上，可是他并沒有去鑰匙掉落的地方去撿起他的鑰匙，而是去了一個離他不遠(yuǎn)的路燈下去尋找。當(dāng)路人問起為什么他不去鑰匙掉落的地方去尋找，他指著路燈回答說：“這里更加地明亮”。
這并不是一個新鮮的故事。但是它與我們現(xiàn)如今的很多生活場景又是何其地相似——現(xiàn)在是一個信息爆炸的時代，在瀏覽資訊或者查找信息的時候經(jīng)常匆匆一瞥，需要有一些凸顯的內(nèi)容或者亮點來快速地吸引我們的眼球。例如：
我們進(jìn)入某個網(wǎng)站、或者進(jìn)入某個手機(jī)應(yīng)用。一般會瀏覽位置靠前、或者比較突出的板塊，如果短時間找不到感興趣的內(nèi)容，就會失去耐心而離開。
我們在網(wǎng)購的時候，如果在搜索結(jié)果的前幾個頁面里看不到比較稱心的商品，也會有不耐煩的情緒。
我們在產(chǎn)品出現(xiàn)問題從網(wǎng)站上尋求幫助的時候，如果不能快速找到商家的服務(wù)電話或者在線客服，心中對該商家的印象也會大打折扣。
一 案例
我們先看看幾種不同風(fēng)格的Web門戶頁面，不同的設(shè)計我們會有什么樣的感受。
1.網(wǎng)易首頁面：
該頁面給人第一印象是密密麻麻好多內(nèi)容，如果要從中找到我們需要的信息，感覺有點眼暈，更別提去尋找感興趣的東西；而且導(dǎo)航欄里的條目過多，戶很難記住頁面里都有什么功能；另外還有四處漂浮的廣告，不免讓人感覺亂糟糟的。
2.新浪新聞首頁面：
新浪新聞頁面導(dǎo)航分類比較清晰，但是各個板塊布局非常的擁擠，字體顏色也比較混亂，用戶容易產(chǎn)生煩躁的情緒，并且比較難以區(qū)分并記憶各個板塊的功能及內(nèi)容。頁面整體色調(diào)比較激烈，容易讓用戶產(chǎn)生不適的感覺。
3. 澎湃新聞首頁面：
界面布局比較清晰，各版塊分割地比較條理，整體色系讓人舒適、重點信息也比較凸顯（如推薦藍(lán)色提示標(biāo)）。
二 Web端界面設(shè)計思考
我們經(jīng)常會發(fā)現(xiàn)，在展示的頁面明明有設(shè)計某項功能或包含某項內(nèi)容，可是用戶就是看不到。
要找到原因，我們得了解人們?yōu)g覽網(wǎng)頁的習(xí)慣。
- 在瀏覽頁面的時候，很少會有用戶一行一行仔細(xì)的去閱讀，現(xiàn)在是資訊爆炸的時代，人們?yōu)g覽網(wǎng)頁、資訊的時候，往往是跳躍式的閱讀，而且經(jīng)常只關(guān)注頁面凸顯的信息。
- 在進(jìn)行頁面操作的時候，很少有人看網(wǎng)頁說明，明了之后再做操作。就像我們購買的家電，經(jīng)常會直接上手去用。用戶會進(jìn)行一段時間的試錯操作，如果頁面功能設(shè)計比較合理，圖標(biāo)比較通用，那么就會很快地熟悉網(wǎng)頁，否則，多次試錯未果，用戶就會離開。
- 用戶往往喜歡比較“親善”的頁面，不喜歡進(jìn)行思考?！坝H善”指的是，使用難度低，不用花時間或精力去理解，某個詞語是什么意思，哪里是可以點擊的地方，哪里有自己感興趣的東西。用戶瀏覽頁面的時候，想要快速地了解其包含的功能以及每個功能怎么去使用。因此用戶不會去對自己有疑問的地方去思考。而要解決這個問題，就要了解用戶的需求、用戶的使用習(xí)慣，從用戶的需求、使用習(xí)慣去設(shè)計產(chǎn)品，并且要使用通俗易懂的語言。
那么如何讓用戶對界面設(shè)計產(chǎn)生良好的感知呢？
界面設(shè)計是一個復(fù)雜的有不同學(xué)科參與的工程，認(rèn)知心理學(xué)、設(shè)計學(xué)、語言學(xué)等在此都扮演著重要的角色。用戶界面是用戶與程序溝通的唯一途徑，要能為用戶提供方便有效的服務(wù)。而要達(dá)到這個目的，我們可以從以下幾點來做到：
- 界面色系不可給用戶帶來不良情緒。色彩純度、明度、飽和度低的衣服一般看起來會相對比較高檔，根本原因是亮色系容易給用戶情緒帶來刺激，瀏覽亮色系頁面時間長的話也會引起眼睛疲勞等不適反應(yīng)。
- 界面要簡潔。這樣做的目的是讓用戶便于使用、便于了解、并能減少用戶發(fā)生錯誤選擇的可能性。
- 建立有效的視覺層次。這是每一個優(yōu)秀界面都具備的特點，界面的結(jié)構(gòu)必須清晰且一致。
- 板塊分割要條理。混亂的版塊分割不僅會影響客戶的情緒，也對客戶尋找信息造成了一定的困擾。
- 適當(dāng)?shù)牧舭住?/b>版塊間適當(dāng)?shù)牧舭讜o用戶帶來輕松的感覺，也使得頁面布局比較清晰。
- 各板塊里的內(nèi)容布局要清晰合理。展現(xiàn)方式不宜過多，圖表、動圖、文字等混合使用時要謹(jǐn)慎，不然容易讓用戶產(chǎn)生混亂的感覺。內(nèi)容不宜大量堆積，這樣做的目的是防止用戶因為信息量過大而喪失瀏覽的欲望。
- 同類型版塊格式要一致。這樣會讓頁面顯得整齊、信息更加快速地被瀏覽。
- 重點、概括信息的獨立放置與凸顯。如版塊名稱、標(biāo)題的凸顯，會使得用戶快速的了解頁面功能與頁面所包含信息的概要。
- 盡量使用用戶的習(xí)慣用法。界面中的LOGO、內(nèi)容，用客戶習(xí)慣的、通用的方式去展示，不要用設(shè)計者自定義的展現(xiàn)形式。用戶可通過已掌握的知識來使用界面，比如“購物車”、“設(shè)置”、“停止”功能，應(yīng)使用通用或者用戶習(xí)慣的方式去展現(xiàn)。
- 明顯標(biāo)識可以點擊的地方。要讓用戶清晰的知道，哪些地方是可以點擊的，可以再進(jìn)一步了解信息。
- 要有必要的提示。在用戶作出有風(fēng)險的選擇時要有信息介入系統(tǒng)的提示，比如”注銷信息“，”刪除某項內(nèi)容“。
參考資料：
《點石成金——訪客至上的web和移動可用性設(shè)計秘笈》Steve Krug 著 蔣芳 譯
漲姿勢！為什么有的顏色看起來非常高檔？
本文為作者原創(chuàng)作品，歡迎直接微信轉(zhuǎn)發(fā)。
轉(zhuǎn)載時需在文章開頭注明作者和“來源鵜鶘全面客戶體驗管理（微信號：CEM-tihu）“，文字顏色為黑色，且不得修改原文內(nèi)容。
歡迎小伙伴投稿合作，具體請聯(lián)系：易女士
Yiml@tihu.com.cn
