每一天，人們都淹沒(méi)在信息的海洋中。用戶在主動(dòng)獲取和被動(dòng)接受過(guò)程中，都始終避免不開(kāi)一個(gè)“效率”的訴求。在這信息海洋，用戶目前面對(duì)了什么樣的困境呢?
一些設(shè)計(jì)細(xì)節(jié)的 “隱藏式”、“折疊式”、“漸進(jìn)式”設(shè)計(jì)消耗了用戶的快速認(rèn)知訴求;
偏于復(fù)雜和龐大的功能，給界面呈現(xiàn)帶來(lái)了負(fù)擔(dān)，加重了用戶操作映射的錯(cuò)亂，讓用戶理解也模棱兩可;
設(shè)計(jì)過(guò)多的操作點(diǎn)擊，用戶手部肌肉不停運(yùn)動(dòng)，切換不同頁(yè)面去查看;
⋯⋯
作為信息傳達(dá)的設(shè)計(jì)師，如何讓信息更直觀清晰、剔除不確定性理解，是工作中的重中之重。而“可視化”就是多種高效傳遞信息方式中的一種，對(duì)于信息可視化、視覺(jué)化、圖形化，也成了設(shè)計(jì)圈熱捧的觀點(diǎn)和研究方向。
對(duì)于產(chǎn)品的可視化設(shè)計(jì)，主要旨在借助于圖形化等直觀手段，清晰有效地傳達(dá)與溝通信息，形成高效的功能、使用映射，完成用戶任務(wù)目標(biāo)。為用戶想完成的任務(wù)選擇正確的界面元素，通過(guò)一種能迅速理解和易于使用的表達(dá)方式，展現(xiàn)在頁(yè)面上，降低用戶的認(rèn)知負(fù)擔(dān)和物理負(fù)擔(dān)。大概分為四個(gè)層次：功能可視化、結(jié)構(gòu)可視化、操作可視化、控件可視化。
功能可視化：即確定需求優(yōu)先級(jí)的前提下，確保優(yōu)先級(jí)高的功能展現(xiàn)給用戶，讓用戶易于識(shí)別和查找，使設(shè)計(jì)有正確的層次結(jié)構(gòu)。用戶對(duì)信息層次的理解需要兩個(gè)過(guò)程，首先是快速捕捉，其次是對(duì)具體內(nèi)容更詳細(xì)的理解。在快速捕捉階段，其過(guò)程中時(shí)間跨度短暫，通過(guò)顏色、對(duì)比、定位等運(yùn)用，突出產(chǎn)品的主要功能點(diǎn)。例如圖1韓國(guó)著名門戶/搜索引擎網(wǎng)站Naver旗下的Naver Shopping，其產(chǎn)品定位即提供商品的搜索服務(wù)，通過(guò)搜索商品名稱，可以按照商品類別列出幾乎韓國(guó)所有的大型電子商務(wù)網(wǎng)站提供的該商品鏈接。所以在界面上，用強(qiáng)對(duì)比色調(diào)突出搜索功能和導(dǎo)航區(qū)。通過(guò)視覺(jué)化引導(dǎo)，讓用戶專注于核心內(nèi)容，聚焦用戶視線的焦點(diǎn)，在白色為主色調(diào)的頁(yè)面，視線會(huì)先看到強(qiáng)色調(diào)的部分，所以也可以用強(qiáng)色調(diào)來(lái)突出核心內(nèi)容，讓用戶的視覺(jué)聚焦在那里。
結(jié)構(gòu)可視化：即采用用戶易于理解的結(jié)構(gòu)，讓用戶對(duì)于界面元素關(guān)系清晰。如百度統(tǒng)計(jì)3.0的搜索推廣效果查看，結(jié)構(gòu)采用了漏斗的圖形方式，達(dá)到真正的圖表于意，表達(dá)轉(zhuǎn)化率的概念，形象直觀。
流程可視化：即讓用戶在操作時(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è)面加載成本等因素。
推薦閱讀
<b>旅游網(wǎng)站運(yùn)營(yíng)之住哪聯(lián)盟、同程聯(lián)盟酒店合作之對(duì)比</b>
各位旅游站長(zhǎng)，大家好，我是一位普通的旅游站長(zhǎng)，我的網(wǎng)站是旅途人旅游網(wǎng)，這個(gè)網(wǎng)站分別上線一年。中間跟好多站長(zhǎng)一樣，都努力學(xué)習(xí)seo，做排名，我最好的成績(jī)做到百度第二，與旅行社合作是掙了一點(diǎn)小錢，可是總得看百>>>詳細(xì)閱讀
本文標(biāo)題：<b>網(wǎng)站用戶體驗(yàn)設(shè)計(jì)：高效的設(shè)計(jì)可視化</b>
地址：http://www.brh9h.cn/a/22/20120610/66582.html
網(wǎng)友點(diǎn)評(píng)
精彩導(dǎo)讀
科技快報(bào)
品牌展示