筆者供職于Iconfinder,當(dāng)用戶將自己制作的圖標(biāo)上傳到Iconfinder后贝淤，我們都會(huì)對(duì)這些圖標(biāo)進(jìn)行審核與評(píng)級(jí)赔桌。界定平庸與優(yōu)秀的圖標(biāo)是件很有挑戰(zhàn)性的工作币旧，因?yàn)檫@兩者之間的差異往往很小融涣，然而正是這些細(xì)微的差異會(huì)對(duì)圖標(biāo)整體質(zhì)量產(chǎn)生巨大的影響柬讨。細(xì)節(jié)決定成敗這句話在圖標(biāo)設(shè)計(jì)上面體現(xiàn)的尤為明顯。

文中所舉例的圖片來(lái)自于Iconfinder用戶Kem Bardly伪货，他圖標(biāo)最初版本已經(jīng)很優(yōu)秀了们衙，但是仍有著很大的提升空間。我們給他提供了一些小的修改意見超歌，他修改了以后圖標(biāo)的質(zhì)感立馬就提升了一個(gè)檔次砍艾。在接下來(lái)的文中，我將一一列舉這些圖標(biāo)繪制中的小竅門巍举。

圖標(biāo)的三個(gè)特性

首先我們要知道(合格)圖標(biāo)的三個(gè)主要特性：形狀，視覺統(tǒng)一和可識(shí)別性凝垛。在設(shè)計(jì)過(guò)程中懊悯，這三個(gè)特性是設(shè)計(jì)師需要反復(fù)考慮的。即使我們?cè)谠O(shè)計(jì)單個(gè)圖標(biāo)的時(shí)候梦皮，這三個(gè)特性也要牢記著炭分。當(dāng)然圖標(biāo)不是僅僅這三個(gè)特性，但是這些特性可以幫助我們很快的提高自己的圖標(biāo)設(shè)計(jì)水平剑肯。?

形狀

形狀是一個(gè)圖標(biāo)的基本結(jié)構(gòu)捧毛，相當(dāng)于圖標(biāo)的骨架。主要的幾何形狀 —— 圓形让网，矩形和三角形 —— 構(gòu)成了圖標(biāo)設(shè)計(jì)的視覺基礎(chǔ)呀忧。在我們下圖的例子中，柯基狗的頭是由兩個(gè)三角形和兩個(gè)橢圓構(gòu)成的溃睹。大部分人都會(huì)選擇先畫大的部分而账，然后再處理那些小細(xì)節(jié)，其實(shí)圖標(biāo)需要著重表現(xiàn)的細(xì)節(jié)并不多因篇。圖標(biāo)上細(xì)節(jié)也是越多越好泞辐，這個(gè)后面詳細(xì)再說(shuō)。

視覺統(tǒng)一

在一個(gè)圖標(biāo)集里每一個(gè)圖標(biāo)都具有的元素的集合我們稱之為圖標(biāo)的視覺統(tǒng)一竞滓。這些相同的元素可能是相同半徑的圓角咐吼，線寬（描邊），用色等商佑。比如下面的例子里锯茄，Kem的圖標(biāo)集中，小狗的耳朵上的圓角都是2像素的莉御，描邊都是2像素的撇吞，鼻子都是心形的俗冻。這些共享的元素將圖標(biāo)集里的每個(gè)單個(gè)圖標(biāo)都聯(lián)系在一起。

可識(shí)別性

可識(shí)別性是一個(gè)圖標(biāo)的靈魂牍颈，是真正讓你的圖標(biāo)獨(dú)一無(wú)二的關(guān)鍵迄薄。圖標(biāo)其實(shí)也是一種語(yǔ)言，其作用就是來(lái)共同交流煮岁，不同的是這里信息的載體不是文字而是圖形讥蔽。

你的圖標(biāo)是否成功就在于用戶能否在極短的時(shí)候內(nèi)很容易的破譯你的信息。當(dāng)然圖標(biāo)的可識(shí)別性作用不僅僅于此画机，一個(gè)精妙的可識(shí)別性元素的使用會(huì)將整個(gè)圖標(biāo)集里的圖標(biāo)都聯(lián)系成一個(gè)整體冶伞，這里和上面說(shuō)的視覺統(tǒng)一很相像。比如下面的圖中步氏，我們可以一眼看出左邊的是柯基响禽，右邊的是哈士奇。因?yàn)樗鼈冇兄约禾赜械拿孕眩^型與耳朵也可以看出來(lái)這兩個(gè)圖標(biāo)出自同一個(gè)設(shè)計(jì)師之手或者直接來(lái)自同一個(gè)圖標(biāo)集芋类，因?yàn)橄嗤脑O(shè)計(jì)元素（眼睛，鼻子界阁，描邊侯繁，圓角）。

