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

來源：UI中國

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

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

圖標的三個特性

首先我們要知道(合格)圖標的三個主要特性：形狀，視覺統(tǒng)一和可識別性。在設(shè)計過程中，這三個特性是設(shè)計師需要反復(fù)考慮的。即使我們在設(shè)計單個圖標的時候，這三個特性也要牢記著。當(dāng)然圖標不是僅僅這三個特性，但是這些特性可以幫助我們很快的提高自己的圖標設(shè)計水平。

形狀

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

視覺統(tǒng)一

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

可識別性

可識別性是一個圖標的靈魂，是真正讓你的圖標的關(guān)鍵。圖標其實也是一種語言，其作用就是來共同交流，不同的是這里信息的載體不是文字而是圖形。

你的圖標是否成功就在于用戶能否在極短的時候內(nèi)很容易的破譯你的信息。當(dāng)然圖標的可識別性作用不僅僅于此，一個精妙的可識別性元素的使用會將整個圖標集里的圖標都聯(lián)系成一個整體，這里和上面說的視覺統(tǒng)一很相像。比如下面的圖中，我們可以一眼看出左邊的是柯基，右邊的是哈士奇。因為它們有著自己特有的毛色，頭型與耳朵也可以看出來這兩個圖標出自同一個設(shè)計師之手或者直接來自同一個圖標集，因為相同的設(shè)計元素（眼睛，鼻子，描邊，圓角）。

六大竅門

1 使用網(wǎng)格

所謂“無以規(guī)矩，不成方圓”，網(wǎng)格對圖標的規(guī)范化設(shè)計有著極大的“約束”作用，不同尺寸的網(wǎng)格用途與用法也更不相同。在這里，我們主要說的是32*32像素的網(wǎng)格。我們將網(wǎng)格劃分為不同的區(qū)域，不同的區(qū)域在整個圖標里起到的作用也各不一樣。

首先，最外層的兩像素的位置我們通?？罩?，不加任何東西。這樣做的原因是給圖標創(chuàng)造出一些空間感，而不至于太擠。我們稱這個區(qū)域為“留白區(qū)”。里面的我們稱之為“內(nèi)容區(qū)”。

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

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

2 勾勒

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

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

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

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

我們在設(shè)計過程中往往會遇到圖標邊緣出現(xiàn)鋸齒的情況，這樣的圖標會模糊影響整體效果。出現(xiàn)這種情況是因為圖形沒有達到像素級別的對齊。

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

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

Dutch Icon的Hemmo de Jonge曾在圖標沙龍2015的活動上談到了這一點。在他和荷蘭政府合作的一個圖標系統(tǒng)項目里，Hemmo和他的設(shè)計伙伴加一個缺口。不是每一個圖標都有這個缺口，但大多數(shù)都是。這種做法可以將這些單獨的圖標有機的聯(lián)系在一起。

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

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

5 把握細節(jié)尺度

圖標中細節(jié)不是越多越好，越詳細越好。因為圖標的主要功能就是在短時間內(nèi)給用戶傳遞信息。過多的細節(jié)會增加圖標的復(fù)雜性進而影響圖標的可辨識度。把握小細節(jié)的尺度是整個圖標集的視覺統(tǒng)一性和可識別性中的重要一點。

6 跨界思維

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

總結(jié)

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

藍藍設(shè)計( www.dzxscac.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)