App中使用圖標的小竅門

dalemuxi_3021 2016-11-12

展開全文

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

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

1. 圖標需要傳達意義

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

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

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

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

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

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

Gmail 用戶桌面界面不論一個你知道它應(yīng)該代表著什么的圖標的意義多大，對于一個初始使用者它都可以是一個完全不同的體驗。你的用戶們熟知抽象的象形圖也是一個常見的錯誤假設(shè)。你的圖標的首要任務(wù)是要引導(dǎo)你的用戶去他們需要去的地方，所以確保他們能夠到達這個目標：

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

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

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

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

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

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

蘋果的電子郵件定制界面. 你能正確的區(qū)分出每個圖標是干嘛的嗎? 圖片來源: ia實際上，用戶們經(jīng)常對不熟悉的接口界面產(chǎn)生恐慌（我次奧這是什么這樣？），他們也不愿意探索已經(jīng)熟悉的事物之外的東西（不好奇就不害死貓咪）. 為了幫助他們認清每個長得都差不多的圖標,大多數(shù)情況下圖標下都跟隨著一個文本標簽用來告訴你“我”是干什么的. 用戶點擊圖標的時候你的圖標必須設(shè)計的盡量符合預(yù)期（不然就是WTF!!!）.

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

我們針對“使用或者不使用標簽”進行了一系列的用戶測試，然后我們發(fā)現(xiàn) 發(fā)現(xiàn)

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

關(guān)于這個，可以使用以下三點考慮:

在app中使用彈出提示引導(dǎo)用戶.

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

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

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

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

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

觸屏推薦目標大小為7–10mm。下面是為蘋果和谷歌平臺推薦的指南(iOS 人機界面指南與材料設(shè)計)：間隙區(qū)域。圖標:24dp

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