新人學(xué)習(xí)圖標設(shè)計，好看固然要緊，但更關(guān)鍵的是圖標的識別性和可用性，今天這篇好文總結(jié)了6個提高圖標識別性和可用性的技巧，來收。

在早期的計算機圖形學(xué)領(lǐng)域內(nèi)，圖標只能在有限的范圍內(nèi)被使用。從人機交互的角度來說，使用圖標比使用文本更具有優(yōu)勢，原因如下：

簡單、醒目、而且友好，可以取代一段冗長枯燥的描述;

隨著屏幕尺寸變的越來越小，使用圖標可以節(jié)省空間，這點是很受歡迎的;

使用圖標看起來很舒服，并能增加設(shè)計的藝術(shù)感染力;

最后(但同樣重要的是)，在大多數(shù)應(yīng)用中使用圖標，是一種為用戶熟知的設(shè)計模式。

盡管圖標有這些潛在的優(yōu)點，但如果設(shè)計時不考慮其潛在的負面影響，也會常常導(dǎo)致可用性問題這篇文章致力于總結(jié)UI中與圖標相關(guān)的一系列主要問題，并提出一套對這些問題的解決方法。您可以在圖標設(shè)計中使用這些技巧作為起步，來更好地完成工作。

1. 圖標應(yīng)傳達含義

設(shè)計師們有時會過于注重形式，忽略了本身的功能，導(dǎo)致圖標難以識別，這打破了它最重要的圖形意象屬性-圖標的傳達含義功能必須放在首位。按照定義，圖標是一個對象或動作的視覺體現(xiàn)。如果對于用戶而言，這個對象或行動不明確，該圖標就立刻失去它的實用價值，并成為一個視覺干擾。

以下是一些在用戶心中享有普遍共識的圖標。(首頁、打印機、用于搜索的放大鏡都是屬于這種類型)。

△ 容易辨識的圖標

但除了這些例子，對用戶而言大部分圖標的意思仍舊模棱兩可，以為它們還具有不同的含義。例如游戲中心圖標，是一組色彩鮮艷玻璃感的圓圈。這代表了什么含義?它與游戲有什么關(guān)系?

△ 游戲中心圖標無法傳達游戲的概念

看看另一個例子︰ 當(dāng)谷歌決定簡化 Gmail 用戶界面，把所有功能隱藏在一個抽象的圖標之下，他們得到的是一大堆用戶的幫助請求，比如“我的谷歌日歷在哪里?”

△ 桌面端的GMAIL界面

無論你能理解多少這個圖標的含義和代表的功能，對初次看到這個圖標的用戶來說體驗仍舊可能完全不同。假定用戶都熟悉這些抽象的圖形是一個普遍的錯誤。

圖標的首要任務(wù)是引導(dǎo)用戶去他們需要去的地方，所以請確保他們能夠?qū)崿F(xiàn)這個目標︰

使用 5 秒鐘規(guī)則︰ 如果花了你超過5 秒考慮一個合適的圖標。這個圖標不太可能有效地傳達含義。

選擇熟悉的圖標：用戶對圖標的理解往往基于以前的經(jīng)驗。讓自己熟悉競品所使用的圖標和常用的目標平臺上的圖標(現(xiàn)有系統(tǒng)圖標)，那些是用戶最容易辨認的。

2. 保持圖標的簡單和示意

在大多數(shù)情況中，設(shè)計圖標無需發(fā)揮創(chuàng)意。別誤會，并不是說創(chuàng)新圖標是不好的，但基本功能太花哨的圖標可能會對用戶體驗產(chǎn)生負面影響。如果你想展示你的設(shè)計技能，你可以依靠其他設(shè)計元素傳達你的產(chǎn)品信息，同時保持系統(tǒng)圖標的設(shè)計簡單、現(xiàn)代、友好。

圖標設(shè)計理念的本質(zhì)是減到最簡形態(tài)-簡化圖標是出于降低學(xué)習(xí)曲線的需要。設(shè)計應(yīng)確保即使圖標在小尺寸更具有可讀性和清晰度，所以精心設(shè)計的圖標應(yīng)該能夠快速辨認，一目了然。

3. 包含清晰可見的文本標簽

良好的用戶體驗可以定義在很多方面，但衡量標準之一是減少了多少用戶思考的成本。清晰是一個 好界面的最重要特征。圖標的設(shè)計應(yīng)該幫助用戶毫不費力知曉他們要做什么。但是，圖標的問題在于用戶會基于之前的經(jīng)驗對每個圖標聯(lián)想出不同的含義。假定用戶(特別是手機用戶)會為了探索每個圖標的功能而一一試用是另一個常見的誤解。

△ 蘋果郵箱的標準化屏幕。你能準確的定義每個圖標表達的含義嗎?

事實上，用戶面對不熟悉的界面常常有不安全感，而且并不會到他們的舒適區(qū)域之外探索。在一些特殊的上下文環(huán)境里，為避免幾乎所有圖標都可能會產(chǎn)生的歧義，應(yīng)該在圖標周圍設(shè)計一個文本標簽用于清晰表達其含義。為用戶在點擊前設(shè)定清楚的預(yù)期。

