來源：百度UEO
思考的來源
每一天，人們都淹沒在資訊的海洋中。使用者在主動獲取和被動接受過程中，都始終避免不開一個“效率”的訴求。在這資訊海洋，使用者目前面對了什麼樣的困境呢？
1 一些設計細節的 “隱藏式”、“摺疊式”、“漸進式”設計消耗了使用者的快速認知訴求；
2 偏於複雜和龐大的功能，給介面呈現帶來了負擔，加重了使用者操作對映的錯亂，讓使用者理解也模稜兩可；
3 設計過多的操作點選，使用者手部肌肉不停運動，切換不同頁面去檢視；
……
作為資訊傳達的設計師，如何讓資訊更直觀清晰、剔除不確定性理解，是工作中的重中之重。而“視覺化”就是多種高效傳遞資訊方式中的一種，對於資訊視覺化、視覺化、圖形化，也成了設計圈熱捧的觀點和研究方向。
視覺化概述
對於產品的視覺化設計，主要旨在藉助於圖形化等直觀手段，清晰有效地傳達與溝通訊息，形成高效的功能、使用對映，完成使用者任務目標。為使用者想完成的任務 選擇正確的介面元素，通過一種能迅速理解和易於使用的表達方式，展現在頁面上，降低使用者的認知負擔和物理負擔。大概分為四個層次：功能視覺化、結構可視 化、操作視覺化、控制元件視覺化。
功能視覺化：即確定需求優先順序的前提下，確保優先順序高的功能展現給用 戶，讓使用者易於識別和查詢，使設計有正確的層次結構。使用者對資訊層次的理解需要兩個過程，首先是快速捕捉，其次是對具體內容更詳細的理解。在快速捕捉階 段，其過程中時間跨度短暫，通過顏色、對比、定位等運用，突出產品的主要功能點。例如圖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+“圈子”，檢視更直觀，批量管理操作也更簡單，通過拖拽方式對使用者分組，強調對好友的少層級管理，保證頁面簡潔，讓體驗變得有趣而可愛，更符合使用者的心理模型。
總結
總之，圍繞著“快、明確、高效”的資訊傳遞定位，揭其根本從功能模組、任務流程、介面控制元件元素、資訊承載等方面去提升體驗的有效性和合理性，設計中根據目標受眾的需求、行為，合理運用視覺化方式，使產品更易用，提高使用者體驗。