了解食材是廚師的基本功課之一，了解器材是攝影師的基本功課之一，了解城管的時間表是賣熱干面大叔大媽的基本功課之一，了解各個組件的設(shè)計模式和屬性是交互設(shè)計師的基本功課之一。

一個按鈕，一個導(dǎo)航欄，一個文本框，一處icon的使用，平淡無奇，稀松平常，但其實(shí)用好它們也是有一番學(xué)問的。只有當(dāng)各個組件都被交互設(shè)計師以一種正確且入流的形態(tài)擺放在適當(dāng)?shù)奈恢?，我們才能在產(chǎn)品的可用性或者是說易用性上得到基礎(chǔ)的保證。

自有計算機(jī)圖形化操作界面那天起，人類就開始使用icon了，icon這東西妥妥的比一些90后設(shè)計師（比如我）還要大。icon在人機(jī)交互范疇內(nèi)來講較單純只使用文字主要有以下幾點(diǎn)優(yōu)勢：

• 簡單、醒目又友好，icon可以以一張圖的形式表達(dá)很多東西。
• 并且因此節(jié)省了大量空間，屏幕越小，它越顯得重要。
• 悅目，漂亮的圖片能為你的產(chǎn)品增色不少。
• 目前的潮流，大家伙都在用，用戶已經(jīng)習(xí)慣了這種設(shè)計模式。（詳情參見Windows Phone由7.0至10.0的版本更迭，R.I.P）

好處很多，但是一切來得并沒有那么容易，假如用不好的話會帶來非常不要的影響。這篇文章主要就是來跟大家說說在“使用icon”這件小事上普遍存在的問題，并給出一些與我們息息相關(guān)的案例，然后與大家分享一些解決問題的思路。

1. Icon本身要正確地傳達(dá)想要傳達(dá)的含義

這個問題比大家想象中更為普遍地存在，設(shè)計師經(jīng)常會出于“不想抄襲”，“看起來更加特別一些”等理由，設(shè)計出一些實(shí)際上真的很難懂的icon。撇開一張圖片的其他屬性，一個icon，最最首要的任務(wù)是傳達(dá)正確的含義。由定義來看，icon代表的是某個物體或某個動作，所以對于用戶來說，如果一枚icon并不能夠很清晰的傳達(dá)到正確的含義的話，它將變成一個視覺上的噪訊，會產(chǎn)生各種各樣的負(fù)面影響。

舉個例子，下面是幾個全宇宙都在使用的icon，（房子代表首頁，打印機(jī)代表打印，放大鏡代表搜索或放大），我猜我不說你也應(yīng)該能知道。

當(dāng)然了，這幾款全人類已經(jīng)達(dá)成共識的icon，大家用起來不會產(chǎn)生什么錯誤，然而問題是我們還有更多其他功能和物體需要用到icon來表示。來黑一黑蘋果（開玩笑啦），它的Game Center的icon看起來就沒能和“Game”產(chǎn)生很具體的聯(lián)系，如果把下面的“Game Center”去掉換成“App Store”，好像也并不是不行，這樣模棱兩可的icon是我們應(yīng)該盡量避免的。

另外一個例子，你們可能沒見過以前的Gmail的界面，當(dāng)時它并沒有把所有其他應(yīng)用都放到這個“抽象”的icon里面去，或許你經(jīng)驗(yàn)老道，這個icon你看多很多次，它代表菜單，但是用戶不是你。自以為別人和你一樣對某樣?xùn)|西很熟悉，是產(chǎn)生這類問題的根源。

Icon首先要做到的是清晰地表達(dá)某個意思，設(shè)計師們要確保這一點(diǎn)：

• 5秒原則：假如一個icon需要花費(fèi)超過五秒鐘的時間去思考它到底想表達(dá)什么，那么我們可以認(rèn)為這個icon的效率不夠高。
• 選擇大家都熟悉的樣式：就像上面舉的第一個例子一樣，用戶對于一個事物的理解很大程度建立在以往的經(jīng)驗(yàn)紙上。多使用大家都熟悉、或者是對應(yīng)平臺上建議使用的icon，這樣用戶就能復(fù)用以往的知識，降低用戶的認(rèn)知負(fù)擔(dān)，提高效率。

2. 由內(nèi)至外的簡單

老實(shí)說，icon并不是一個太適合設(shè)計師揮灑創(chuàng)意的地方。注意，我并不是說一定要循規(guī)蹈矩，照搬別人，但是一些基本又常見的功能，我們還是不要使用太時髦太超前的設(shè)計，這很容易發(fā)生錯誤。Icon不僅要看起來簡單，它的含義也應(yīng)該和它看起來一樣簡單，比如：刷新的icon就只能用作刷新操作，沒有別的意思。我們以此來降低用戶的學(xué)習(xí)成本，也提高了用戶的使用效率。

3. 帶上文字標(biāo)識

好的用戶體驗(yàn)?zāi)軌蛞栽S多不同的維度加以解釋，但無論從什么維度出發(fā)，減少用戶的思考時間都是所謂好的體驗(yàn)必然存在的一個原因，這也就是我們常掛在嘴邊的清晰度。Clarity（清晰度），在最近發(fā)布的iOS10人機(jī)界面設(shè)計指南中被提到了前所未有的高度，因此而改變設(shè)計思路的產(chǎn)品應(yīng)該會陸續(xù)到來，足以看到以往的好些設(shè)計對清晰度在某種程度上的忽視。

