如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

來源：UI中國

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

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

圖標的三個特性

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

形狀

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

視覺統一

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

可識別性

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

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

六大竅門

1 使用網格

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

首先，最外層的兩像素的位置我們通常空著，不加任何東西。這樣做的原因是給圖標創造出一些空間感，而不至于太擠。我們稱這個區域為“留白區”。里面的我們稱之為“內容區”。

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

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

2 勾勒

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

3 常見的設計元素

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

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

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

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

4 使用統一的設計元素

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

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

大部分情況下，即使圖標集中的大部分元素都發生了變化，但是相同的設計風格會將這些圖標聯系在一起。

5 把握細節尺度

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

6 跨界思維

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

總結

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

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