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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

請(qǐng)?jiān)跅l件允許的情況下為icon加上文字的描述吧，不要在這些點(diǎn)上過(guò)于嚴(yán)苛地追求簡(jiǎn)潔。

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

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

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

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

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

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

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

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

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

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

5. 上手測(cè)試一下你的icon

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

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

結(jié)論

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

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

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

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