如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

來(lái)源：UI中國(guó)

筆者供職于Iconfinder,當(dāng)用戶(hù)將自己制作的圖標(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用戶(hù)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)都具有的元素的集合我們稱(chēng)之為圖標(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)的關(guān)鍵。圖標(biāo)其實(shí)也是一種語(yǔ)言，其作用就是來(lái)共同交流，不同的是這里信息的載體不是文字而是圖形。

你的圖標(biāo)是否成功就在于用戶(hù)能否在極短的時(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)造出一些空間感，而不至于太擠。我們稱(chēng)這個(gè)區(qū)域?yàn)椤傲舭讌^(qū)”。里面的我們稱(chēng)之為“內(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)，這很符合人類(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ì)稱(chēng)。

我們?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)了狗是人類(lèi)好朋友這條信息。

大部分情況下，即使圖標(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)給用戶(hù)傳遞信息。過(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é)和其他任何專(zhuān)業(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)新立異。

藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)