每一天，人們都淹沒(méi)在信息的海洋中。用戶(hù)在主動(dòng)獲取和被動(dòng)接受過(guò)程中，都始終避免不開(kāi)一個(gè)“效率”的訴求。在這信息海洋，用戶(hù)目前面對了什么樣的困境呢？
作為信息傳達的設計師，如何讓信息更直觀(guān)清晰、剔除不確定性理解，是工作中的重中之重。而“可視化”就是多種高效傳遞信息方式中的一種，對于信息可視化、視覺(jué)化、圖形化，也成了設計圈熱捧的觀(guān)點(diǎn)和研究方向。
對于產(chǎn)品的可視化設計，主要旨在借助于圖形化等直觀(guān)手段，清晰有效地傳達與溝通信息，形成高效的功能、使用映射，完成用戶(hù)任務(wù)目標。為用戶(hù)想完成的任務(wù)選擇正確的界面元素，通過(guò)一種能迅速理解和易于使用的表達方式，展現在頁(yè)面上，降低用戶(hù)的認知負擔和物理負擔。大概分為四個(gè)層次：功能可視化、結構可視化、操作可視化、控件可視化。
功能可視化：即確定需求優(yōu)先級的前提下，確保優(yōu)先級高的功能展現給用戶(hù)，讓用戶(hù)易于識別和查找，使設計有正確的層次結構。用戶(hù)對信息層次的理解需要兩個(gè)過(guò)程，首先是快速捕捉，其次是對具體內容更詳細的理解。在快速捕捉階段，其過(guò)程中時(shí)間跨度短暫，通過(guò)顏色、對比、定位等運用，突出產(chǎn)品的主要功能點(diǎn)。例如圖1韓國著(zhù)名門(mén)戶(hù)/搜索引擎網(wǎng)站Naver旗下的Naver Shopping，其產(chǎn)品定位即提供商品的搜索服務(wù)，通過(guò)搜索商品名稱(chēng)，可以按照商品類(lèi)別列出幾乎韓國所有的大型電子商務(wù)網(wǎng)站提供的該商品鏈接。所以在界面上，用強對比色調突出搜索功能和導航區。通過(guò)視覺(jué)化引導，讓用戶(hù)專(zhuān)注于核心內容，聚焦用戶(hù)視線(xiàn)的焦點(diǎn)，在白色為主色調的頁(yè)面，視線(xiàn)會(huì )先看到強色調的部分，所以也可以用強色調來(lái)突出核心內容，讓用戶(hù)的視覺(jué)聚焦在那里。
結構可視化：即采用用戶(hù)易于理解的結構，讓用戶(hù)對于界面元素關(guān)系清晰。如百度統計3.0的搜索推廣效果查看，結構采用了漏斗的圖形方式，達到真正的圖表于意，表達轉化率的概念，形象直觀(guān)。
流程可視化：即讓用戶(hù)在操作時(shí)不要迷失方向，幫助用戶(hù)定位，避免不明確操作的高成本。美國益智游戲網(wǎng)站Lumosity，在建立定制化大腦訓練計劃時(shí)的流程時(shí)，頂部采用步驟軸的圖形化方式，不僅用圖標“紅圈”表明了用戶(hù)所在的位置，也用圖標“對號”標明了用戶(hù)完成了哪些步驟，讓用戶(hù)對于整個(gè)流程熟悉。
控件可視化：由于控件是產(chǎn)品的最小界面元素，是產(chǎn)品質(zhì)量的基礎，所以本文重點(diǎn)與大家分享基礎控件的一些可視化案例。
控件是創(chuàng )建界面的主要構造模塊，是用戶(hù)可與之交互以輸入或操作數據的最直接對象?？丶枰脩?hù)消耗大量的注意力和鼠標操作，從可視化角度，示例以下四個(gè)元素的設計區別：
控件元素一：?jiǎn)芜x框
單選框（Radio Button），又叫選項按鈕或單選按鈕，它容許用戶(hù)在一組選項中選擇并且只能其中一個(gè)時(shí)使用的控件形式，選項之間彼此互斥。
圖4某產(chǎn)品界面，控件單選框使用錯誤，同時(shí)用戶(hù)必須在腦中想象空間位置，再轉化為對應文字，點(diǎn)擊兩次，輸入兩次，才能完成。
圖5修改后采用圖形化表達，直觀(guān)，并且減少用戶(hù)的點(diǎn)擊次數（一次）；當用戶(hù)輸入邊距時(shí)，在圖形中對應的邊距會(huì )出現動(dòng)態(tài)三角，給予用戶(hù)引導，防止用戶(hù)輸錯。
控件元素二：下拉列表控件
下拉列表（Drop-down List）相對于單選框，同時(shí)用于從一組互斥值列表中進(jìn)行選擇一個(gè)選項，不同的是下拉列表的按鈕數量通常較多。
圖6為新藥品查詢(xún)系統的下拉列表篩選控件，通過(guò)藥品形狀、顏色、類(lèi)型等進(jìn)行篩選，對于用戶(hù)來(lái)說(shuō)，認知成本較高，不夠形象化。
圖7Naver的醫療藥品的查找篩選控件，將品牌、藥品形狀、顏色、藥品材質(zhì)、藥面紋理等通過(guò)圖形化表達，使信息更直觀(guān)、形式更有趣，增強用戶(hù)的認知能力，提升操作效率，集合了趣味性與實(shí)用性。一圖勝千言，但同時(shí)要平衡空間占用和頁(yè)面加載成本等因素。
控件元素三：樹(shù)形控件
樹(shù)型控件是供用戶(hù)瀏覽按分層方式排列的內容，并可與這些內容互動(dòng)，進(jìn)行單選或多選的控件。
圖8淘寶商城_廚房用具二級頁(yè)的樹(shù)形篩選控件，比如用戶(hù)要查找高壓鍋，對于一般新手用戶(hù)，會(huì )來(lái)回點(diǎn)擊廚房/餐飲用具的子分類(lèi)，展開(kāi)子分類(lèi)，然后掃視每行字是否有高壓鍋，直到確認找到。樹(shù)形控件承載的信息越多，認知的負擔就會(huì )越重，瀏覽查找越困難。新手用戶(hù)可能無(wú)法完全理解樹(shù)的布局，只有當他們在對樹(shù)操作一段時(shí)間之后可能會(huì )形成一個(gè)關(guān)于其關(guān)系的心理模型，成本較高。
圖9 Naver Shopping_廚房用具二級頁(yè)的分類(lèi)篩選，采用了圖標加文字的形式，同樣是查找高壓鍋，雖然是韓語(yǔ)，但是恰當的使用具象化圖標，使用戶(hù)基本上看懂，可以縮短用戶(hù)操作時(shí)間，讓用戶(hù)更快捷地找到目標鏈接。對于中高級用戶(hù)，對網(wǎng)站更加熟悉后，圖標就更方便了。
與軟件的設計主要針對中間級用戶(hù)的不同，web界面設計需要針對新手及初級用戶(hù)。用戶(hù)在網(wǎng)站上愿意為之所付出的學(xué)習成本更低，更加缺乏耐心，則web界面需要更直接，讓用戶(hù)認知過(guò)程更短。而文字本身并沒(méi)有視覺(jué)傳達功能，恰當的使用圖標，把要表述的功能可視化呈現給用戶(hù)，可以縮短用戶(hù)操作時(shí)間，往往效果更好。但也要根據用戶(hù)效率，否則會(huì )成為雞肋。
控件元素四：列表視圖
列表視圖（List View）是一個(gè)顯示項目集合的擴展列表框控件，用于通過(guò)單選或多選的方式，查看并操作一個(gè)數據對象集合。
圖10 SNS常用的好友分組和管理，采用列表的方式，列表目錄清晰，但用戶(hù)對其的選擇管理成本稍大，特別是對于批量管理復雜。
圖11 google+“圈子”，查看更直觀(guān)，批量管理操作也更簡(jiǎn)單，通過(guò)拖拽方式對用戶(hù)分組，強調對好友的少層級管理，保證頁(yè)面簡(jiǎn)潔，讓體驗變得有趣而可愛(ài)，更符合用戶(hù)的心理模型。
總之，圍繞著(zhù)“快、明確、高效”的信息傳遞定位，揭其根本從功能模塊、任務(wù)流程、界面控件元素、信息承載等方面去提升體驗的有效性和合理性，設計中根據目標受眾的需求、行為，合理運用可視化方式，使產(chǎn)品更易用，提高用戶(hù)體驗。
聯(lián)系客服
