一個醉漢引發的Web端界面設計思考
2015-10-30 劉亞業,孫璟澤 鵜鶘全面客戶體驗管理
有一個關于醉漢的故事。故事講的是有一天醉漢不小心把鑰匙掉在地上,可是他并沒有去鑰匙掉落的地方去撿起他的鑰匙,而是去了一個離他不遠的路燈下去尋找。當路人問起為什么他不去鑰匙掉落的地方去尋找,他指著路燈回答說:“這里更加地明亮”。
這并不是一個新鮮的故事。但是它與我們現如今的很多生活場景又是何其地相似——現在是一個信息爆炸的時代,在瀏覽資訊或者查找信息的時候經常匆匆一瞥,需要有一些凸顯的內容或者亮點來快速地吸引我們的眼球。例如:
我們進入某個網站、或者進入某個手機應用。一般會瀏覽位置靠前、或者比較突出的板塊,如果短時間找不到感興趣的內容,就會失去耐心而離開。
我們在網購的時候,如果在搜索結果的前幾個頁面里看不到比較稱心的商品,也會有不耐煩的情緒。
我們在產品出現問題從網站上尋求幫助的時候,如果不能快速找到商家的服務電話或者在線客服,心中對該商家的印象也會大打折扣。
一 案例
我們先看看幾種不同風格的Web門戶頁面,不同的設計我們會有什么樣的感受。
1.網易首頁面:

該頁面給人第一印象是密密麻麻好多內容,如果要從中找到我們需要的信息,感覺有點眼暈,更別提去尋找感興趣的東西;而且導航欄里的條目過多,戶很難記住頁面里都有什么功能;另外還有四處漂浮的廣告,不免讓人感覺亂糟糟的。
2.新浪新聞首頁面:

新浪新聞頁面導航分類比較清晰,但是各個板塊布局非常的擁擠,字體顏色也比較混亂,用戶容易產生煩躁的情緒,并且比較難以區分并記憶各個板塊的功能及內容。頁面整體色調比較激烈,容易讓用戶產生不適的感覺。
3. 澎湃新聞首頁面:

界面布局比較清晰,各版塊分割地比較條理,整體色系讓人舒適、重點信息也比較凸顯(如推薦藍色提示標)。
二 Web端界面設計思考
我們經常會發現,在展示的頁面明明有設計某項功能或包含某項內容,可是用戶就是看不到。
要找到原因,我們得了解人們瀏覽網頁的習慣。
- 在瀏覽頁面的時候,很少會有用戶一行一行仔細的去閱讀,現在是資訊爆炸的時代,人們瀏覽網頁、資訊的時候,往往是跳躍式的閱讀,而且經常只關注頁面凸顯的信息。
- 在進行頁面操作的時候,很少有人看網頁說明,明了之后再做操作。就像我們購買的家電,經常會直接上手去用。用戶會進行一段時間的試錯操作,如果頁面功能設計比較合理,圖標比較通用,那么就會很快地熟悉網頁,否則,多次試錯未果,用戶就會離開。
- 用戶往往喜歡比較“親善”的頁面,不喜歡進行思考。“親善”指的是,使用難度低,不用花時間或精力去理解,某個詞語是什么意思,哪里是可以點擊的地方,哪里有自己感興趣的東西。用戶瀏覽頁面的時候,想要快速地了解其包含的功能以及每個功能怎么去使用。因此用戶不會去對自己有疑問的地方去思考。而要解決這個問題,就要了解用戶的需求、用戶的使用習慣,從用戶的需求、使用習慣去設計產品,并且要使用通俗易懂的語言。

那么如何讓用戶對界面設計產生良好的感知呢?
界面設計是一個復雜的有不同學科參與的工程,認知心理學、設計學、語言學等在此都扮演著重要的角色。用戶界面是用戶與程序溝通的唯一途徑,要能為用戶提供方便有效的服務。而要達到這個目的,我們可以從以下幾點來做到:
- 界面色系不可給用戶帶來不良情緒。色彩純度、明度、飽和度低的衣服一般看起來會相對比較高檔,根本原因是亮色系容易給用戶情緒帶來刺激,瀏覽亮色系頁面時間長的話也會引起眼睛疲勞等不適反應。

- 界面要簡潔。這樣做的目的是讓用戶便于使用、便于了解、并能減少用戶發生錯誤選擇的可能性。
- 建立有效的視覺層次。這是每一個優秀界面都具備的特點,界面的結構必須清晰且一致。
- 板塊分割要條理。混亂的版塊分割不僅會影響客戶的情緒,也對客戶尋找信息造成了一定的困擾。
- 適當的留白。版塊間適當的留白會給用戶帶來輕松的感覺,也使得頁面布局比較清晰。
- 各板塊里的內容布局要清晰合理。展現方式不宜過多,圖表、動圖、文字等混合使用時要謹慎,不然容易讓用戶產生混亂的感覺。內容不宜大量堆積,這樣做的目的是防止用戶因為信息量過大而喪失瀏覽的欲望。
- 同類型版塊格式要一致。這樣會讓頁面顯得整齊、信息更加快速地被瀏覽。
- 重點、概括信息的獨立放置與凸顯。如版塊名稱、標題的凸顯,會使得用戶快速的了解頁面功能與頁面所包含信息的概要。

- 盡量使用用戶的習慣用法。界面中的LOGO、內容,用客戶習慣的、通用的方式去展示,不要用設計者自定義的展現形式。用戶可通過已掌握的知識來使用界面,比如“購物車”、“設置”、“停止”功能,應使用通用或者用戶習慣的方式去展現。

- 明顯標識可以點擊的地方。要讓用戶清晰的知道,哪些地方是可以點擊的,可以再進一步了解信息。
- 要有必要的提示。在用戶作出有風險的選擇時要有信息介入系統的提示,比如”注銷信息“,”刪除某項內容“。
參考資料:
《點石成金——訪客至上的web和移動可用性設計秘笈》Steve Krug 著 蔣芳 譯
漲姿勢!為什么有的顏色看起來非常高檔?
本文為作者原創作品,歡迎直接微信轉發。
轉載時需在文章開頭注明作者和“來源鵜鶘全面客戶體驗管理(微信號:CEM-tihu)“,文字顏色為黑色,且不得修改原文內容。
歡迎小伙伴投稿合作,具體請聯系:易女士
Yiml@tihu.com.cn