推薦：什么樣的圖標(biāo)更具有可用性
作為WIMP(Window/Icon/Menu/PointingDevice)界面設(shè)計(jì)的要害部分，圖標(biāo)在人機(jī)交互設(shè)計(jì)中無所不在。隨著人們對審美、時(shí)尚、趣味的不斷追求，圖標(biāo)設(shè)計(jì)也不斷花樣

原文：http://www.useit.com/papers/sun/icons.html

圖標(biāo)的可用性測試可以通過兩種方式來進(jìn)行：

1. 圖標(biāo)直覺測試(Icon intuitiveness test)。將不帶標(biāo)簽的圖標(biāo)展示給一小部分用戶（通常為5個(gè)用戶），讓其說出他們認(rèn)為圖標(biāo)最能代表的事物。該測試評估圖標(biāo)表示預(yù)期概念的程度。
2. 標(biāo)準(zhǔn)可用性測試(Standard usability test)。將圖標(biāo)和整個(gè)用戶界面一起展示給用戶，要求用戶使用系統(tǒng)完成一系列預(yù)先設(shè)定的任務(wù)，并在完成任務(wù)的時(shí)候進(jìn)行出聲思維。該測試是為了評估圖標(biāo)在用戶界面上良好工作的程度（在界面上，圖標(biāo)通常以標(biāo)簽的形式呈現(xiàn)）。

我們使用畫在紙上的簡單黑白草圖進(jìn)行最初的研究。對于每一個(gè)圖標(biāo)，我們都會(huì)采用幾個(gè)可供選擇的概念進(jìn)行了測試，然后選擇最有前途的一個(gè)概念進(jìn)行進(jìn)一步地開發(fā)，將其著色成一個(gè)電腦上的彩色圖像。我們對那些彩色圖標(biāo)進(jìn)行了幾輪的重復(fù)設(shè)計(jì)。

以下是三個(gè)圖標(biāo)反復(fù)設(shè)計(jì)的實(shí)例。

這一圖標(biāo)代表了概念“技術(shù)和開發(fā)者”。前兩個(gè)用芯片和CD-ROM代表的圖標(biāo)有點(diǎn)難以理解，它們看起來更像完成的產(chǎn)品而不是開發(fā)過程。建筑工人能夠很好地代表開發(fā)但是它最終被否決，因?yàn)槠渚哂袕?qiáng)烈的負(fù)面涵義，在互聯(lián)網(wǎng)上這一力圖標(biāo)經(jīng)常表示某些網(wǎng)站正在建設(shè)中（這是我們的測試用戶非常憎恨的）。

第二排的圖標(biāo)是我們下一輪的嘗試，我們使用人物圖像代表開發(fā)者。

第一個(gè)開發(fā)者圖標(biāo)最受喜愛，盡管有些用戶認(rèn)為其代表了硬件而不是軟件開發(fā)。另外，一些用戶喜歡第二個(gè)圖標(biāo)因?yàn)樗�象征“利用力量��。因此，我們基本上采用了第一個(gè)開發(fā)者作為我們的首個(gè)彩色圖標(biāo)，僅僅是用閃電換掉了開發(fā)中手中的扳手。

盡管如此，我們的第一個(gè)彩色圖標(biāo)在可用性測試中獲得了較差的結(jié)果。有如下評論：

• 雷和電
• 電的，看起來痛苦
• 被技術(shù)殺死的人
• 跳舞的機(jī)器
• 為什么Sun的開發(fā)者看起來像是暴眼的？

顯然，我們需要拋棄該圖標(biāo)中的人物形象。因此在第二個(gè)彩色圖標(biāo)中，我們僅僅保留了閃電和齒輪。用戶仍然抱怨雷電看起來像是閃電擊中并摧毀了機(jī)器。我們最終決定放棄電流，最終用一個(gè)CD-ROM代表了開發(fā)的概念。在測試的過程中，齒輪工作良好，它被看成是工程和技術(shù)間的連接方式，盡管計(jì)算機(jī)顯明地沒有齒輪。Sometimes elements of obsolete technology can work well as a stereotype to communicate concepts in an icon.

這一組圖標(biāo)代表了概念“產(chǎn)品和方案”。我個(gè)人最喜歡機(jī)器從箱子里面出來那副圖，但是這張圖被否決了，因?yàn)樗�只代表了硬件而不是軟件（顯然，也不能表示幫助客戶解決問題而不僅僅是賣給他們產(chǎn)品這一觀點(diǎn)）。

有的用戶喜歡人舉起電腦那張，因?yàn)椤八�代表了力量和�?dòng)力—我能夠?yàn)槟阕鲞@些�！钡���，因?yàn)樵谌说谋澈笥泻芏嗯_電腦，所以這個(gè)圖標(biāo)非常嘈雜（盡管我們非常想賣出這些電腦，但是圖標(biāo)應(yīng)該是簡單的！）。沒有人喜歡宗教智者那張。大部分喜歡發(fā)光的燈泡部分。小數(shù)用戶提到的一個(gè)問題是，舉起電腦的人是男性而不是女性。我們暫時(shí)認(rèn)為我們需要使用混合的圖像，假如我們要在圖標(biāo)上使人人形的話。但是，因?yàn)閷�簡潔的追��，我們最終沒有在圖標(biāo)上使用人物圖像。

就像你所看到的，彩色圖標(biāo)的所有版本基本上都是一樣的，一臺電腦加上一個(gè)發(fā)光折燈泡。所有用戶能夠很輕易地認(rèn)為其代表了電腦和一些聰明觀點(diǎn)的結(jié)合（Sun的解決方案�。�。發(fā)光的燈泡同時(shí)代表了軟件和解決方案。對圖標(biāo)的唯一修改是因?yàn)橹黜摪婷娴囊?guī)劃：首先我們將圖標(biāo)設(shè)計(jì)得更小一些，另外，我們使它看起來更像是按鈕（有些三維的感覺）。

這一圖標(biāo)代表了概念“網(wǎng)絡(luò)上的Sun”。我們最初有兩個(gè)不同的想法：一個(gè)說話的服務(wù)器（告訴你關(guān)于它自己是什么）和世界范圍的溝通。大部分用戶認(rèn)為地圖圖標(biāo)代表足球（經(jīng)過幾次失敗的嘗試之后，我們最終熟悉到一個(gè)事實(shí)：地球必須是圓的�。���

我們拋棄了過度的人-神同形的服務(wù)器，然后使用了一種隱喻的風(fēng)格來設(shè)計(jì)我們的第一個(gè)彩色圖標(biāo)。我們使用文字的服務(wù)器在銀色的盤子上顯示信息。不幸的是，用戶認(rèn)為它是一個(gè)朝圣者的帽子。另外，顯然，對“服務(wù)器”的文字解釋會(huì)在國際化的可用性測試中失敗。

接著，我們將地球和講話泡泡兩種想法結(jié)合起來。但是用戶認(rèn)為它是被刺穿的汽球。接下來的兩個(gè)圖標(biāo)是更文字化的地球儀，但是用戶將其解釋成穿著宇航服的太空人、橄欖葉和一個(gè)試圖砍平其道路的打高爾夫球的人。

最終的設(shè)計(jì)是最簡單的。并且，它是有用的。

分享：設(shè)計(jì)師的框架
byJeffCroft翻譯：qing原文地址：http://www.alistapart.com/articles/frameworksfordesigners近來，在Web開發(fā)中”框架”是一個(gè)相當(dāng)時(shí)髦的詞。比如JavaSc