視覺設(shè)計(jì)的高效可視化(2)

       流程可視化：即讓用戶在操作時(shí)不要迷失方向，幫助用戶定位，避免不明確操作的高成本。美國(guó)益智游戲網(wǎng)站Lumosity，在建立定制化大腦訓(xùn)練計(jì)劃時(shí)的流程時(shí)，頂部采用步驟軸的圖形化方式，不僅用圖標(biāo)“紅圈”表明了用戶所在的位置，也用圖標(biāo)“對(duì)號(hào)”標(biāo)明了用戶完成了哪些步驟，讓用戶對(duì)于整個(gè)流程熟悉。

       控件可視化：由于控件是產(chǎn)品的最小界面元素，是產(chǎn)品質(zhì)量的基礎(chǔ)，所以本文重點(diǎn)與大家分享基礎(chǔ)控件的一些可視化案例。

       控件是創(chuàng)建界面的主要構(gòu)造模塊，是用戶可與之交互以輸入或操作數(shù)據(jù)的最直接對(duì)象?？丶枰脩粝拇罅康淖⒁饬褪髽?biāo)操作，從可視化角度，示例以下四個(gè)元素的設(shè)計(jì)區(qū)別：

       控件元素一：?jiǎn)芜x框

       單選框（Radio Button），又叫選項(xiàng)按鈕或單選按鈕，它容許用戶在一組選項(xiàng)中選擇并且只能其中一個(gè)時(shí)使用的控件形式，選項(xiàng)之間彼此互斥。

       圖4某產(chǎn)品界面，控件單選框使用錯(cuò)誤，同時(shí)用戶必須在腦中想象空間位置，再轉(zhuǎn)化為對(duì)應(yīng)文字，點(diǎn)擊兩次，輸入兩次，才能完成。

       圖5修改后采用圖形化表達(dá)，直觀，并且減少用戶的點(diǎn)擊次數(shù)（一次）；當(dāng)用戶輸入邊距時(shí)，在圖形中對(duì)應(yīng)的邊距會(huì)出現(xiàn)動(dòng)態(tài)三角，給予用戶引導(dǎo)，防止用戶輸錯(cuò)。

       控件元素二：下拉列表控件

       下拉列表（Drop-down List）相對(duì)于單選框，同時(shí)用于從一組互斥值列表中進(jìn)行選擇一個(gè)選項(xiàng)，不同的是下拉列表的按鈕數(shù)量通常較多。

       圖6為新藥品查詢系統(tǒng)的下拉列表篩選控件，通過(guò)藥品形狀、顏色、類型等進(jìn)行篩選，對(duì)于用戶來(lái)說(shuō)，認(rèn)知成本較高，不夠形象化。

       圖7Naver的醫(yī)療藥品的查找篩選控件，將品牌、藥品形狀、顏色、藥品材質(zhì)、藥面紋理等通過(guò)圖形化表達(dá)，使信息更直觀、形式更有趣，增強(qiáng)用戶的認(rèn)知能力，提升操作效率，集合了趣味性與實(shí)用性。一圖勝千言，但同時(shí)要平衡空間占用和頁(yè)面加載成本等因素。

       控件元素三：樹形控件

       樹型控件是供用戶瀏覽按分層方式排列的內(nèi)容，并可與這些內(nèi)容互動(dòng)，進(jìn)行單選或多選的控件。