導(dǎo)讀：在圖形用戶界面中，圖標(biāo)除了通過其顏色和樣式來傳播品牌特色之外，應(yīng)當(dāng)優(yōu)先考慮界面語言的傳達(dá)。根據(jù)定義，圖標(biāo)是物體、操作或創(chuàng)意的視覺表現(xiàn)，但如果用戶看到這個物體、操作或是創(chuàng)意時，無法清楚明白其含義，圖標(biāo)就會成為華而不實的擺設(shè)，而且還會成為阻礙用戶完成任務(wù)的視覺干擾。

圖標(biāo)能給圖形用戶界面（GUI）帶來以下好處：

1. 制造良好的點擊區(qū)域：圖標(biāo)的尺寸往往足夠大，用戶可以很容易地在觸屏界面中點擊操作，對于鼠標(biāo)來說也是一樣的。（文字鏈接在觸屏上易造成用戶閱讀與點擊的不對稱。）
2. 節(jié)省空間：圖標(biāo)足夠小巧，工具欄、面板等控件在相對狹小的空間里也可以顯示許多圖標(biāo)。
3. 易于快速識別（設(shè)計得好的情況下）——尤其對于那些常見的或是使用過的標(biāo)準(zhǔn)圖標(biāo)來說 無需翻譯，那些考慮了文化差異的圖標(biāo)設(shè)計是國際通用的。（例如，郵箱在不同的國家會有不同的樣子，但是信封卻是一樣的，因此相比之下，信封是一個更加國際化，更適用于電子郵件的圖標(biāo)。）
4. 符合并能提升設(shè)計的美學(xué)訴求。
5. 當(dāng)相同的圖標(biāo)和樣式用在不同的地方時，能給用戶提供產(chǎn)品系列的概念，增強(qiáng)產(chǎn)品間的聯(lián)系。

盡管圖標(biāo)有以上這么多潛在的優(yōu)勢，當(dāng)設(shè)計未充分考慮到圖標(biāo)潛在的問題時，它們一樣會給用戶界面帶來了可用性問題。

通用圖標(biāo)少之又少

用戶只對少數(shù)幾個圖標(biāo)有著通用的認(rèn)識，例如主頁，打印以及放大鏡圖標(biāo)代表的搜索等等。除此之外，大部分的圖標(biāo)由于其在各種界面中的不同用法，在用戶看來仍然是模棱兩可的。久而久之，這種標(biāo)準(zhǔn)化的缺失讓圖標(biāo)在界面中的應(yīng)用成為設(shè)計之痛，因為用戶無法期待每次見到這個圖標(biāo)時它們都代表著相同的含義。

三條杠形狀被俗稱為“漢堡”的圖標(biāo)就是個很好的例子，它成為通用圖標(biāo)還有很長的路要走。大部分應(yīng)用中使用這個圖標(biāo)代表了主導(dǎo)航菜單，而還有部分用它（或是十分類似的圖標(biāo)）來表示列表。例如，清單管理應(yīng)用Buy Me a Pie就用這個圖標(biāo)來觸發(fā)打開常用添加項的列表。更讓人困惑的是，這個圖標(biāo)處在輸入框的右邊，而通常這里出現(xiàn)的圖標(biāo)會是一個提交輸入框內(nèi)容的按鈕。（實際上，界面中輸入框和圖標(biāo)有著分別獨立的功能，如果你認(rèn)為在界面中輸入文字后點擊這個圖標(biāo)會顯示一個根據(jù)輸入進(jìn)行過濾后的列表，那你就錯了。）

Buy Me a Pie安卓版使用了三個彩色條的“漢堡”圖標(biāo)，用于打開常用項的列表，這與常用的導(dǎo)航菜單用法有很大的區(qū)別，然而色彩上的處理不足以讓用戶認(rèn)識到這個圖標(biāo)有著不同的含義。

心形圖標(biāo)在Combadi（左圖）相比Fab（右圖）功能就較為局限，它不能用于保存商品到收藏列表，盡管Combadi在十分相似的位置上使用了一樣的圖標(biāo)

即使是再小的功能或是含義的不同都會阻礙用戶再次見到這個圖標(biāo)時對它的理解和信賴。

