網站使用者體驗設計：高效的設計視覺化

仲介交易 SEO診斷 淘寶客 雲主機 技術大廳

每一天，人們都淹沒在資訊的海洋中。 使用者在主動獲取和被動接受過程中，都始終避免不開一個「效率」的訴求。 在這資訊海洋，使用者目前面對了什麼樣的困境呢?

一些設計細節的 「隱藏式」、「折疊式」、「漸進式」設計消耗了使用者的快速認知訴求;

偏于複雜和龐大的功能，給介面呈現帶來了負擔，加重了使用者操作映射的錯亂，讓使用者理解也模棱兩可;

設計過多的操作點擊，使用者手部肌肉不停運動，切換不同頁面去查看;

⋯⋯

作為資訊傳達的設計師，如何讓資訊更直觀清晰、剔除不確定性理解，是工作中的重中之重。 而「視覺化」就是多種高效傳遞資訊方式中的一種，對於資訊視覺化、視覺化、圖形化，也成了設計圈熱捧的觀點和研究方向。

對於產品的視覺化設計，主要旨在借助于圖形化等直觀手段，清晰有效地傳達與溝通資訊，形成高效的功能、使用映射，完成使用者任務目標。 為使用者想完成的任務選擇正確的介面元素，通過一種能迅速理解和便於使用的表達方式，展現在頁面上，降低使用者的認知負擔和物理負擔。 大概分為四個層次：功能視覺化、結構視覺化、操作視覺化、控制項視覺化。

功能視覺化：即確定需求優先順序的前提下，確保優先順序高的功能展現給使用者，讓使用者易於識別和查找，使設計有正確的層次結構。 使用者對資訊層次的理解需要兩個過程，首先是快速捕捉，其次是對具體內容更詳細的理解。 在快速捕捉階段，其過程中時間跨度短暫，通過顏色、對比、定位等運用，突出產品的主要功能點。 例如圖1韓國著名門戶/搜尋引擎網站Naver旗下的Naver Shopping，其產品定位即供應商品的搜索服務，通過搜索商品名稱，可以按照商品類別列出幾乎韓國所有的大型電子商務網站提供的該商品連結。 所以在介面上，用強對比色調突出搜索功能和導航區。 通過視覺化引導，讓使用者專注于核心內容，聚焦使用者視線的焦點，在白色為主色調的頁面，視線會先看到強色調的部分，所以也可以用強色調來突出核心內容，讓使用者的視覺聚焦在那裡。

結構視覺化：即採用使用者易於理解的結構，讓使用者對於介面元素關係清晰。 如百度統計3.0的搜索推廣效果查看，結構採用了漏斗的圖形方式，達到真正的圖表于意，表達轉化率的概念，形象直觀。

流程視覺化：即讓使用者在操作時不要迷失方向，説明使用者定位，避免不明確操作的高成本。 美國益智遊戲網站Lumosity，在建立定制化大腦訓練計畫時的流程時，頂部採用步驟軸的圖形化方式，不僅用圖示「紅圈」表明了使用者所在的位置，也用圖示「對號」標明瞭使用者完成了哪些步驟，讓使用者對於整個流程熟悉。

控制項視覺化：由於控制項是產品的最小介面元素，是產品品質的基礎，所以本文重點與大家分享基礎控制項的一些視覺化案例。

控制項是創建介面的主要構造模組，是使用者可與之交互以輸入或運算元據的最直接物件。 控制項需要使用者消耗大量的注意力和滑鼠操作，從視覺化角度，示例以下四個元素的設計區別：

控制項元素一：單選框

單選框(Radio Button)，又叫選項按鈕或選項按鈕，它容許使用者在一組選項中選擇並且只能其中一個時使用的控制項形式，選項之間彼此互斥。

圖4某產品介面，控制項單選框使用錯誤，同時使用者必須在腦中想像空間位置，再轉化為對應文字，點擊兩次，輸入兩次，才能完成。

圖5修改後採用圖形化表達，直觀，並且減少使用者的點擊次數(一次);當使用者輸入邊距時，在圖形中對應的邊距會出現動態三角，給予使用者引導，防止使用者輸錯。

控制項元素二：下拉清單控制項

下拉清單(Drop-down List)相對於單選框，同時用於從一組互斥值清單中進行選擇一個選項，不同的是下拉清單的按鈕數量通常較多。

圖6為新藥品查詢系統的下拉清單篩選控制項，通過藥品形狀、顏色、類型等進行篩選，對於使用者來說，認知成本較高，不夠形象化。

圖7Naver的醫療藥品的查找篩選控制項，將品牌、藥品形狀、顏色、藥品材質、藥面紋理等通過圖形化表達，使資訊更直觀、形式更有趣，增強使用者的認知能力，提升操作效率，集合了趣味性與實用性。 一圖勝千言，但同時要平衡空間佔用和頁面載入成本等因素。

控制項元素三：樹形控制項

樹型控制項是供使用者流覽按分層方式排列的內容，並可與這些內容互動，進行單選或多選的控制項。

圖8淘寶商城_廚房用具二級頁的樹形篩選控制項，比如使用者要查找高壓鍋，對於一般新手使用者，會來回點擊廚房/餐飲用具的子分類，展開子分類，然後掃視每行字是否有高壓鍋，直到確認找到。 樹形控制項承載的資訊越多，認知的負擔就會越重，流覽查找越困難。 新手使用者可能無法完全理解樹的佈局，只有當他們在對樹操作一段時間之後可能會形成一個關於其關係的心理模型，成本較高。

圖9 Naver Shopping_廚房用具二級頁的分類篩選，採用了圖示加文字的形式，同樣是查找高壓鍋，雖然是韓語，但是恰當的使用具象化圖示，使使用者基本上看懂，可以縮短使用者操作時間，讓使用者更快捷地找到目標連結。 對於中高級使用者，對網站更加熟悉後，圖示就更方便了。

與軟體的設計主要針對中間級使用者的不同，web介面設計需要針對新手及初級使用者。 使用者在網站上願意為之所付出的學習成本更低，更加缺乏耐心，則web介面需要更直接，讓使用者認知過程更短。 而文字本身並沒有視覺傳達功能，恰當的使用圖示，把要表述的功能視覺化呈現給使用者，可以縮短使用者操作時間，往往效果更好。 但也要根據使用者效率，否則會成為雞肋。

控制項元素四：清單視圖

清單視圖(List View)是一個顯示專案集合的擴展清單方塊控制項，用於通過單選或多選的方式，查看並操作一個資料物件集合。

圖10 SNS常用的好友分組和管理，採用清單的方式，清單目錄清晰，但使用者對其的選擇管理成本稍大，特別是對於批量管理複雜。

圖11 google+「圈子」，查看更直觀，批量管理操作也更簡單，通過拖拽方式對使用者分組，強調對好友的少層級管理，保證頁面簡潔，讓體驗變得有趣而可愛，更符合使用者的心理模型。

總之，圍繞著「快、明確、高效」的資訊傳遞定位，揭其根本從功能模組、任務流程、介面控制項元素、資訊承載等方面去提升體驗的有效性和合理性，設計中根據目標受眾的需求、行為，合理運用視覺化方式，使產品更易用，提高使用者體驗。

來源：UEO

原文:HTTP://ueo.baidu.com/?p=1126