轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   www.li-bodun.cn  )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來源：http://sudasuta.com/cooler-photo.html

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，   請點(diǎn)這里

       每一天，人們都淹沒在信息的海洋中。用戶在主動獲取和被動接受過程中，都始終避免不開一個“效率”的訴求。在這信息海洋，用戶目前面對了什么樣的困境呢？

        1  一些設(shè)計(jì)細(xì)節(jié)的 “隱藏式”、“折疊式”、“漸進(jìn)式”設(shè)計(jì)消耗了用戶的快速認(rèn)知訴求；

        2  偏于復(fù)雜和龐大的功能，給界面呈現(xiàn)帶來了負(fù)擔(dān)，加重了用戶操作映射的錯亂，讓用戶理解也模棱兩可；

        3  設(shè)計(jì)過多的操作點(diǎn)擊，用戶手部肌肉不停運(yùn)動，切換不同頁面去查看；

        ……

       作為信息傳達(dá)的設(shè)計(jì)師，如何讓信息更直觀清晰、剔除不確定性理解，是工作中的重中之重。而“可視化”就是多種傳遞信息方式中的一種，對于信息可視化、視覺化、圖形化，也成了設(shè)計(jì)圈熱捧的觀點(diǎn)和研究方向。

       對于產(chǎn)品的可視化設(shè)計(jì)，主要旨在借助于圖形化等直觀手段，清晰有效地傳達(dá)與溝通信息，形成的功能、使用映射，完成用戶任務(wù)目標(biāo)。為用戶想完成的任務(wù)選擇正確的界面元素，通過一種能迅速理解和易于使用的表達(dá)方式，展現(xiàn)在頁面上，降低用戶的認(rèn)知負(fù)擔(dān)和物理負(fù)擔(dān)。大概分為四個層次：功能可視化、結(jié)構(gòu)可視化、操作可視化、控件可視化。

       功能可視化：即確定需求優(yōu)先級的前提下，確保優(yōu)先級高的功能展現(xiàn)給用戶，讓用戶易于識別和查找，使設(shè)計(jì)有正確的層次結(jié)構(gòu)。用戶對信息層次的理解需要兩個過程，首先是快速捕捉，其次是對具體內(nèi)容更詳細(xì)的理解。在快速捕捉階段，其過程中時間跨度短暫，通過顏色、對比、定位等運(yùn)用，突出產(chǎn)品的主要功能點(diǎn)。例如圖1韓國著名門戶/搜索引擎網(wǎng)站Naver旗下的Naver Shopping，其產(chǎn)品定位即提供商品的搜索服務(wù)，通過搜索商品名稱，可以按照商品類別列出幾乎韓國所有的大型電子商務(wù)網(wǎng)站提供的該商品鏈接。所以在界面上，用強(qiáng)對比色調(diào)突出搜索功能和導(dǎo)航區(qū)。通過視覺化引導(dǎo)，讓用戶專注于核心內(nèi)容，聚焦用戶視線的焦點(diǎn)，在白色為主色調(diào)的頁面，視線會先看到強(qiáng)色調(diào)的部分，所以也可以用強(qiáng)色調(diào)來突出核心內(nèi)容，讓用戶的視覺聚焦在那里。

       結(jié)構(gòu)可視化：即采用用戶易于理解的結(jié)構(gòu)，讓用戶對于界面元素關(guān)系清晰。如百度統(tǒng)計(jì)3.0的搜索推廣效果查看，結(jié)構(gòu)采用了漏斗的圖形方式，達(dá)到真正的圖表于意，表達(dá)轉(zhuǎn)化率的概念，形象直觀。

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

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

       控件是創(chuàng)建界面的主要構(gòu)造模塊，是用戶可與之交互以輸入或操作數(shù)據(jù)的最直接對象。控件需要用戶消耗大量的注意力和鼠標(biāo)操作，從可視化角度，示例以下四個元素的設(shè)計(jì)區(qū)別：

       控件元素一：單選框

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

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

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

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

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

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

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

       控件元素三：樹形控件

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

       圖8淘寶商城_廚房用具二級頁的樹形篩選控件，比如用戶要查找高壓鍋，對于一般新手用戶，會來回點(diǎn)擊廚房/餐飲用具的子分類，展開子分類，然后掃視每行字是否有高壓鍋，直到確認(rèn)找到。樹形控件承載的信息越多，認(rèn)知的負(fù)擔(dān)就會越重，瀏覽查找越困難。新手用戶可能無法完全理解樹的布局，只有當(dāng)他們在對樹操作一段時間之后可能會形成一個關(guān)于其關(guān)系的心理模型，成本較高。

       圖9 Naver Shopping_廚房用具二級頁的分類篩選，采用了圖標(biāo)加文字的形式，同樣是查找高壓鍋，雖然是韓語，但是恰當(dāng)?shù)氖褂镁呦蠡瘓D標(biāo)，使用戶基本上看懂，可以縮短用戶操作時間，讓用戶更快捷地找到目標(biāo)鏈接。對于中高級用戶，對網(wǎng)站更加熟悉后，圖標(biāo)就更方便了。

       與軟件的設(shè)計(jì)主要針對中間級用戶的不同，web界面設(shè)計(jì)需要針對新手及初級用戶。用戶在網(wǎng)站上愿意為之所付出的學(xué)習(xí)成本更低，更加缺乏耐心，則web界面需要更直接，讓用戶認(rèn)知過程更短。而文字本身并沒有視覺傳達(dá)功能，恰當(dāng)?shù)氖褂脠D標(biāo)，把要表述的功能可視化呈現(xiàn)給用戶，可以縮短用戶操作時間，往往效果更好。但也要根據(jù)用戶效率，否則會成為雞肋。

       控件元素四：列表視圖

       列表視圖（List View）是一個顯示項(xiàng)目集合的擴(kuò)展列表框控件，用于通過單選或多選的方式，查看并操作一個數(shù)據(jù)對象集合。

       圖10 SNS常用的好友分組和管理，采用列表的方式，列表目錄清晰，但用戶對其的選擇管理成本稍大，特別是對于批量管理復(fù)雜。

       圖11 google+“圈子”，查看更直觀，批量管理操作也更簡單，通過拖拽方式對用戶分組，強(qiáng)調(diào)對好友的少層級管理，保證頁面簡潔，讓體驗(yàn)變得有趣而可愛，更符合用戶的心理模型。

       總之，圍繞著“快、明確、”的信息傳遞定位，揭其根本從功能模塊、任務(wù)流程、界面控件元素、信息承載等方面去提升體驗(yàn)的有效性和合理性，設(shè)計(jì)中根據(jù)目標(biāo)受眾的需求、行為，合理運(yùn)用可視化方式，使產(chǎn)品更易用，提高用戶體驗(yàn)。