就在上周（譯者注：這篇文章發(fā)布于7.27），我們發(fā)布了一個關(guān)于網(wǎng)站在其主導(dǎo)航欄中使用時鐘圖標(biāo)的可用性報告，盡管圖形本身的識別度很高，用戶都明白它是一個時鐘，但是這個圖標(biāo)的在此案例中的含義是十分模糊的，因為網(wǎng)站并沒有將這個圖標(biāo)用作它看上去所表現(xiàn)出的含義，而是用作導(dǎo)航歷史記錄，點擊會打開一個側(cè)邊欄，顯示用戶最近訪問過的頁面。然而測試的結(jié)果是沒有一個受測用戶去點擊它。模糊的圖標(biāo)＝無意義的功能

圖標(biāo)需要文字輔助

幾乎所有的圖標(biāo)都會遇到讓用戶覺得模棱兩可的問題，為了解決這個問題，我們應(yīng)當(dāng)給圖標(biāo)配以文字標(biāo)記，給用戶在特定的情景中弄清它的含義。（就算使用標(biāo)準(zhǔn)圖標(biāo)，通常配上文字也會是個更安全的選擇，尤其是當(dāng)你對這個圖標(biāo)做了一些符合自己審美偏好的微調(diào)。）

圖標(biāo)的文字應(yīng)當(dāng)總是可見的，不根據(jù)用戶的操作來顯示或是隱藏。對于導(dǎo)航里使用的圖標(biāo)，文字更是十分關(guān)鍵的。不要過于依賴讓用戶懸浮圖標(biāo)來顯示文字：這不僅提高了用戶的交互成本，也無法在用戶使用觸屏界面時生效。

Usability.gov在網(wǎng)站的每一頁中都顯示了快速導(dǎo)航的圖標(biāo)，用于快速跳轉(zhuǎn)到設(shè)計方法、設(shè)計文檔和模版以及設(shè)計規(guī)范的頁面。如果我讓這篇文章的每個讀者都給我發(fā)一個他心目中能代表“設(shè)計方法”的圖標(biāo)，我能肯定我將收到許許多多不同的答案。正如我們多年前在《網(wǎng)站主頁可用性設(shè)計規(guī)范》中提到的，“如果你考慮要在導(dǎo)航里使用圖標(biāo)，用戶將很可能難以識別它們?！彪m然他們在移動端的站點上意識到文字的重要性并且使用文字輔助說明了圖標(biāo)的含義，但是他們在桌面版本上卻隱藏了這些文字，只有當(dāng)用戶感到好奇將鼠標(biāo)移動到圖標(biāo)上才出現(xiàn)。在桌面端的網(wǎng)站里，他們將導(dǎo)航菜單固定懸浮在頁面的左側(cè)，以確保用戶在上下滾動時仍然可以快速的進(jìn)行頁面的跳轉(zhuǎn)，這說明了他們認(rèn)為這些導(dǎo)航很重要對用戶很有用。但是，將圖標(biāo)的輔助文字隱藏卻將這些導(dǎo)航的作用變得毫無意義，與原本的設(shè)計意圖適得其反。

Usability.gov網(wǎng)站移動端將導(dǎo)航圖標(biāo)放在頁面的頂部，配以輔助文字。桌面端將導(dǎo)航固定懸浮在頁面的左側(cè)，但是只有在用戶懸停的時候才顯示文字。這迫使用戶去發(fā)現(xiàn)文字來理解導(dǎo)航的含義，降低了圖標(biāo)導(dǎo)航的效率。

相對尺寸有助于提高用戶關(guān)注

通常，圖標(biāo)在手機(jī)上比桌面端網(wǎng)站或是應(yīng)用中看起來更加明顯，我們在設(shè)計中很容易去假定當(dāng)一個圖標(biāo)在移動端看上去沒有問題時，這個圖標(biāo)一定可以應(yīng)用在桌面端的產(chǎn)品中。但是事實并非如此！在手機(jī)屏幕上，只有有限的元素在吸引用戶的注意力（道理很簡單，因為手機(jī)屏幕更小，只能放少量的信息）。相比之下，桌面端的屏幕要大得多，經(jīng)常有很多的內(nèi)容，用戶很容易會錯過一些信息，當(dāng)然這取決于界面中哪部分的信息在吸引他們的注意力。如果用戶在手機(jī)上看到的界面元素是由一個標(biāo)志，一個大標(biāo)題，一個圖片和一個菜單圖標(biāo)組成，那么這個菜單圖標(biāo)比相同界面在桌面端里的圖標(biāo)會有更大的機(jī)會受到用戶的關(guān)注，因為在桌面端上，整屏都是吸引用戶注意力的內(nèi)容，而這個圖標(biāo)僅僅是呆在某個角落里。