六大竅門

1?使用網(wǎng)格

所謂“無(wú)以規(guī)矩泡躯，不成方圓”贮竟，網(wǎng)格對(duì)圖標(biāo)的規(guī)范化設(shè)計(jì)有著極大的“約束”作用，不同尺寸的網(wǎng)格用途與用法也更不相同较剃。在這里咕别，我們主要說(shuō)的是32*32像素的網(wǎng)格。我們將網(wǎng)格劃分為不同的區(qū)域重付，不同的區(qū)域在整個(gè)圖標(biāo)里起到的作用也各不一樣顷级。

首先，最外層的兩像素的位置我們通橙返妫空著弓颈，不加任何東西。這樣做的原因是給圖標(biāo)創(chuàng)造出一些空間感删掀，而不至于太擠翔冀。我們稱這個(gè)區(qū)域?yàn)椤傲舭讌^(qū)”。里面的我們稱之為“內(nèi)容區(qū)”披泪。

圓形圖標(biāo)處于網(wǎng)格中心位置時(shí)經(jīng)常會(huì)觸及到內(nèi)容區(qū)的邊緣纤子，但是不會(huì)侵入留白區(qū)。當(dāng)然在一些特殊情況下，比如為了保持設(shè)計(jì)的完整性控硼，有時(shí)候圖標(biāo)中的一些次要元素進(jìn)入了留白區(qū)也是允許的泽论。如下圖所示

正方形圖標(biāo)大部分情況都會(huì)處于網(wǎng)格的中心位置，但不會(huì)過(guò)度延伸導(dǎo)致占據(jù)留白空間卡乾。為了保持與圓形和三角形一致的視覺權(quán)重翼悴，我們可以通過(guò)使用參考線將圖標(biāo)保持在網(wǎng)格的核心區(qū)（下圖的橙色區(qū)域）。當(dāng)然每個(gè)圖標(biāo)的核心區(qū)是由它自身的視覺權(quán)重所決定的幔妨。

2 勾勒

在圖標(biāo)設(shè)計(jì)的初始階段鹦赎，我們可以通過(guò)使用圓形、矩形和三角形這些基本幾何形狀將圖標(biāo)的大致形狀勾勒出來(lái)误堡。如果我們直接手繪圖標(biāo)輪廓的話古话，那么到圖標(biāo)制作階段一些手繪所帶來(lái)不精確的缺點(diǎn)就會(huì)凸顯出來(lái)。不僅如此锁施，使用形狀工具勾勒出草圖的圖標(biāo)在后期尺寸調(diào)整的中也會(huì)有據(jù)可循陪踩。誠(chéng)然一個(gè)圖標(biāo)集是由很多個(gè)元素構(gòu)成的，但是一個(gè)元素的脫節(jié)與不標(biāo)準(zhǔn)會(huì)影響圖標(biāo)集的整體質(zhì)量悉抵。所以直接使用形狀工具勾勒出草圖能起到規(guī)范化的作用膊毁，確保圖標(biāo)精確到像素級(jí)別。

3 常見的設(shè)計(jì)元素

通常情況下基跑，45°是一個(gè)完美角度。因?yàn)?5度角所產(chǎn)生的鋸齒會(huì)均勻的成階梯狀分布描焰，不會(huì)產(chǎn)生模糊效果媳否。圖標(biāo)可以以一直清晰的狀態(tài)展現(xiàn)出來(lái)，這很符合人類眼睛的審美需求荆秦。當(dāng)然在特殊情況下打破這個(gè)慣例也是允許的篱竭。嘗試使用22.5度，11.25度或者15度角的倍數(shù)步绸。

曲線如果繪制的不好會(huì)極大的影響圖標(biāo)的質(zhì)量掺逼，所以從曲線可以看出設(shè)計(jì)師的功底。人眼可以輕易的看出曲線上細(xì)微的差異瓤介，所以這對(duì)設(shè)計(jì)師的要求就很高吕喘。我們盡量使用形狀工具或者數(shù)字來(lái)創(chuàng)建曲線。非要用手繪來(lái)解決問(wèn)題的時(shí)候刑桑，推薦使用Adobe Illustrator氯质，當(dāng)然Vectorscrible和Inkscrible也可以完成精細(xì)曲線的繪制。下圖中就是手繪曲線時(shí)導(dǎo)致左邊右邊的不對(duì)稱祠斧。

