研究了上百套圖標(biāo)，總監(jiān)卻告訴我圖標(biāo)要這樣畫
首發(fā)：UX小學(xué)
這是一篇關(guān)于圖標(biāo)設(shè)計(jì)的干貨文章。內(nèi)容分為兩點(diǎn)：
1) 主要講述如何快速繪制精致圖標(biāo)的經(jīng)驗(yàn)與技巧，有效提升專業(yè)力。
2) 講述團(tuán)隊(duì)內(nèi)有多個(gè)設(shè)計(jì)師協(xié)作的時(shí)候，如何制定圖標(biāo)設(shè)計(jì)規(guī)范，來約束大家繪制的圖標(biāo)icon畫風(fēng)一致，讓設(shè)計(jì)更整體。
回想一下自己也很久沒畫icon，所以這次有點(diǎn)獻(xiàn)丑了！
一、歸納圖標(biāo)設(shè)計(jì)原則
設(shè)計(jì)分析圖標(biāo)的基礎(chǔ)特征點(diǎn)
動(dòng)手設(shè)計(jì)之前，咱們先對(duì)完整的圖標(biāo)集進(jìn)行下分析。
弄明白在畫整體的系統(tǒng)圖標(biāo)集合時(shí)，各個(gè)圖標(biāo)得具備哪些特征，有哪些切入點(diǎn)，可以作為我們?cè)趯?shí)際繪制時(shí)候的依據(jù)。
先來看幾組 iconfont 的案例，看不太清的同學(xué)可以戳圖片放大。
圍繞上面這些案例，咱們可以歸納出圖標(biāo)的幾點(diǎn)設(shè)計(jì)原則。比如：
1）設(shè)計(jì)圖標(biāo)需要考慮延續(xù)性，圖標(biāo)之間互相牽連影響
圖標(biāo)幾乎不會(huì)以單個(gè)的形式出現(xiàn)，大多數(shù)都是以組歸類。符號(hào)整體性與統(tǒng)一性，都是依靠單個(gè) icon 的共性特征建立起來的。
比如 iconfont 中的這組icon，圖標(biāo)圓形的外輪廓，就保持了一致。其次用戶頭像的代表符號(hào)，也很好保持了延續(xù)性。
正是這種小特征，共同組成了圖標(biāo)庫的整體特征。
2）設(shè)計(jì)手法趨同、圖形內(nèi)容差異
第二點(diǎn)好理解，設(shè)計(jì)風(fēng)格、手法要素需要統(tǒng)一，但是內(nèi)容傳達(dá)的差異必須要拉開，避免圖形趨同導(dǎo)致功能混淆。
比如下面兩個(gè)案例，由于過于相近，導(dǎo)致用戶很難理解圖標(biāo)含義，是天氣，還是設(shè)置按鈕，這種情況我們?cè)谠O(shè)計(jì)時(shí)需要極力避免。
總結(jié)來說，就是圖標(biāo)的共性往往體現(xiàn)在設(shè)計(jì)手法上，比如顏色、形狀粗細(xì)、細(xì)節(jié)的一致性，這些都是設(shè)計(jì)風(fēng)格的統(tǒng)一。
而圖標(biāo)的特性，往往體現(xiàn)在形狀內(nèi)容差異，形狀會(huì)決定圖標(biāo)的信息傳遞含義。所以共性要趨同，特性要拉開，這個(gè)是設(shè)計(jì)圖標(biāo)集的基本原則。
3）功能大于形式，圖形能理解的情況下樣式越簡(jiǎn)潔越好
不知道大家是否關(guān)注，曾經(jīng)在設(shè)計(jì)圈風(fēng)靡一時(shí)的MEB圖標(biāo)風(fēng)格，產(chǎn)品圈卻非常冷門，幾乎沒有產(chǎn)品在繼續(xù)用這種風(fēng)格作為功能性質(zhì)圖標(biāo)。
該作品來自于網(wǎng)絡(luò)圖片，僅作交流使用
因?yàn)殡m然圖標(biāo)增加了小裝飾后，顯得有趣精致，但其實(shí)也增加了圖標(biāo)的識(shí)別難度以及識(shí)別效率，反而背離了圖標(biāo)的設(shè)計(jì)初衷。
所以對(duì)于系統(tǒng)功能圖標(biāo)而言，必要的簡(jiǎn)潔性，高效的識(shí)別率，才是關(guān)鍵。
二、如何制定圖標(biāo)設(shè)計(jì)規(guī)范
規(guī)范設(shè)定：圖標(biāo)的設(shè)計(jì)約束性
說完了設(shè)計(jì)主張，及基本的特征。接下來咱們開始剖析圖標(biāo)的設(shè)計(jì)細(xì)節(jié)，包括分析制定圖標(biāo)的系統(tǒng)設(shè)計(jì)規(guī)范，應(yīng)該從哪些方面入手。
1）規(guī)范一：基本尺寸比例
規(guī)范的第一點(diǎn)，就是圖標(biāo)的基礎(chǔ)形狀比例。這個(gè)比例，主要是約束長與寬，共包含了四個(gè)關(guān)系，分別為『 正方形 : 橫矩形 ：豎矩形 ：圓形 』
這四個(gè)關(guān)系的約束，會(huì)讓圖標(biāo)集里的所有圖標(biāo)大小，看起來是一致的、統(tǒng)一的。橫矩形、豎矩形這兩個(gè)比例，會(huì)決定整套圖標(biāo)的飽滿程度，橫豎比例越一致，圖標(biāo)整體越飽滿。
這點(diǎn)大家可以自己斟酌，如果是泛娛樂型的產(chǎn)品，icon可以更飽滿一些。如果是偏工具化產(chǎn)品，那么還是可以優(yōu)先保障圖標(biāo)的識(shí)別度，飽滿程度倒是其次。
圓潤飽滿型：
剛正工具型：
2）規(guī)范二：線條粗細(xì)、正負(fù)形間距
定了比例后，接下里就是對(duì)圖標(biāo)的細(xì)節(jié)刻畫。對(duì)于線性圖標(biāo)而言，最重要的細(xì)節(jié)就是線條粗細(xì)；對(duì)于面性圖標(biāo)而言，最重要的就是正負(fù)形之間的間距。
所以這些核心元素，在圖標(biāo)的核心線條、核心區(qū)域部分，間距樣式都應(yīng)當(dāng)保持統(tǒng)一。
通常在移動(dòng)端@2x內(nèi)，主流icon的粗細(xì)為3px，而4px大多數(shù)都是為功能性導(dǎo)航icon，細(xì)一點(diǎn)的圖標(biāo)通常看起來會(huì)更精致一些。
當(dāng)然也有部分產(chǎn)品使用的是2px，比如新版的YouTube，其次還有些較為復(fù)雜的icon，單根粗細(xì)的線段不一定能滿足其需求，所以還需要制定一條副線的粗細(xì)。
細(xì)節(jié)可以根據(jù)產(chǎn)品的調(diào)性來定，統(tǒng)一即可。
3）規(guī)范三：圓角、角度個(gè)性化元素
大比例跟基本元素確定后，也可以制定一些圖標(biāo)的個(gè)性化元素規(guī)范，比如圖標(biāo)的圓角大小、角度位置，等一些特殊的樣式。
像這些個(gè)性化的規(guī)范，顆粒度可以Case By Case來定義，圓潤還是方正，可以根據(jù)產(chǎn)品的視覺風(fēng)格來定義就好。
這些規(guī)范樣式定好，就可以充分的讓圖標(biāo)集內(nèi)的圖標(biāo)，從設(shè)計(jì)上是保持一致的，且具有特色感。
三、圖標(biāo)的設(shè)計(jì)流程
設(shè)計(jì)方法：自己動(dòng)手怎么做？
上面講了關(guān)于圖標(biāo)的分析及規(guī)范。為了方便大家掌握，接下來咱們就來講講，具體動(dòng)手做，流程是什么樣的。這里我給個(gè)我的步驟作為參考：
1）第一步：繪制好圖標(biāo)基本網(wǎng)格
第一步，當(dāng)然是確定好圖標(biāo)icon的大小，以及上面我提到的基本尺寸比例，四個(gè)關(guān)系『 正方形 : 橫矩形 ：豎矩形 ：圓形 』 的約束，構(gòu)建好基本骨骼。
我這里以圖標(biāo)容器大小為 56x56，預(yù)留8px安全間距，圖標(biāo)最大大小為 48x48。
由于視差關(guān)系，圓形在圖標(biāo)里面的尺寸是最大的，所以圓形的大小為48x48。因?yàn)槲蚁雸D標(biāo)飽滿一些，所以正方形的大小我兩邊各減去2，為42x42。
然后再繪制出橫矩形（48x36）與豎矩形（36x48），各線段之間的間距保持一致。
然后各個(gè)形狀居中對(duì)齊，這樣四個(gè)關(guān)系『 正方形 : 橫矩形 ：豎矩形 ：圓形 』定好后，基本的容器就制定好啦。
2）第二步：設(shè)定圖標(biāo)基本規(guī)范
接著制定好圖標(biāo)的基本規(guī)范，為了方便大家看得清，我這里設(shè)定圖標(biāo)的線條粗細(xì)為3px，圓角為6px，干凈簡(jiǎn)潔一些，讓它看起來更飽滿。
角度、斷點(diǎn)啥的，我這里就不定義了，因?yàn)橹皇鞘纠o大家看，講一下流程，所以盡可能簡(jiǎn)單一些。大家在做練習(xí)的時(shí)候，也可以嘗試自己去定義一下！
3）第三步：繪制圖標(biāo)
好了后就可以開始繪制圖標(biāo)啦。我這里分別繪制十五個(gè)，作為示例
然后就是使用路徑工具，根據(jù)創(chuàng)意去繪制完善圖標(biāo)了。繪制的過程中，也可以不斷調(diào)整，讓圖標(biāo)看起來更協(xié)調(diào)，更飽滿，更容易識(shí)別。
花了十五分鐘左右，簡(jiǎn)單的十五個(gè)圖標(biāo)草稿就畫好了，接下來咱們開始調(diào)整細(xì)節(jié)。
4）第四步：整體性調(diào)整
所有的圖標(biāo)繪制好了后，咱們就可以整體性的開始打磨細(xì)節(jié)，把圖標(biāo)形狀的一些折角處、大小樣式調(diào)整一致，讓圖標(biāo)的節(jié)奏更清晰，整體樣式更統(tǒng)一。
這樣一組精致的系統(tǒng)icon，就繪制好啦。
接著咱們也可以加點(diǎn)特色風(fēng)格進(jìn)行嘗試，比如 填充一個(gè)顏色 。成功晉升美團(tuán)設(shè)計(jì)師。
當(dāng)然細(xì)看的話，圖標(biāo)部分細(xì)節(jié)還是有點(diǎn)糙，其實(shí)還可以再調(diào)調(diào)，但這個(gè)主要做示例用，所以這個(gè)程度應(yīng)該也可以。希望大家自己在做練習(xí)的時(shí)候，不要偷懶。
四、圖標(biāo)庫下載
設(shè)計(jì)資源干貨下載
上面講了很多方法經(jīng)驗(yàn)，文末給大家來點(diǎn)實(shí)際的。
我珍藏了很多較為不錯(cuò)的大廠圖標(biāo)集合庫，日常在畫圖標(biāo)沒靈感的時(shí)候，就會(huì)打開看看這些，參考一下。
文件都是矢量格式的，編輯方便，還很全面。今天拿出來送大家白嫖了。
鏈接：https://pan.baidu.com/share/init?surl=yjGooYewfnHUx7xakLwSew 提取碼：dea5
作者公眾號(hào)：UX小學(xué)（ID：hello-uxd）
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
暫無評(píng)論哦，快來評(píng)論一下吧！
全部評(píng)論（0條）