所以在圖標(biāo)設(shè)計中也應(yīng)當(dāng)考慮它與界面中其他元素的相對大小。在一個標(biāo)準(zhǔn)移動版網(wǎng)站的頁眉上，漢堡形狀的菜單圖標(biāo)大約會占據(jù)頁面寬度的20-25%，而將這個設(shè)計應(yīng)用到更大屏幕尺寸的設(shè)備上時，通常都使用的是一樣的大小。這樣導(dǎo)致的結(jié)果就是在桌面端（或是大尺寸的平板，尤其是在橫屏模式下），圖標(biāo)看起來會小得多，而且在界面其他元素的干擾下，變得更加不明顯。要解決這個問題，可以在大屏設(shè)備上（通常會有很多空間）直接將菜單項都展示出來，而非保持隱藏在漢堡圖標(biāo)里。這樣不僅能夠讓菜單項更易于發(fā)現(xiàn)，也可以避免許多由隱藏導(dǎo)航帶來的可用性問題。

?

Upworthy.com:?用于打開主菜單的三條杠“漢堡”圖標(biāo)在移動端占據(jù)了站點標(biāo)志下導(dǎo)航欄20%的寬度。查看它的桌面版本時，這個主菜單的圖標(biāo)仍然使用一樣的尺寸，盡管導(dǎo)航欄已經(jīng)變大了許多。結(jié)果是這個圖標(biāo)僅僅占桌面寬度的3.5%左右（這樣計算的基礎(chǔ)還沒有算上網(wǎng)站兩側(cè)的留白區(qū)域）。相對尺寸的區(qū)別以及桌面端更多元素在吸引用戶的注意力，也解釋了為什么圖標(biāo)在移動端更易被用戶發(fā)現(xiàn)和注意到。

圖標(biāo)設(shè)計的小建議

當(dāng)你決定給你的界面中設(shè)計圖標(biāo)時，請先做調(diào)研！先去看看那些你的競爭對手使用的或是產(chǎn)品目標(biāo)平臺常用的圖標(biāo)，因為這些是你的用戶最熟悉的。

如果你必須要設(shè)計一個新的圖標(biāo)，你可以參考一下的指南，盡量將它設(shè)計得易于識別和記?。?/p>

1. 保持簡潔。減少圖形的細(xì)節(jié)盡量少添加一些個性元素遠(yuǎn)比制作一個效果真實逼真的圖標(biāo)更易于提高識別度。（復(fù)雜的細(xì)節(jié)在小尺寸的圖標(biāo)上很難識別）
2. 五秒原則：如果你想出合適的圖標(biāo)來表達(dá)你的設(shè)計意圖，花了你超過5秒鐘的時間，那么似乎這個含義很難通過簡單的一個圖標(biāo)傳達(dá)出來。
3. 測試圖標(biāo)是否容易識別：問問身邊的人他們認(rèn)為這個圖標(biāo)是什么意思。
4. 檢測圖標(biāo)是否容易被記住：告訴他們圖標(biāo)的含義后，過上幾個星期再問問他們是否還記得這個圖標(biāo)是什么意思。
5. 使用文字輔助。正如Bruce Tognazzini（NNgroup的首席設(shè)計師）說的“一言勝千圖”

#專欄作家#

Terryfan，人人都是產(chǎn)品經(jīng)理專欄作家。目前在點融網(wǎng)擔(dān)任用戶體驗總監(jiān)，喜歡設(shè)計、推理、邏輯分析搞腦子。目前持續(xù)緩慢更新微信公眾號開卷有譯（terryfan_ux），進(jìn)行翻譯分享。

本文系作者授權(quán)發(fā)布，未經(jīng)許可，不得轉(zhuǎn)載。