作為WIMP(Window/Icon/Menu/Pointing Device)界面設(shè)計(jì)的關(guān)鍵部分,圖標(biāo)在人機(jī)交互設(shè)計(jì)中無(wú)所不在。隨著人們對(duì)審美、時(shí)尚、趣味的不斷追求,圖標(biāo)設(shè)計(jì)也不斷花樣翻新
,越來(lái)越多精美、新穎、富有創(chuàng)造力和想像力的圖標(biāo)充斥著我們的視界??墒?,從可用性的角度講,并不是越花哨的圖標(biāo)越被用戶所接受,圖標(biāo)的可用性要回到它的基本功用去思考。
圖標(biāo)的功用在于建立起計(jì)算機(jī)世界與真實(shí)世界的一種隱喻,或者映射關(guān)系。用戶通過(guò)這種隱喻,自動(dòng)地理解圖標(biāo)背后的意義,跨越了語(yǔ)言的界限。但是,如果這種映射關(guān)系不能被用戶輕松并且準(zhǔn)確地理解,那么這種圖標(biāo)就不應(yīng)是好的圖標(biāo)。因此,圖標(biāo)的設(shè)計(jì)應(yīng)該遵守以下的原則。
圖標(biāo)的可用性原則一:圖標(biāo)指向的映射關(guān)系應(yīng)該盡可能的直接、簡(jiǎn)單。
可能與我們的直覺(jué)相反,一些研究顯示圖標(biāo)界面與文本界面的比較中,并沒(méi)有體現(xiàn)出明顯的優(yōu)越性,一個(gè)主要原因就是文字和意義的映射是直接的,而圖標(biāo)與意義的映射卻不一定是直接和明顯的。
在壞的圖標(biāo)設(shè)計(jì)中,用戶需要花費(fèi)幾秒鐘甚至更長(zhǎng)的時(shí)間去猜測(cè)圖標(biāo)代表的意義,而且還很可能猜錯(cuò),錯(cuò)誤的理解導(dǎo)致錯(cuò)誤的操作,錯(cuò)誤的操作導(dǎo)致糟糕的結(jié)果,這決不是美妙的用戶體驗(yàn),即便從美學(xué)角度講那個(gè)圖標(biāo)可能是上佳的藝術(shù)作品。
“直接”的意思是:不要繞彎。圖標(biāo)展現(xiàn)的視覺(jué)表象與其背后的意義只需要很短的意義路徑即可連結(jié)。譬如對(duì)于“剪切”操作,使用“在文稿上打×”的圖標(biāo)形象比“剪刀”的圖標(biāo)形象更易理解,因?yàn)榍罢吲c剪切操作有更短的意義路徑,盡管“剪刀”圖標(biāo)顯得更加生動(dòng)活潑。
認(rèn)知心理學(xué)家提出過(guò)一個(gè)激活擴(kuò)散模型,就是在人的知識(shí)和概念體系中,當(dāng)一個(gè)概念被加工或受到刺激時(shí),該概念結(jié)點(diǎn)就產(chǎn)生激活,然后激活與該結(jié)點(diǎn)直接相連的多個(gè)連結(jié),并繼續(xù)向四周擴(kuò)散。與當(dāng)前概念在概念網(wǎng)絡(luò)上的連結(jié)關(guān)系決定了其被激活的強(qiáng)度。這種連結(jié)關(guān)系取決于人的知識(shí)體系的組織架構(gòu)(即兩個(gè)概念是否屬于同一類(lèi)別)和概念同時(shí)出現(xiàn)或使用的頻率。
例如在人的知識(shí)和概念架構(gòu)中,在紙質(zhì)文稿上寫(xiě)字和在電腦上寫(xiě)字都屬于撰寫(xiě)文檔的類(lèi)別,那么當(dāng)“在文稿上打×”的圖標(biāo)形象出現(xiàn)時(shí),被試就會(huì)快速地聯(lián)想到在電腦上進(jìn)行剪切操作。而“剪刀”的視覺(jué)形象最易歸屬到“衣服裁剪”或“手工勞動(dòng)”這樣的類(lèi)別中去,因此映射關(guān)系具有教長(zhǎng)的路徑和較弱的連結(jié)強(qiáng)度。因此在圖標(biāo)設(shè)計(jì)中,設(shè)計(jì)師應(yīng)該仔細(xì)考慮或者直接去調(diào)查用戶的知識(shí)體系,找到最短的概念連結(jié)。
圖標(biāo)的可用性原則二:每個(gè)圖標(biāo)指向的映射關(guān)系應(yīng)該是唯一的。
這個(gè)原則的意思就是,不要讓圖標(biāo)產(chǎn)生歧義。想像一下,一個(gè)“飛旋的車(chē)輪”圖標(biāo),它代表了什么?也許設(shè)計(jì)者的本意,是要用車(chē)輪的移動(dòng)來(lái)象征電腦中文件的移動(dòng)操作。可是,用戶也許猜測(cè)出了其他十幾種對(duì)應(yīng)關(guān)系,比如一款3D賽車(chē)游戲。這個(gè)原則其實(shí)還有一個(gè)推論原則:
不要使用過(guò)于復(fù)雜的圖標(biāo)。
因?yàn)閳D標(biāo)的視覺(jué)元素越多,那么其意義指向的可能性就越多,用戶越有可能從各種各樣的角度去解讀,那么該圖標(biāo)的可用性就可能越差。
圖標(biāo)的可用性原則三:同一個(gè)圖標(biāo)系列中,最好使用相同的映射模式。
在真實(shí)世界與計(jì)算機(jī)世界(或網(wǎng)絡(luò)世界)的對(duì)應(yīng)中,存在很多種映射模式。筆者粗粗地歸納下,可以發(fā)現(xiàn)這樣幾種映射模式:外觀映射、功能映射、語(yǔ)詞(字母)映射、部分指代映射和綜合映射。在同一個(gè)系列圖標(biāo)中,用戶極易對(duì)圖標(biāo)形成某種固定的映射模式,如果突然出現(xiàn)了另一種模式的映射,用戶可能仍將延用先前形成的思維定勢(shì)進(jìn)行理解,從而出現(xiàn)理解困難或理解偏差。
圖標(biāo)的可用性原則四:最好使用簡(jiǎn)短文字做為圖標(biāo)的冗余編碼。
在信息傳播的過(guò)程中,增加信息的冗余度是保證信息傳輸?shù)目煽啃缘淖钣行У姆椒?。在人機(jī)交互設(shè)計(jì)中,最常見(jiàn)的冗余編碼就是紅綠燈,即每個(gè)顏色皆對(duì)應(yīng)位置,使得在人口中占具相當(dāng)比例的色盲人群也可以通過(guò)燈的位置來(lái)接收是否可以通行的信息。圖標(biāo)設(shè)計(jì)也需要增加冗余編碼,以保證絕大多數(shù)的人都能夠快速、準(zhǔn)確地理解圖標(biāo)的含義。一個(gè)很好的例子出現(xiàn)在手機(jī)主菜單的設(shè)計(jì)中,下面看兩種常見(jiàn)的手機(jī)主菜單的設(shè)計(jì):
圖一、諾基亞N95的主菜單
圖二、阿爾卡特OT-C825的主菜單
在圖一中的圖標(biāo)都在下方加注了簡(jiǎn)單的文字,和圖標(biāo)一起形成冗余編碼。這樣即使用戶是第一次使用該手機(jī),也能避免圖標(biāo)選擇錯(cuò)誤。而圖二的圖標(biāo)沒(méi)有將文字直接標(biāo)注在圖標(biāo)下方,而是在只有選中某個(gè)圖標(biāo)的情況下,在屏幕上方顯示文字標(biāo)注,這樣無(wú)疑增加了用戶操作的負(fù)擔(dān)。盡管某些圖標(biāo),用戶很容易理解其含義,比如圖二中第二行第一個(gè)“相機(jī)”圖標(biāo),用戶很容易清楚這是指拍照功能;但有些圖標(biāo),在沒(méi)有文字標(biāo)注的情況下,還是令人費(fèi)解,比如圖二中第四行第一個(gè)“禮品盒”圖標(biāo)。因此,筆者認(rèn)為,在大多數(shù)情況下,給圖標(biāo)加注文字是比較好的選擇。
最后,我要說(shuō)明的是,圖標(biāo)設(shè)計(jì)中的可用性原則與圖標(biāo)的美學(xué)考慮在實(shí)踐中可能存在矛盾,這時(shí)候權(quán)衡兩者是必須的。好的可用性可以讓用戶更方便地使用產(chǎn)品,而漂亮、時(shí)尚或者富有情趣的外觀設(shè)計(jì)可以給用戶帶來(lái)喜悅感等良好的心理體驗(yàn)。很難說(shuō)哪一方理所應(yīng)當(dāng)?shù)厝〉弥鲗?dǎo)地位,更理想的狀態(tài)是交互設(shè)計(jì)師和視覺(jué)(外觀)設(shè)計(jì)師進(jìn)行良好的溝通和合作,求得雙贏的設(shè)計(jì)方案。
中國(guó)設(shè)計(jì)之窗編輯chrums注:
個(gè)人以為根據(jù)圖標(biāo)用處的不同對(duì)于實(shí)用性和美觀性的偏向度的掌握是不同的。而文中的有些準(zhǔn)則其實(shí)也是相對(duì)的吧。比如“每個(gè)圖標(biāo)指向的映射關(guān)系應(yīng)該是唯一的”這個(gè)準(zhǔn)則事實(shí)上甚至是大部分都不太可能做到的。有些非專(zhuān)業(yè)名詞和區(qū)別細(xì)微情感變化的詞匯用圖標(biāo)是極難表現(xiàn)的。比如“傷心”和“悲哀”這樣的區(qū)別。所以才顯得“簡(jiǎn)短文字”的實(shí)用。
我最不贊成的就是圖標(biāo)表象化。過(guò)于追求圖標(biāo)本身的細(xì)節(jié)刻畫(huà)和質(zhì)感而使圖標(biāo)脫離了所存在大環(huán)境是不值得的。