筆者供職于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)秀了冶匹，但是仍有著很大的提升空間习劫。我們給他提供了一些小的修改意見(jiàn)，他修改了以后圖標(biāo)的質(zhì)感立馬就提升了一個(gè)檔次嚼隘。在接下來(lái)的文中诽里，我將一一列舉這些圖標(biāo)繪制中的小竅門(mén)。
圖標(biāo)的三個(gè)特性
首先我們要知道(合格)圖標(biāo)的三個(gè)主要特性：形狀飞蛹，視覺(jué)統(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ì)的視覺(jué)基礎(chǔ)闪唆。在我們下圖的例子中，柯基狗的頭是由兩個(gè)三角形和兩個(gè)橢圓構(gòu)成的钓葫。大部分人都會(huì)選擇先畫(huà)大的部分悄蕾，然后再處理那些小細(xì)節(jié)，其實(shí)圖標(biāo)需要著重表現(xiàn)的細(xì)節(jié)并不多础浮。圖標(biāo)上細(xì)節(jié)也是越多越好帆调，這個(gè)后面詳細(xì)再說(shuō)。
視覺(jué)統(tǒng)一
在一個(gè)圖標(biāo)集里每一個(gè)圖標(biāo)都具有的元素的集合我們稱之為圖標(biāo)的視覺(jué)統(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ō)的視覺(jué)統(tǒng)一很相像吱型。比如下面的圖中，我們可以一眼看出左邊的是柯基陨仅，右邊的是哈士奇津滞。因?yàn)樗鼈冇兄约禾赜械拿^型與耳朵也可以看出來(lái)這兩個(gè)圖標(biāo)出自同一個(gè)設(shè)計(jì)師之手或者直接來(lái)自同一個(gè)圖標(biāo)集灼伤，因?yàn)橄嗤脑O(shè)計(jì)元素（眼睛触徐，鼻子，描邊狐赡，圓角）撞鹉。
六大竅門(mén)
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ù)留白空間。為了保持與圓形和三角形一致的視覺(jué)權(quán)重目锭，我們可以通過(guò)使用參考線將圖標(biāo)保持在網(wǎng)格的核心區(qū)（下圖的橙色區(qū)域）评汰。當(dāng)然每個(gè)圖標(biāo)的核心區(qū)是由它自身的視覺(jué)權(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 常見(jiàn)的設(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)然某些特定情況下三種也是必要的。我們引入不同的線寬的目的就是提升視覺(jué)層次感與多樣性焙矛。使用太多的線寬會(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)集的視覺(jué)統(tǒng)一性和可識(shí)別性中的重要一點(diǎn)。
6 跨界思維
現(xiàn)在每天都有很多設(shè)計(jì)師在各種設(shè)計(jì)網(wǎng)站上上傳自己的圖標(biāo)作品陕悬，其中不乏一些精品题暖。但是這些作品大部分都很相似，這些設(shè)計(jì)師說(shuō)好聽(tīng)點(diǎn)是“緊跟時(shí)代潮流”捉超，說(shuō)不好聽(tīng)點(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)新立異。
原作者：Scott Lewis
譯者：王M爭(zhēng)
原文鏈接：http://www.ui.cn/detail/191845.html