△ 同樣的設(shè)計中加入了文本標簽的圖標，文本標簽解釋了圖標的含義，并提高了可用性

UserTesting(一家為開發(fā)者提供測試用戶的創(chuàng)業(yè)公司)進行了一系列關(guān)于是否是要標簽的測試，結(jié)果發(fā)現(xiàn)：

對于帶有標簽的圖標，88%的情況下，用戶輕點圖標時可以準確地預(yù)測接下來會發(fā)生什么。

對于沒有標簽的圖標，這個數(shù)字下降到60%。對于那些特殊的圖標，這個數(shù)字只有34%。

這里有三個重要的情境需要考慮：

對于更多復(fù)雜且抽象的功能來說，圖形化的表達具有局限性。所以他們應(yīng)該使用合適的文本標簽來展示。

文本標簽應(yīng)該始終保持可見，不應(yīng)讓用戶進行任何交互才能看見。有的設(shè)計師發(fā)現(xiàn)文本標簽破壞了他們使用圖標想達到的效果并且使界面變的散亂，往往會在圖標旁添加教程、引導(dǎo)遮罩、彈出提示框。但是用戶會跳過這些教程并很快忘記他們剛剛學(xué)習(xí)到的。同樣不要想著依賴鼠標懸浮現(xiàn)實文本標簽：不僅是因為這樣需要額外操作，在觸屏上也不太適用。

△ SWARM 應(yīng)用為了教育用戶使用了彈出框提示

文本標簽和圖形結(jié)合在一起比單獨使用其中之一效果更好。但是，如果僅能使用其一文本比單使用圖形要好。在表達清晰度這一點上，文本標簽總是更勝一籌。

4. 使圖標的觸控體驗更佳（手機應(yīng)用）

人們使用手指與基于觸控的界面進行交互。較小的目標和錯誤的行為會使用戶沮喪，所以UI控件要足夠大才能承載手指尖的動作。下圖顯示成人手指的平均寬度大約在11mm，嬰兒的是8mm，而一些籃球運動員竟會具有超過19mm的寬度!

△ 人們常常譴責(zé)自己具有“胖手指”。但是即使是嬰兒的手指也會比多數(shù)點擊目標要寬。

觸屏對象的推薦點擊目標尺寸大約是7-10mm。以下是蘋果和谷歌平臺的規(guī)范(iOS人機界面規(guī)范和material 設(shè)計)：

蘋果推薦的最小點擊目標尺寸為44×44像素。由于物理像素的尺寸會隨著屏幕分辨率發(fā)生變化，在3.5寸的屏幕上，蘋果推薦的尺寸是320*480。

谷歌則推薦觸控目標的尺寸至少為48x48dp。多數(shù)情況下，這些觸控目標應(yīng)使用至少8dp的空間分隔來確保信息密度的平衡性與可用性。無論屏幕尺寸有多大，一個48x48dp的觸控目標需要9mm的物理尺寸。觸控目標包括響應(yīng)用戶輸入的區(qū)域。觸控目標的面積往往超過一個元素的可視區(qū)域：比如一個圖標形狀是24x24dp，但是加上周圍的間距，共同組成了48x48dp的觸控面積。

△ 圖標尺寸：24DP 觸控面積：48DP

需要考慮的重要情境：

觸控目標之間的有效間距。設(shè)置觸控目標間的最小距離是為了防止用戶引起錯誤的操作。這在兩個相鄰操作互斥時尤為重要：比如“保存”和“取消”圖標并列存在時使用至少2mm的間距。

5. 不要跨平臺使用圖標

當(dāng)你在設(shè)計Android/iOS應(yīng)用時，不要使用其他平臺特定的UI元素。各平臺為某些常用功能使用一套典型的圖標，比如分享、新建和刪除。當(dāng)你轉(zhuǎn)換應(yīng)用到另一個平臺時，你應(yīng)替換掉相對應(yīng)的圖標。

Android(上)和iOS(下)的常用功能的圖標

6. 測試你的圖標

圖標的使用應(yīng)極盡小心：始終進行可用性測試。一旦你已經(jīng)熟悉一個界面，很難再使用全新的眼光審視它并使用直觀的感覺分辨它。所以，觀察一個新用戶如何與UI交互很重要，因為他可以幫助你判斷圖標是否足夠清晰。

測試圖標的可識別性。詢問用戶期望圖標可以代表哪些功能。避免設(shè)計一些用戶看到后不知道他們該做什么的圖標，因為沒人會想玩捉迷藏。

測試圖標的可記憶性。難以記憶的圖標常常使用低效。告訴一組用戶圖標代表的含義，幾個星期后再詢問他們是否還記得。

小結(jié)

圖標圖形學(xué)是UI設(shè)計的核心：對于界面的可用性來說，它是一把雙刃劍。如同用戶體驗設(shè)計的方方面面，界面中使用的所有圖標都應(yīng)有目的性。當(dāng)你設(shè)計對路的時候，圖標能幫助你簡單而直觀的引導(dǎo)用戶。