淺談信息圖形化的方法與其可用性測試

許園春

摘要：針對(duì)當(dāng)前界面設(shè)計(jì)師將圖標(biāo)設(shè)計(jì)與圖形設(shè)計(jì)混為一談，在圖標(biāo)設(shè)計(jì)中過于強(qiáng)調(diào)設(shè)計(jì)師的繪畫能力，并將過多的信息包含于圖標(biāo)中的非友好用戶交互設(shè)計(jì)的問題，筆者闡述了自己的觀點(diǎn)。文章介紹了信息圖形化的方法，強(qiáng)調(diào)在信息圖標(biāo)中應(yīng)放大主要信息，簡化甚至刪除不必要的信息。只有當(dāng)信息簡單化、圖形清晰，用戶才能最快速、最準(zhǔn)確的獲得設(shè)計(jì)師的想法。在文章的最后，筆者通過自身的實(shí)際案例，將自己的觀點(diǎn)付諸于實(shí)踐，并探討其可用性，進(jìn)一步闡明自己的理念。

關(guān)鍵詞：圖標(biāo)設(shè)計(jì)；信息圖標(biāo)化；可用性

測試圖形（Graphic），是指由繪、寫、刻、印等手段產(chǎn)生的圖畫記號(hào)，是說明性的圖畫形象，有別于詞語、文字、語言的視覺形式，并可以通過各種手段進(jìn)行大量復(fù)制，從而達(dá)到傳播信息的目的。

隨著信息交流范圍的逐漸擴(kuò)展，不受語言和文化限制的圖形符號(hào)被廣泛應(yīng)用，并創(chuàng)造出許多具有專業(yè)特點(diǎn)、功能與形式有機(jī)結(jié)合的，以及視覺效果新穎的圖形符號(hào)，增添了信息傳達(dá)的審美價(jià)值和樂趣。如何將信息轉(zhuǎn)變成視覺信息圖形主要有以下方法：

1信息符號(hào)的前期構(gòu)思

前期構(gòu)思就好比設(shè)計(jì)的孕育階段，對(duì)設(shè)計(jì)中的各個(gè)環(huán)節(jié)有決定性的影響。前期構(gòu)思主要包括對(duì)媒介載體、主題內(nèi)容、界面風(fēng)格、功能要求、目標(biāo)群體等的了解與分析，這是一個(gè)整體工程。

在信息符號(hào)創(chuàng)作初期，需要認(rèn)真地分析和研究有待表達(dá)的語言信息，對(duì)其進(jìn)行相應(yīng)的梳理，同時(shí)要注意在概念圖形化轉(zhuǎn)化過程中的準(zhǔn)確表達(dá)。比如很多消防安全標(biāo)識(shí)的箭頭是水平的，意指在所指方向有安全出口。但是有的圖形上出現(xiàn)了向下傾斜的箭頭，很多人在沒有通過專門培訓(xùn)前會(huì)認(rèn)為，當(dāng)遇到火情時(shí)，此標(biāo)識(shí)是要求人們根據(jù)箭頭所指方向趴在地上。其實(shí)，它是告訴我們箭頭所指方向附近就有消防通道的出口，提醒人們不要跑過頭。由此可見，信息的傳達(dá)準(zhǔn)確需要兩方面的支持：一方面，所使用的視覺圖形符號(hào)是否能夠讓受眾通過觀察其圖形的特點(diǎn)，根據(jù)以往的生活經(jīng)驗(yàn)，或者憑直覺就能清楚地判斷出圖形符號(hào)所傳達(dá)的信息；另一方面，對(duì)于受眾來說，特別是有關(guān)保障生命、防控重大事故發(fā)生等情況的圖形符號(hào)的應(yīng)用，要通過專門的培訓(xùn)，讓受眾知曉圖形符號(hào)所傳達(dá)的具體信息。

2信息符號(hào)圖形的提取

當(dāng)準(zhǔn)確分析一個(gè)有待表達(dá)的信息概念之后，就需要借助相應(yīng)的視覺圖形將其表達(dá)出來，將文字概念進(jìn)行圖形化的轉(zhuǎn)換。通常情況下，在設(shè)計(jì)信息符合是要避免或減少文字的使用。

在尋找到合適題材之后，需要對(duì)這個(gè)題材在概念和形式上進(jìn)行概況、精簡，保留最具辨識(shí)性的視覺特色部分，刪去不必要的細(xì)節(jié)，從而使復(fù)雜的形式得到簡化。由于寫實(shí)類型圖形的概況程度不一，形成的效果也是各異的，但總的來說視覺圖形在經(jīng)過提煉后，信息符號(hào)的形象所有表達(dá)的含義和題材的含義越相似，信息傳遞就越有效。在信息圖形化以后，我們還要做一個(gè)可用性測試，以此判斷該圖像是否能準(zhǔn)確被受眾者所識(shí)別，獲得準(zhǔn)確的信息。

