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

圖標(biāo)有以下分類(lèi)：系統(tǒng)圖標(biāo)，操作界面圖標(biāo)，手機(jī)主題圖標(biāo)。今天我們來(lái)改一組移動(dòng)端APP圖標(biāo)。同學(xué)們?cè)谠O(shè)計(jì)界面的時(shí)候，總是在設(shè)計(jì)icon這個(gè)板塊出現(xiàn)很多問(wèn)題，比如：一些同學(xué)在做首頁(yè)tab bar上的icon時(shí)出現(xiàn)一些比較基礎(chǔ)的問(wèn)題：icon不清晰，或者是描邊不統(tǒng)一，圖標(biāo)排在一起忽大忽小，不穩(wěn)定，設(shè)計(jì)風(fēng)格不統(tǒng)一等，接下來(lái)我們用一個(gè)案例來(lái)帶著同學(xué)們一步一步了解icon。

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

如圖：圖1為修改之前的icon，圖2為修改過(guò)的icon

首先我們來(lái)說(shuō)說(shuō)圖標(biāo)在設(shè)計(jì)的時(shí)候要遵循的原則：

1 語(yǔ)義明確

2 刻畫(huà)精細(xì)

語(yǔ)義明確：要做到icon與文字的含義相匹配，不能出現(xiàn)詞不達(dá)意的狀況?？坍?huà)精細(xì)要做到的是：首先就是不能出現(xiàn)虛邊，其次是顏色，大小，描邊，圓角，透視，角度都要統(tǒng)一。

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

第一步：語(yǔ)義明確

語(yǔ)義還不明確的情況下就開(kāi)始細(xì)化，會(huì)做很多無(wú)用功，我們做一個(gè)系列的東西一定要看一下整體是否自洽，是否表達(dá)了文字要表達(dá)的含義，我們看一下原稿，圖1：

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

第二步：從柵格開(kāi)始

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

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

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

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

第三步：像素級(jí)的精確

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

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

布爾運(yùn)算：矢量與矢量對(duì)齊

第四步:角度

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

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

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

統(tǒng)一元素

總結(jié)

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

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