圖標(biāo)有以下分類：系統(tǒng)圖標(biāo)宪潮，操作界面圖標(biāo)，手機(jī)主題圖標(biāo)趣苏。今天我們來改一組移動端APP圖標(biāo)狡相。同學(xué)們在設(shè)計界面的時候，總是在設(shè)計icon這個板塊出現(xiàn)很多問題食磕，比如：一些同學(xué)在做首頁tab bar上的icon時出現(xiàn)一些比較基礎(chǔ)的問題：icon不清晰尽棕，或者是描邊不統(tǒng)一，圖標(biāo)排在一起忽大忽小彬伦，不穩(wěn)定滔悉，設(shè)計風(fēng)格不統(tǒng)一等，接下來我們用一個案例來帶著同學(xué)們一步一步了解icon单绑，同學(xué)們心中可能會有很多疑問：制作icon的流程是什么回官？應(yīng)該遵循的原則是什么？怎么評判icon是否優(yōu)秀搂橙？什么時候打破常規(guī)設(shè)計屬于自己產(chǎn)品的icon歉提，我相信讀完這篇文章，你就會有答案份氧。如圖：圖1為修改之前的icon唯袄，圖2為修改過的icon

修改前后.png

首先我們來說說圖標(biāo)在設(shè)計的時候要遵循的原則：

1 語義明確
2 刻畫精細(xì)

語義明確：要做到icon與文字的含義相匹配，不能出現(xiàn)詞不達(dá)意的狀況蜗帜。刻畫精細(xì)要做到的是：首先就是不能出現(xiàn)虛邊资厉，其次是顏色厅缺，大小，描邊，圓角湘捎，透視诀豁，角度都要統(tǒng)一。

基本的原則和理論我們知道了窥妇，但是要怎么應(yīng)用到具體的icon中呢舷胜？接下來我們通過幾個工作流程來充分應(yīng)用一下這些原則。

第一步：語義明確

語義還不明確的情況下就開始細(xì)化活翩，會做很多無用功烹骨，我們做一個系列的東西一定要看一下整體是否自洽，是否表達(dá)了文字要表達(dá)的含義材泄，我們看一下原稿沮焕，圖1：

修改前.jpg

標(biāo)簽欄分為五個板塊：活動，發(fā)現(xiàn)拉宗，圈子峦树，商城，我的旦事。這款app是一款戶外野營類app魁巩，所以第一個活動的icon有點不符合產(chǎn)品調(diào)性，所以需要更改姐浮；圈子這個板塊的圖標(biāo)是是一圈一圈的對話氣泡歪赢，從視覺上和發(fā)現(xiàn)的板塊雷同，需要更換单料；商城板塊的icon是一個帶著帽子的人頭埋凯，雖然符合產(chǎn)品調(diào)性，但是沒有表達(dá)出商城的含義扫尖，需要更換白对。如下圖為更改之后的icon家族：

更換圖標(biāo).png

第二步：從柵格開始

我們選擇了更加適當(dāng)?shù)膇con，之后開始更加嚴(yán)格的規(guī)范icon换怖。這就需要一個輔助工具：柵格甩恼。移動端主要是安卓和蘋果，所以我們的柵格體系也有兩種沉颂，在做設(shè)計的時候根據(jù)產(chǎn)品調(diào)性自主選擇一套適合自己產(chǎn)品的柵格體系条摸。下圖為柵格體系：

圖1為安卓柵格，圖2 為iOS柵格.jpg

我們把icon放到柵格中檢查icon是否大小一致铸屉，如圖：

柵格體系.png

如上圖钉蒲，商城的icon稍微超出了柵格的邊界，記住,你不需要時時刻刻都嚴(yán)格遵守柵格和規(guī)則彻坛，柵格是幫助你創(chuàng)建統(tǒng)一的icon家族,但是如果需要在創(chuàng)建更好的icon和嚴(yán)格遵守規(guī)則之間選擇的話,請打破原則,只是做的時候謹(jǐn)慎些顷啼。

第三步：像素級的精確

當(dāng)創(chuàng)建小尺寸icon時,像素級對齊是非常重要的踏枣。小尺寸icon的抗鋸齒渲染邊緣會看起來模糊。怎么做到清晰呢钙蒙？在ps里我們要挑出設(shè)置面板茵瀑，把矢量對齊像素網(wǎng)格勾選上：

如圖，矢量對齊到像素網(wǎng)格.png

不僅要做到矢量與像素網(wǎng)格對齊躬厌，還要讓矢量與矢量對齊马昨，在ps里我們繪制矢量圖標(biāo)會用到布爾運(yùn)算，一定要注意圖形與圖形之間的關(guān)系扛施，相切鸿捧，相交，都要對好位置煮嫌，這是一個設(shè)計師精準(zhǔn)和專業(yè)的體現(xiàn)笛谦。如圖：布爾運(yùn)算的運(yùn)用

布爾運(yùn)算：矢量與矢量對齊.png

第四步:角度

同學(xué)們經(jīng)常在角度這里沒有引起重視，畫的圖標(biāo)會有小數(shù)點或是有個位數(shù)的角度昌阿，這種情況在切圖和前端工程師對接的時候會有很多問題饥脑，所以圖標(biāo)角度最好是30度，45度懦冰，60度灶轰，90度，120度這些有秩序有規(guī)律的數(shù)值刷钢，不要出現(xiàn)小數(shù)點和個位數(shù)的情況笋颤，形成這種制造規(guī)律和秩序的習(xí)慣，對設(shè)計師的進(jìn)階有著至關(guān)重要的作用内地。如圖：

角度：最好為整數(shù)的度數(shù).png

第五：使用統(tǒng)一的設(shè)計元素和符號

在一套icon中加入同一元素,可以增進(jìn)統(tǒng)一性伴澄，使單個的icon成為一套圖標(biāo)家族，接下來我們給icon的拐角處增加了圓角阱缓，這個特征不僅使這些icon成為系列,也增加了特征非凌。

統(tǒng)一元素.png

統(tǒng)一元素3.png

總結(jié)

我們分享了如何優(yōu)化APP圖標(biāo)的基礎(chǔ)方法。任何人都可以通過練習(xí)學(xué)習(xí)并掌握荆针。創(chuàng)建好的icon要從產(chǎn)品調(diào)性出發(fā),再不斷細(xì)化出產(chǎn)品特色(刻畫精致),在一個或一套icon中應(yīng)用共同元素使你的icon保持內(nèi)外統(tǒng)一敞嗡。一旦你掌握了技術(shù)方法,你才會更加關(guān)注如何真正使你的icon變得優(yōu)秀。