在Mac中曾經(jīng)使用碎紙機(jī)圖形的圖標(biāo)來表達(dá)“回收站”指令，事實(shí)告訴我們不是所有的用戶明白碎紙機(jī)與回收站之間有什么樣的聯(lián)系，而且，人們通過以往接觸到的系統(tǒng)程序早已熟悉回收站的“垃圾桶”形象了。

當(dāng)前不少圖標(biāo)設(shè)計(jì)者忽略用戶的需要，利用自身的美術(shù)特長，將圖標(biāo)設(shè)計(jì)視為繪畫。這失去了最初用圖標(biāo)代替文字的愿望，反而使圖標(biāo)比文字更難理解，嚴(yán)重阻礙了用戶的使用。圖形在圖標(biāo)中使用的目的是減少用戶感知的困難，減少用戶理解記憶困難。在目前也有很多優(yōu)秀的圖標(biāo)設(shè)計(jì)，既美觀，又能準(zhǔn)確傳達(dá)信息。比如，Mac用戶界面中的e-mail圖標(biāo)，該款設(shè)計(jì)采用了傳統(tǒng)的郵戳和郵票形式，巧妙地把現(xiàn)實(shí)生活中的郵件概念和網(wǎng)絡(luò)空間中的電子郵件的概念結(jié)合起來了。有意思的是，當(dāng)這個(gè)圖標(biāo)為512×512像素時(shí)，我們可以看到其中郵戳的文字是“HellofromCupertino，CA”。Cupertino，CA正是蘋果的總部所在地，可見公司創(chuàng)意無處不在?。?/p>

下面用一個(gè)筆者（圖1）設(shè)計(jì)中華恐龍園的功能圖標(biāo)來進(jìn)行可用性測試的說明：

圖1草圖設(shè)計(jì)過程以及縮小后的效果（作者自繪）設(shè)計(jì)初期我選擇了暴龍形象，在圖形處理過程中，保留了暴龍頭部的五官，身體部分則突出它的四肢，身軀部分簡化。為了突出圖標(biāo)的趣味性，在圖形的表現(xiàn)手法上，我創(chuàng)意性的將動(dòng)漫中cosplay的方式套入到圖標(biāo)設(shè)計(jì)中，來隱喻相關(guān)的信息，比如帶護(hù)士帽的BOB代表醫(yī)務(wù)救助，頭戴廚師帽的BOB代表餐飲。由于需要在不同數(shù)字平臺(tái)中使用，你必須還有考慮圖標(biāo)放大縮小后的效果。但顯然由于細(xì)節(jié)過多，功能圖形沒有突出，降低了圖標(biāo)的識(shí)別性，測試者并不能獲得有效星系，所以簡化恐龍形象，強(qiáng)化功能圖形勢在必行。

在二次修改中，恐龍形象著力于是用簡單的線條描繪恐龍的身軀，五官突出眼睛部分，在它的胸口位置則是放置功能圖形。在繪制好線稿后，然后將它輸入電腦縮放?？s小后的線稿恐龍身軀的輪廓較為明顯。但在測試過程中發(fā)現(xiàn)在進(jìn)行了多次修改，以及縮放后發(fā)現(xiàn)恐龍形象的趣味、卡通性較差，所以這個(gè)方案也最終被舍棄。

測試的過程和結(jié)果告訴我們，采用什么樣的視覺圖形來表現(xiàn)文字語言的概念，是在設(shè)計(jì)者獨(dú)特、個(gè)性的表現(xiàn)手法和大眾的普遍可辨認(rèn)之間來進(jìn)行權(quán)衡的，有時(shí)，甚至?xí)尸F(xiàn)出一定的博弈。除此之外，設(shè)計(jì)者還必須考慮，用戶是在什么樣的環(huán)境下使用這些圖標(biāo)的。其中有一個(gè)重要的環(huán)節(jié)，就是對(duì)用戶分類。比如，可以依據(jù)文化層次、生活環(huán)境、年齡、性別對(duì)其進(jìn)行分類，幫助設(shè)計(jì)者掌握不同類別用戶的特征，從而為設(shè)計(jì)者提供參考信息和依據(jù)。關(guān)于如何選擇適當(dāng)?shù)膱D形來進(jìn)行數(shù)字信息符號(hào)設(shè)計(jì)，在MacOSX的圖標(biāo)設(shè)計(jì)手冊里面有這樣的建議：“使用大眾認(rèn)可的圖像表達(dá)圖標(biāo)含義，這樣，人們才會(huì)更容易辨認(rèn)出信息，從而避免將注意力集中在圖標(biāo)的次要元素上面”。