【譯】在你的App中使用圖標的5個技巧

自計算機圖形學早期，圖標就在一定范圍內有所使用。與文字相比，圖標在人機交互中或許更具優勢，原因如下：

簡單醒目而又友好，能夠替代大段的（通常也是枯燥的）描述性文字。
屏幕越來越小，而它們可以為屏幕節省空間，這一點十分受歡迎。
視覺上賞心悅目，可以提升設計的審美情趣。
最后一點也很重要，大部分應用都會在設計時使用圖標，這已成為增強用戶熟悉感的一個模式。

盡管有這些潛在的優勢，由于在設計時沒有考慮到圖標的潛在缺陷，經常會導致可用性問題。本文將試圖總結在UI中與圖標相關的主要問題，并給出了對于這些問題的一系列解決方案。

1. 圖標需要傳達意義

UI設計師有時候隱藏了圖標傳達的功能性含義，這些圖標的確非常漂亮可是很難識別。這破壞了圖標最重要的屬性--圖標必須首先能傳達含義。從字面意義上來看，圖標是一個對象或者一個動作的可視化表現。如果這個對象動作對用戶來說意義不是那么清楚，那圖標直接就失去了它的實用價值并且成為視覺噪音。

很多圖標都獲得了用戶的廣泛共識 (比如主頁圖標，打印圖標，以及代表搜索的放大鏡圖標)：

容易理解的圖標。圖標來源： icons8

但除了這些圖標外，大部分圖標仍然讓用戶感到意義模糊，因為它們可以表示不同的意義。比如游戲中心的圖標是一組顏色各異的、玻璃狀的圓圈。游戲中心是什么意思呢？這個圖標與游戲如何聯系呢？

游戲中心的圖標未能傳達出游戲的概念。

再舉一個例子：當谷歌決定簡化Gmail界面設計，把所有東西都隱藏到一個抽象的圖標后，他們顯然收到了一系列的支持請求，比如：“我的谷歌日歷哪兒去了?”

Gmail 用戶桌面界面

不論一個你知道它應該代表著什么的圖標的意義多大，對于一個初始使用者它都可以是一個完全不同的體驗。你的用戶們熟知抽象的象形圖也是一個常見的錯誤假設。

你的圖標的首要任務是要引導你的用戶去他們需要去的地方，所以確保他們能夠到達這個目標：

運用5秒規則 ：如果你需要花費超過5秒鐘的時間去為某件事思考合適的圖標，那么很可能這個圖標并不能很有效地傳達你的想法。
選擇熟悉的圖標 ：用戶對于一個圖標的認知是基于先前的經驗。讓你自己去熟悉你的競爭對手所使用的，以及那些經常被使用在你接觸的平臺上（現有系統圖標）的圖標，因為那些圖標會是你的用戶們最能識別出來的。

2. 使圖標保持簡潔并具有圖解性

在大部分案例中，圖標不是個需要創造力的地方。不要誤解 — 我不是說有創意不好，但對于基礎功能來說，太過新奇的圖標可能對用戶體驗產生負面影響。如果你想展示自己高超的設計技巧，你可以依靠其他設計元素傳達產品信息，同時還保證圖標簡潔、現代和友好。

每個圖標都應該達到最簡形式，將思想精華融入其中——簡化的圖標是為了削減學習曲線的要求。設計精良的圖標可以讓你在一瞥之間領會它的含義，因為設計確保了可讀性，而且即便尺寸很小也依然清晰。

3. 包括一個可見的文本標簽

好的用戶體驗可以以多種方式進行定義，但是有一種衡量方式使減少用戶思考花費的能力。清晰性是優秀接口最重要的特征。圖標需要幫助用戶不需要思考就能做他們想做的。然而，圖標的問題是用戶會根據他們以往的經驗將圖標與每個事件相關聯。另一個常見的誤解是假想用戶（特別是移動端用戶）為了發現每個圖標的功能，把所有的圖標都嘗試點擊一遍。

蘋果的電子郵件定制界面. 你能正確的區分出每個圖標是干嘛的嗎? 圖片來源: ia