我們?cè)谠O(shè)計(jì)過(guò)程中往往會(huì)遇到圖標(biāo)邊緣出現(xiàn)鋸齒的情況闻察，這樣的圖標(biāo)會(huì)模糊影響整體效果。出現(xiàn)這種情況是因?yàn)閳D形沒(méi)有達(dá)到像素級(jí)別的對(duì)齊。

兩種線寬是最合理的辕漂，當(dāng)然某些特定情況下三種也是必要的呢灶。我們引入不同的線寬的目的就是提升視覺層次感與多樣性。使用太多的線寬會(huì)破壞整個(gè)圖標(biāo)集的一致性钉嘹，這里指的是超過(guò)三個(gè)鸯乃。在大部分情況下，我們要盡量避免使用過(guò)細(xì)的線條隧期，除非你是特意想制作一套“線性風(fēng)格”的圖標(biāo)集飒责。

4 使用統(tǒng)一的設(shè)計(jì)元素

Dutch Icon的Hemmo de Jonge曾在圖標(biāo)沙龍2015的活動(dòng)上談到了這一點(diǎn)。在他和荷蘭政府合作的一個(gè)圖標(biāo)系統(tǒng)項(xiàng)目里仆潮，Hemmo和他的設(shè)計(jì)伙伴加一個(gè)缺口宏蛉。不是每一個(gè)圖標(biāo)都有這個(gè)缺口，但大多數(shù)都是性置。這種做法可以將這些單獨(dú)的圖標(biāo)有機(jī)的聯(lián)系在一起拾并。

重新回到狗狗的例子中來(lái)，我們也使用了同樣的手法鹏浅，那就是心形的鼻子嗅义。這個(gè)心形鼻子不僅將這些圖標(biāo)聯(lián)系起來(lái)還表現(xiàn)了狗是人類好朋友這條信息。

大部分情況下隐砸，即使圖標(biāo)集中的大部分元素都發(fā)生了變化之碗，但是相同的設(shè)計(jì)風(fēng)格會(huì)將這些圖標(biāo)聯(lián)系在一起。

5 把握細(xì)節(jié)尺度

圖標(biāo)中細(xì)節(jié)不是越多越好季希，越詳細(xì)越好褪那。因?yàn)閳D標(biāo)的主要功能就是在短時(shí)間內(nèi)給用戶傳遞信息。過(guò)多的細(xì)節(jié)會(huì)增加圖標(biāo)的復(fù)雜性進(jìn)而影響圖標(biāo)的可辨識(shí)度式塌。把握小細(xì)節(jié)的尺度是整個(gè)圖標(biāo)集的視覺統(tǒng)一性和可識(shí)別性中的重要一點(diǎn)博敬。

6 跨界思維

現(xiàn)在每天都有很多設(shè)計(jì)師在各種設(shè)計(jì)網(wǎng)站上上傳自己的圖標(biāo)作品，其中不乏一些精品峰尝。但是這些作品大部分都很相似偏窝，這些設(shè)計(jì)師說(shuō)好聽點(diǎn)是“緊跟時(shí)代潮流”，說(shuō)不好聽點(diǎn)就是跟風(fēng)武学。真正去“創(chuàng)作”圖標(biāo)祭往，你應(yīng)該將目光放得更遠(yuǎn)一點(diǎn)，去其他領(lǐng)域看看劳淆。比如链沼，建筑、隱私沛鸵、工業(yè)設(shè)計(jì)括勺、心理學(xué)和其他任何專業(yè)缆八。從這些看似與圖標(biāo)設(shè)計(jì)毫無(wú)聯(lián)系的領(lǐng)域里汲取靈感，給你的圖標(biāo)注入不同的思想疾捍。

總結(jié)

方法其實(shí)只要多加練習(xí)其實(shí)很容易掌握奈辰，難的是思想層面的轉(zhuǎn)變。圖標(biāo)設(shè)計(jì)是一個(gè)由整體到個(gè)體乱豆，由形狀到可識(shí)別性的過(guò)程奖恰。要時(shí)刻牢記你是在設(shè)計(jì)一整套圖標(biāo)集而不是一個(gè)圖標(biāo)，不要為了吸引眼球而刻意追求個(gè)體的標(biāo)新立異宛裕。