回到icon上面來，上文說到的用大家都在用的樣式的icon可以保證不出現(xiàn)離譜的問題，但是現(xiàn)實(shí)中我們并沒有那么走運(yùn)。一來，已經(jīng)被大眾所接受的樣式其實(shí)并不多。二來，我們的產(chǎn)品又何止這幾個常見的功能。所以設(shè)計出一個表意清晰的icon是及其困難的事情，而且不要以為用戶會試著去把每個icon都點(diǎn)一下看看會發(fā)生什么事情，記住記住，他們不是熱愛學(xué)習(xí)的你。

我們的用戶寶寶們，在實(shí)際生活中，每天面對著無數(shù)多的好的壞的界面（interface），他們并沒有多少探索精神。Icon帶來的問題比你想象中的更加泛濫和嚴(yán)重，模棱兩可，不知所云的icon是非常多的。那怎么辦呢？

請在條件允許的情況下為icon加上文字的描述吧，不要在這些點(diǎn)上過于嚴(yán)苛地追求簡潔。

UserTesting關(guān)于“icon帶不帶文字描述”做了一項調(diào)查，發(fā)現(xiàn)：

• 帶文字描述的icon，88%的用戶能夠在點(diǎn)擊之前成功的預(yù)測到這枚icon意味著什么。
• 不帶文字描述的icon，這個數(shù)字降到了60%，而對于那些代表著這個app獨(dú)有功能的icon，也就是說用戶可能以前從來沒有見過類似的icon，這個數(shù)字銳減到34%。

關(guān)于這個點(diǎn)，再說三件事：

• 注意我并沒有試圖把“使用icon”這件事情說得非常簡單。對于一些確實(shí)比較難以進(jìn)行抽象化處理的功能或者說動作，我們真的很難用一個小小的icon就說清楚。使用圖像傳遞信息有自己的局限性，這是無法突破的。所以如果可以的話，我建議大家盡量多為圖標(biāo)加上文字描述。
• icon的說明文字應(yīng)該一直就在那放著，很多視覺設(shè)計師覺得過多的文字會讓界面看起來不美觀，他們會更多的選擇在用戶首次打開app的時候給用戶一個引導(dǎo)，但是你造嗎？大多數(shù)精心設(shè)計的引導(dǎo)都會被無情的跳過，即便是認(rèn)認(rèn)真真的看了一遍，他們也會迅速忘記所有東西。
• 有圖有文總是最好的，假如你只能選擇一種，那么就用文字吧，在追求清晰度的前提下，文字是更好的選擇。

4. 好操作的icon（移動端產(chǎn)品）

在移動端產(chǎn)品上，用戶的操作基本是用自己的手指來點(diǎn)擊觸摸屏完成，所以界面元素一定要足夠大以讓用戶能夠輕易地進(jìn)行操作。下面給出一張圖，大家看看人類的指頭（食指）的寬度，人類指頭寬度的均值是11mm，嬰兒的指頭寬度通常是8mm左右，而一些籃球運(yùn)動員的指頭寬度能達(dá)到19mm！

由上述數(shù)據(jù)得出，觸摸屏上的可觸控面積的物理尺寸最好在7-10mm左右。下面是蘋果的iOS人機(jī)界面設(shè)計指南和谷歌的MD設(shè)計指南中推薦的可觸控物件的尺寸。

• 水果家說，最小不能小于高44px，寬44px。（或許就是因?yàn)檫@個，iPhone上的產(chǎn)品的按鈕普遍要比Andriod上來的要小很多，必經(jīng)iPhone的屏幕也越來越大了，期望在iOS10中會有所改進(jìn)。）
• 谷歌家推薦的最小尺寸為48dp X 48dp，在大部分安卓設(shè)備上，48dp X 48dp的物理尺寸大約表現(xiàn)為9mm。即便你的icon看起來并沒有那么大，但是點(diǎn)起來也要有那么大。

另外一點(diǎn)也需要考慮：

• 兩個可觸控區(qū)域之間的距離應(yīng)該在2mm以上，以避免用戶的誤操作。

5. 上手測試一下你的icon

Icon是那種最容易出現(xiàn)“看起來沒問題”的現(xiàn)象的東西，所以，如果有需要，正兒八經(jīng)地測試一下它的可用性吧。當(dāng)然，別拿你自己來測，這是你設(shè)計的東西，你已經(jīng)熟悉每一粒像素了，咱不能耍流氓。找個以往沒用過的人來測試一下，這才是有價值的測試。

• 是否很好懂。在使用之前讓你的測試對象預(yù)測一下點(diǎn)擊這個icon將會發(fā)生什么事情，如果猜對了，你和他都獎一顆糖,如果猜對了，請不要強(qiáng)行說人家笨，自己看看問題出在哪兒。
• 是否很好點(diǎn)。這時候那些五花八門的可交互原型制作軟件就能很好地排上用場了。把你想象中的東西做出來，看看在實(shí)際操作中表現(xiàn)的是不是那么一回事。

結(jié)論

Icon設(shè)計是ui設(shè)計里的重頭戲，它可以很好，也可以很差。正如其他組件一樣，icon首先應(yīng)該做到它最該做到的事情，當(dāng)一切都被正確地設(shè)計，icon帶來的收益是巨大的。

原文地址：http://babich.biz/tips-for-using-icons-in-your-app/

譯者：朱宇軒，一枚交互設(shè)計師，知乎專欄：DesignCoder

本文由 @朱宇軒 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。