實際上，用戶們經常對不熟悉的接口界面產生恐慌（我次奧這是什么這樣？），他們也不愿意探索已經熟悉的事物之外的東西（不好奇就不害死貓咪）. 為了幫助他們認清每個長得都差不多的圖標,大多數情況下圖標下都跟隨著一個文本標簽用來告訴你“我”是干什么的. 用戶點擊圖標的時候你的圖標必須設計的盡量符合預期（不然就是WTF!!!）.

還有一種圖標加標簽文本的方法. 用標簽來解釋圖標的用途（提高可用性）. 圖片來源: ia

我們針對“使用或者不使用標簽”進行了一系列的用戶測試，然后我們發現發現 :

使用圖標和標簽 , 88% 的用戶能夠正確的預測出點擊圖標之后將會發生什么 .
只使用圖標 , 如果只使用圖標的話，這個數字就不是88%，而是降到了 60%. 并且對于特定的app里面那些沒有標簽說明的圖標, 只有 34% 的人能夠正確的預測點擊圖標后會發生什么 .

關于這個，可以使用以下三點考慮:

在app中使用彈出提示引導用戶.

對于一些稍微復雜或者抽象的功能，只使用文字表述其功能是有一定局限的. 因此在展示這些功能時要始終記得配合一個合適的文本標簽來展示.
圖標標簽應該在任何時候都是可見的, 而不需使用來自用戶的任何交互. 一些設計師認為，使用標簽損害了圖標所要展示的用途，并且弄亂了他們的界面. 為了避免使用標簽，他們會加入一些教程、彈出提示等功能讓用戶明白圖標是干嘛的. 但用戶可能直接跳過教程，或者看完教程馬上就忘了（梗：目前為止，上帝是贏得）. 同樣也不要指望用懸停功能來顯示文本標簽內容: 而且這樣的話用戶需要多操作一步，并且這樣的功能在觸摸屏中也無法很好的得到轉換（懸停提示在觸摸屏中不好實現體驗也不好）.

使用標簽圖片是更好的方法（肯定比單獨只是用文字或圖片要更好）. 當然, 如果使用文字就能表達清楚的話，不用圖片的話更好，因為圖標和標簽的爭議中，使用圖標總是得勝 .

4. 保持圖標具有良好的觸摸目標 (移動應用)

人們使用手指在觸摸式用戶界面進行交互。所以UI控件必須要足夠大能捕捉指尖動作，圖標不能太小，不要存在太多的錯誤操作令用戶沮喪。下圖顯示了成年人手指的平均寬度大約是11毫米，嬰兒大約是8毫米寬，一些籃球運動員的手指甚至要19mm多寬。

人們經常抱怨他們自己的粗手指。但即便是嬰兒的手指，也要比大多數觸摸目標要寬。圖像信息：微軟

觸屏推薦目標大小為7–10mm。下面是為蘋果和谷歌平臺推薦的指南(iOS 人機界面指南與材料設計)：

間隙區域。圖標:24dp

二者的觸屏目標都應為: 48dp。圖片來源:材料設計配置。

推薦蘋果使用的觸屏目標最小尺寸為寬44像素，高44像素。由于物理像素的大小可能隨著屏幕密度變化，Apple像素規格最適用于 320 x 480像素， 3.5英寸的顯示屏。
推薦谷歌使用的觸屏目標尺寸如下 —至少48 x 48dp。大多數案例中，還需要余出8dp或更多的空間以確保信息密度平衡和適用。一個48 x 48dp的觸屏目標，若不考慮屏幕尺寸，那么它的物理尺寸約為9mm。觸摸目標包括響應用戶輸入的區域。觸摸目標超出元素的視覺范圍：圖標這樣的元素可能看起來是24 x 24dp，但加上其周圍的填充區，整個觸屏目標的尺寸為48 x 48dp。
觸屏目標間有足夠的間距。確保觸屏目標的最小間距，主要是為了防止用戶觸摸目標時觸發了錯誤動作。這一點在某些場景中尤為重要，比如“保存”與旁邊的“取消”。在目標間余留至少2 mm的填充區非常重要。