圖標有以下分類：系統(tǒng)圖標，操作界面圖標，手機主題圖標。今天我們來改一組移動端APP圖標。同學們在設計界面的時候，總是在設計icon這個板塊出現很多問題，比如：一些同學在做首頁tab bar上的icon時出現一些比較基礎的問題：icon不清晰，或者是描邊不統(tǒng)一，圖標排在一起忽大忽小，不穩(wěn)定，設計風格不統(tǒng)一等，接下來我們用一個案例來帶著同學們一步一步了解icon。

文章是根據承輝學院學生在練習是經常犯的錯誤所寫，主要針對新手設計師，有大神有其他觀點歡迎分享。

如圖：圖1為修改之前的icon，圖2為修改過的icon

首先我們來說說圖標在設計的時候要遵循的原則：

1 語義明確

2 刻畫精細

語義明確：要做到icon與文字的含義相匹配，不能出現詞不達意的狀況?？坍嬀氁龅降氖牵菏紫染褪遣荒艹霈F虛邊，其次是顏色，大小，描邊，圓角，透視，角度都要統(tǒng)一。

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

第一步：語義明確

語義還不明確的情況下就開始細化，會做很多無用功，我們做一個系列的東西一定要看一下整體是否自洽，是否表達了文字要表達的含義，我們看一下原稿，圖1：

標簽欄分為五個板塊：活動，發(fā)現，圈子，商城，我的。這款app是一款戶外野營類app，所以第一個活動的icon有點不符合產品調性，所以需要更改；圈子這個板塊的圖標是是一圈一圈的對話氣泡，從視覺上和發(fā)現的板塊雷同，需要更換；商城板塊的icon是一個帶著帽子的人頭，雖然符合產品調性，但是沒有表達出商城的含義，需要更換。如下圖為更改之后的icon家族：

第二步：從柵格開始

我們選擇了更加適當的icon，之后開始更加嚴格的規(guī)范icon。這就需要一個輔助工具：柵格。移動端主要是安卓和蘋果，所以我們的柵格體系也有兩種，在做設計的時候根據產品調性自主選擇一套適合自己產品的柵格體系。下圖為柵格體系：

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

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

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

第三步：像素級的精確

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

如圖，矢量對齊到像素網格

不僅要做到矢量與像素網格對齊，還要讓矢量與矢量對齊，在ps里我們繪制矢量圖標會用到布爾運算，一定要注意圖形與圖形之間的關系，相切，相交，都要對好位置，這是一個設計師精準和專業(yè)的體現。如圖：布爾運算的運用

布爾運算：矢量與矢量對齊

第四步:角度

同學們經常在角度這里沒有引起重視，畫的圖標會有小數點或是有個位數的角度，這種情況在切圖和前端工程師對接的時候會有很多問題，所以圖標角度最好是30度，45度，60度，90度，120度這些有秩序有規(guī)律的數值，不要出現小數點和個位數的情況，形成這種制造規(guī)律和秩序的習慣，對設計師的進階有著至關重要的作用。如圖

角度：最好為整數的度數

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

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

統(tǒng)一元素

總結

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