圖標(biāo)是UI設(shè)計(jì)中最常見(jiàn)的設(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)過(guò)分醒目，而影響內(nèi)容的可讀性淹朋。這與我們提到過(guò)的避免過(guò)度用色笙各、正確地排版钉答、使用網(wǎng)格、留白等設(shè)計(jì)方法的目的都是相一致的杈抢。
上面的圖片示例分別是蘋果的內(nèi)置應(yīng)用以及簡(jiǎn)書APP中的界面截圖数尿，它們都大量使用了線性圖標(biāo)，并且都放置在底欄的位置惶楼。這些圖標(biāo)都非常纖細(xì)而且采用中性色后更加不那么顯眼右蹦，但只要用過(guò)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è)功能頁(yè)面或上下文中。由于今天大部分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ì)頁(yè)面里并思，放置了一個(gè)五角星的圖標(biāo)，當(dāng)點(diǎn)擊它時(shí)语稠，并沒(méi)有收藏這件商品宋彼，而是直接跳轉(zhuǎn)到了給APP打分的頁(yè)面∠善瑁或許這是設(shè)計(jì)師為了提高APP的打分率而故意利用人們對(duì)常見(jiàn)圖標(biāo)的認(rèn)識(shí)做出的設(shè)計(jì)输涕，然而這對(duì)用戶來(lái)說(shuō)卻顯然不是一個(gè)好的設(shè)計(jì)。
下面這組圖標(biāo)慨畸，都是在各種UI設(shè)計(jì)中能夠經(jīng)忱晨玻看到的，并且它們都已經(jīng)有了自己默認(rèn)的含義寸士，你應(yīng)該挑選那些容易辨認(rèn)的圖標(biāo)檐什，以免發(fā)生混淆碴卧。而一個(gè)常見(jiàn)的做法，便是在圖標(biāo)下面加上文字描述乃正，這能有效避免混淆住册。當(dāng)然如果你不想這么做，也可以在用戶首次使用你的APP時(shí)瓮具，用一些提示告訴用戶圖標(biāo)所代表的含義荧飞。在使用過(guò)一次之后，用戶便會(huì)熟悉這些圖標(biāo)的功能和作用了名党。
尋找合適的圖標(biāo)
網(wǎng)上有很多圖標(biāo)資源叹阔，你也可以通過(guò)圖標(biāo)搜索引擎來(lái)獲取你所需要的圖標(biāo)。但我總是喜歡在自己的項(xiàng)目中選擇那些知名的圖標(biāo)集合兑巾，它們往往包含那些常用的圖標(biāo)条获，并且都經(jīng)過(guò)了良好的設(shè)計(jì)，使用它們能使你的設(shè)計(jì)具有一致的風(fēng)格蒋歌，也更容易讓你的用戶理解圖標(biāo)所表示的含義帅掘。
Font Awesome
Font Awesome是我最常使用的一套圖標(biāo)字體集合，包含超過(guò)630個(gè)常用圖標(biāo)堂油，涵蓋了常用Web圖標(biāo)修档、手型、交通工具府框、表單控制吱窝、文本編輯、常用商標(biāo)等各個(gè)方面迫靖。它既可以被作為圖標(biāo)在APP或Web應(yīng)用中使用院峡，也可以作為字體圖標(biāo)，以樣式的方式在HTML頁(yè)面中非常方便地進(jìn)行顯示系宜。
Ionicons
Ionicons是另一套免費(fèi)的圖標(biāo)集照激，他來(lái)自著名的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ì)靈感來(lái)自于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美元想帅，但可以說(shuō)是物有所值。
收集與整理圖標(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)我無(wú)法直接找到合適的圖標(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ì)工具里就可以了。另外只估，你還可以通過(guò)標(biāo)簽來(lái)給圖標(biāo)添加信息志群，這能幫助你快速定位到所需要的圖標(biāo)。
制作圖標(biāo)
由于我們中的大部分人并不是專業(yè)的圖標(biāo)設(shè)計(jì)師蛔钙，所以锌云，在收集了那些優(yōu)秀的圖標(biāo)資源之后，我們可以通過(guò)組合吁脱、切分桑涎、變形等手段來(lái)創(chuàng)造出所需要的圖標(biāo)。制作圖標(biāo)需要一些技巧兼贡，但更重要的是發(fā)揮你的想象力攻冷，去制作出生動(dòng)有趣，且具有標(biāo)識(shí)性的圖標(biāo)來(lái)遍希。
