UI設(shè)計師教你優(yōu)化APP icon

圖標(biāo)有以下分類：系統(tǒng)圖標(biāo)，操作界面圖標(biāo)，手機主題圖標(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。

文章是根據(jù)UI設(shè)計學(xué)生在練習(xí)是經(jīng)常犯的錯誤所寫，主要針對新手設(shè)計師，有大神有其他觀點歡迎分享。

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

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

1 語義明確

2 刻畫精細

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

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

第一步：語義明確

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

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

第二步：從柵格開始

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

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

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

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

第三步：像素級的精確

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

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

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

第四步:角度

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

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

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

統(tǒng)一元素

總結(jié)

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

相關(guān)文章--,《Uber UI設(shè)計師告訴你小白的差距》