圖標(biāo)是UI設(shè)計(jì)中最常見的設(shè)計(jì)元素之一，而且它們往往被賦予操作、提示、警告等重要作用。優(yōu)秀的圖標(biāo)往往有著相似的特性，它們能讓我們很容易地聯(lián)想到那些真實(shí)生活中最常用的東西，比如：照相機(jī)，計(jì)算器，垃圾桶，紙飛機(jī)等等。在這篇文章里我想分享一些自己使用圖標(biāo)的心得，以及如何找到那些優(yōu)秀的圖標(biāo)。

圖標(biāo)正變得扁平而纖細(xì)

如果你長(zhǎng)期使用蘋果手機(jī)，那你一定能夠發(fā)現(xiàn)幾乎所有內(nèi)置應(yīng)用以及其他APP中的圖標(biāo)正變得扁平而又纖細(xì)。而這背后的原因則是避免因圖標(biāo)過分醒目，而影響內(nèi)容的可讀性。這與我們提到過的避免過度用色、正確地排版、使用網(wǎng)格、留白等設(shè)計(jì)方法的目的都是相一致的。

上面的圖片示例分別是蘋果的內(nèi)置應(yīng)用以及簡(jiǎn)書APP中的界面截圖，它們都大量使用了線性圖標(biāo)，并且都放置在底欄的位置。這些圖標(biāo)都非常纖細(xì)而且采用中性色后更加不那么顯眼，但只要用過iOS的人，都會(huì)自然地在底欄中找到它們。

另外在UI設(shè)計(jì)中，我們會(huì)賦予圖標(biāo)兩種狀態(tài)，當(dāng)圖標(biāo)不是當(dāng)前選中狀態(tài)時(shí)，它是完全線性化的，而一旦這個(gè)圖標(biāo)被點(diǎn)擊，或處于激活狀態(tài)時(shí)，它便會(huì)被填充，這能幫助用戶區(qū)分當(dāng)前處在那個(gè)功能頁面或上下文中。由于今天大部分UI中的圖標(biāo)使用，都會(huì)遵循這個(gè)原則，因此，如果你錯(cuò)誤地使用了圖標(biāo)的狀態(tài)時(shí)，就會(huì)使用戶感到非常迷惑。

使圖標(biāo)能夠傳情達(dá)意

有一些網(wǎng)站或APP所使用的圖標(biāo)與我們對(duì)圖標(biāo)的習(xí)慣認(rèn)知不同，這會(huì)也讓使用者產(chǎn)生很大的困惑。比如，我曾看到有一個(gè)APP，它在商品的詳細(xì)頁面里，放置了一個(gè)五角星的圖標(biāo)，當(dāng)點(diǎn)擊它時(shí)，并沒有收藏這件商品，而是直接跳轉(zhuǎn)到了給APP打分的頁面。或許這是設(shè)計(jì)師為了提高APP的打分率而故意利用人們對(duì)常見圖標(biāo)的認(rèn)識(shí)做出的設(shè)計(jì)，然而這對(duì)用戶來說卻顯然不是一個(gè)好的設(shè)計(jì)。

下面這組圖標(biāo)，都是在各種UI設(shè)計(jì)中能夠經(jīng)?？吹降?，并且它們都已經(jīng)有了自己默認(rèn)的含義，你應(yīng)該挑選那些容易辨認(rèn)的圖標(biāo)，以免發(fā)生混淆。而一個(gè)常見的做法，便是在圖標(biāo)下面加上文字描述，這能有效避免混淆。當(dāng)然如果你不想這么做，也可以在用戶首次使用你的APP時(shí)，用一些提示告訴用戶圖標(biāo)所代表的含義。在使用過一次之后，用戶便會(huì)熟悉這些圖標(biāo)的功能和作用了。

尋找合適的圖標(biāo)

網(wǎng)上有很多圖標(biāo)資源，你也可以通過圖標(biāo)搜索引擎來獲取你所需要的圖標(biāo)。但我總是喜歡在自己的項(xiàng)目中選擇那些知名的圖標(biāo)集合，它們往往包含那些常用的圖標(biāo)，并且都經(jīng)過了良好的設(shè)計(jì)，使用它們能使你的設(shè)計(jì)具有一致的風(fēng)格，也更容易讓你的用戶理解圖標(biāo)所表示的含義。

Font Awesome

Font Awesome是我最常使用的一套圖標(biāo)字體集合，包含超過630個(gè)常用圖標(biāo)，涵蓋了常用Web圖標(biāo)、手型、交通工具、表單控制、文本編輯、常用商標(biāo)等各個(gè)方面。它既可以被作為圖標(biāo)在APP或Web應(yīng)用中使用，也可以作為字體圖標(biāo)，以樣式的方式在HTML頁面中非常方便地進(jìn)行顯示。

Ionicons

Ionicons是另一套免費(fèi)的圖標(biāo)集，他來自著名的Hybrid APP框架Ionic Framework。與Font Awsome一樣，它也是一套圖標(biāo)字體。利用Ionicons for Sketch插件，你可以在Sketch中方便地在你的設(shè)計(jì)中使用這些圖標(biāo)。

Themify Icons

Themify Icons也是我經(jīng)常使用的圖標(biāo)集合，與Font Awesome和Ionicons相比，這套圖標(biāo)設(shè)計(jì)得更加纖細(xì)，設(shè)計(jì)靈感來自于iOS 7中的圖標(biāo)設(shè)計(jì)，它也是免費(fèi)的，并且提供了Icon Font和WORDPRESS插件兩個(gè)不同的版本可供下載。

Pixel Love

Pixel Love可能是最優(yōu)秀的iOS圖標(biāo)集合了，包含了近5,000個(gè)不同類型的圖標(biāo)，幾乎可以滿足大部分的設(shè)計(jì)需要。但它并不是免費(fèi)的，購(gòu)買完整的版本需要99美元，但可以說是物有所值。

收集與整理圖標(biāo)

雖然上面提到的這些圖標(biāo)集合能夠滿足你的大部分需求，但你可能還需要不同類型或針對(duì)不同專業(yè)領(lǐng)域的圖標(biāo)。另外，在收集大量圖標(biāo)的同時(shí)，你也需要能夠更有效地管理它們，以便在需要時(shí)快速定位到你所需要的圖標(biāo)。

Icons Board

我?guī)缀趺刻鞎?huì)瀏覽Pinterest中的優(yōu)秀Post，這其中就包括那些最新的圖標(biāo)設(shè)計(jì)，我會(huì)將其中的優(yōu)秀圖標(biāo)加入到我的Icons Board中。當(dāng)我需要使用時(shí)，會(huì)首先在這些圖標(biāo)中進(jìn)行挑選。

購(gòu)買圖標(biāo)

有時(shí)候我也會(huì)需要針對(duì)某個(gè)專業(yè)領(lǐng)域的產(chǎn)品進(jìn)行設(shè)計(jì)，當(dāng)我無法直接找到合適的圖標(biāo)，或者那些網(wǎng)上的免費(fèi)圖標(biāo)并不能滿足我的設(shè)計(jì)要求時(shí)，我會(huì)到envato market中嘗試購(gòu)買圖標(biāo)，在那里你能找到很多針對(duì)不同主題的圖標(biāo)，包括銀行、保險(xiǎn)、食物、廚房、體育、交通工具等等。它們的價(jià)格不高，大約$6-$11，你可以購(gòu)買并將它們作為進(jìn)一步設(shè)計(jì)的基礎(chǔ)，這往往能夠?yàn)槲夜?jié)省大量的時(shí)間。

圖標(biāo)管理工具 Icon Jar

Icon Jar是一個(gè)Mac上的圖標(biāo)管理工具，你可以將你收集的圖標(biāo)導(dǎo)入到Icon Jar中進(jìn)行管理，它支持很多不同的圖標(biāo)格式，能很好地與PS，Sketch，AI等設(shè)計(jì)工具一起工作，簡(jiǎn)單地將你選擇的圖標(biāo)拖動(dòng)到這些設(shè)計(jì)工具里就可以了。另外，你還可以通過標(biāo)簽來給圖標(biāo)添加信息，這能幫助你快速定位到所需要的圖標(biāo)。

制作圖標(biāo)

由于我們中的大部分人并不是專業(yè)的圖標(biāo)設(shè)計(jì)師，所以，在收集了那些優(yōu)秀的圖標(biāo)資源之后，我們可以通過組合、切分、變形等手段來創(chuàng)造出所需要的圖標(biāo)。制作圖標(biāo)需要一些技巧，但更重要的是發(fā)揮你的想象力，去制作出生動(dòng)有趣，且具有標(biāo)識(shí)性的圖標(biāo)來。