像Iconfinder這樣的圖標和矢量圖形市場，為網頁和印刷設計師提供了一種實惠可用的矢量圖標資源。很多高質量圖標的產生，而且很多圖標是免費可用的。
每一套提交Iconfinder的圖標都會被審核評估，這些圖標有可能被我們網站用戶看到，當中優秀的圖標有潛在的商業價值。在評審一套提交到網站的圖標時，我們對設計師有一種責任，對我們的客戶也要確保所有出現在網站的優質圖標都盡可能的是高質量。為了達到這個目標，我們要不斷地意識到“還不夠好”和“優質”之間的區別。這個區別通常是很小的，經常需要一些極小的改變，但是在設計和整套圖標的價值上產生的影響是很大的。不像很多其他的市場，我們很少駁回那些沒有完全滿足我們質量要求的圖標。反而，我們會給設計師分享具體使用的建議關于如何提高圖標的質量。
這篇文章討論了圖標設計準則的6個步驟。這6個步驟遵循了圖標設計的基礎，包括一致性、易識別和清晰。高效圖標設計的原則已經被圖標設計師John Hicks在他的《The Icon Handbook》一書中詳細地討論過，同樣google的“material系統圖標設計指南”也有講過。本文中被討論的6個步驟應該被看做一種指南，而不是一列教條式的規則。學會什么時候打破規則，什么時候遵循規則，這也是成為一個優秀設計師的一部分，我們也將在這論證。
在本文中運用的圖片案例，被討論的6個步驟將會運用到改進一只狗上（確切地說，是一只柯基），這個圖標是由iconfinder的用戶Kem Bardly最近提交的。這個圖標是有潛質的，但還不是夠優美到可以稱為“高質量”。我們給Kem一些簡單的小技巧，只要做一些小小的改進。他的圖標已經準備被作為優質圖標通過了。下面展示的圖片顯示了Kem的圖標改進前后的版本。在接下來的章節，我們將循序漸進地解釋它是怎么從最初版變到最終版的。
左邊的圖片是原始圖標。右邊的圖片是重新設計過的圖標，運用了本文中提到的原則。
注意，文章中討論的原則適應到網頁圖標時，他們通常也適用于印刷圖標。典型的300 dpi的印刷材料，使得像素化呈現本質上是毫無意義的。如果你是一個平面印刷設計師，文中提到的所有原則都是適應的，但是你可以忽略像素化呈現的作品。
有效圖標設計的三個特性
對于組成圖標的3個屬性：形式、統一審美和識別性，好的圖標顯示了一套系統的經過深思熟慮的方法。當新設計一套圖標，把這些屬性都考慮在迭代的途徑中，從整體（形式）出發，進入到細節（識別性）。即使你只設計單個圖標，這3個屬性也仍然能被應用，能從單個圖標中推測出。
毋庸置疑，設計一個有效的圖標不止這3個屬性，但有這3個精選屬性是設計一個好的圖標的開端。為了相對簡潔性，我們專注于考慮這3個主要的屬性。
形式
形式是一個圖標根本的結構，或者說是它的組成部分。如果你忽視圖標的細節，在主要圖形周圍畫了一條線，那他們是形成了一個方形、一個圓形、一個垂直或水平的矩形，一個三角形或者更多有組織的圖形？最主要的幾何形狀——圓形、方形和三角形——能為圖標設計打下一個穩固的視覺基礎。在Kem Bardly設計的柯基圖標示例中，狗的頭部是由兩個三角形和兩個橢圓形組成的。一個人開始會畫一個最大最簡單的形狀，然后才定義越來越多的細節。另一個人從最簡單的形狀開始設計圖標，然后添加更多的細節——但是只有盡可能多的需要溝通概念的細節被表達出來，它就會成為一個物體，一個想法或行動。
這張圖片的關鍵線條展示了設計構型的基本形狀
審美的一致性
單個圖標的構成元素能運用到整套圖標中，就是我們說的視覺的一致性。這些元素比如是圓形或方形的角，角度的大小（2像素，4像素…），被限制和保持一致的線條粗細（2像素，4像素…），圖標風格（扁平的，線條的，被填充的線條或符號），配色等等。審美一致性是設計元素的集合，或是設計中你為其成為一個整體所貫穿使用的手法。在下面的例子中，會發現Kem圖標中的這3只狗都有一些共同元素，比如2像素的圓角，2像素寬的眼睛和心形嘴巴。
這3只狗圖標有共同的設計元素，形成了視覺的一致性
識別性
識別性是產品圖標的基本，它造就了圖標的唯一性。一個圖標是否從根本上起了作用，依賴于觀眾能多么容易地去理解這個圖形、它的含義及它描述的動作。一致性包括展示觀眾普遍會和你的想法聯系在一起的特性，但是它也包括哪些獨特的，出乎意料的元素，像把狗狗的鼻子設計為心形。記住識別性不僅僅是指對形狀、想法或它表達的動作的理解，也指識別出你的圖標。從這方面來說，美學的一致性和識別性能經常重合在一起的。下面的圖標，我們能識別出一只是柯基犬，一只是西伯利亞的愛斯基摩犬。因為他們獨特的顏色、頭部形狀和耳朵，但是仍然會認為他們是同一組圖標，因為他們有共同的設計元素。
每一只狗的特性使得他們能各自被識別，但是它們共同的設計元素又可以讓人識別出是同一套圖標
迄今，我們已經看了有效圖標設計的3個主要屬性。在接下來的部分，我們將深入看6個步驟是如何妥善處理這3個領域的問題。
六個步驟
1、從柵格化設計開始
不同網格大小的好處將在一個單獨的文章中得到最好的處理。從我們的目的出發，我們做出了一個32*32的網格。我們的網格也包括一些基本的指導原則，來幫助我們為每個圖標設計創造最基本的形式。
這里，我們能看到一個32*32的像素化網格，有一個2像素的邊框（或者說是不可達區域）作為留白。
最外面的2像素我們叫做“禁區”。避免把圖標的任何部分放在這個區域，除非是絕對需要的。這個禁區存在的原因是為圖標留出一些透氣的空間。
圖標形式的一個組成部分是大體的形狀和方向。如果你在一個圖標的外部邊緣畫了一條線——這個邊界框，如果你能夠——這個形狀將會形成一個正方形，圓形，三角形，垂直居中的矩形，水平居中的矩形或平行四邊形。
圓形圖標處于網格的正中央，將經常觸碰到內容區域四周的邊沿，而不觸及到禁區。注意，打破禁區這個規則的一個普遍原因是，有一些重點或小元素需要超過圓形區域。如上所述，為了保持設計的完整性。
圓形圖標對齊網格和關鍵線
方形圖標也是在網格的中央，但不這樣做，在大多數情況下，會擴展到內容區的最外層邊緣。為了保持圓形和三角形圖標的視覺面積的一致性，大多數矩形和方形圖標將會在中間對齊到關鍵線（以下圖片的黃色區域）。什么時候對齊到每一條關鍵線由圖標本身的視覺面積決定。什么時候使用哪種尺寸只需要多加練習。看下面的方形布局圖片。上面說到的3個同軸的方形就是以下的淺藍色、橙色和淺綠色區域。
方形和圓形圖標的大小及對齊是相對于網格的
在32像素的正方形里，你會發現20*28像素垂直的和水平的矩形。我們認為這些矩形，要么是垂直的，要么是水平的。嘗試讓任何圖標的大小做適應，去匹配這些20*28像素大小的矩形。
這些垂直或水平方向圖標的對齊和大小是相對于網格的
在對角線方向的圖標是對其到圓形區域的邊緣，如下圖所示。注意，這個鋸子的最外面區域是大約和圓形的邊緣對齊。這一塊區域你并不必很準確地知道在哪，大概相近就可以了
在對角線方向圖標的對齊和大小是相對于網格的
記住你沒有必要每次都遵循網格和指南。網格的存在是為了幫助你讓圖標保持一致性，但是如果你不得不在做一個好的圖標和遵循規則中選擇，那就打破這個規則——有節制的遵循。
Hemmo de Jonge因他的昵稱 Dutch Icon而出名，如他所說：
“一個獨立的圖標的本質重要性超越了保持整體性。”
2、從簡單的集合圖形開始
用簡單的圓形、三角形和矩形畫圖標的主體，從這個開始做起。本質上，即使一個圖標最終大多數將成為有組織的，剛開始時在 Adobe Illustrator中設計圖形。在設計圖標時，特別是為屏幕設計更小的圖標時，手繪的邊緣那些微小的變化將會使一個圖標看起來不那么精致。從基本的集合圖形開始將會使邊緣更加精確（特別是沿著曲線），也能讓你快速地調整元素之間的相對大小了，當然確保你是遵循網格的。
這是一個基本的幾何圖形，2個三角形，2個橢圓，組成了這個柯基圖標。
3、按照這樣的順序設計：邊、線、角落、曲線和角度
盡可能不要讓設計看起來過度地呆板和無趣，角落、曲線和角度都應該有數學化的精確。換句話說，按照這個順序，當涉及到細節時，不要嘗試盯著看或徒手畫圖標。元素的不統一會降低圖標的質量。
角度
大多數情況下，堅持用45度角，或者它的倍數。在45度角上反鋸齒是均勻地走勢。（活躍的像素一直是對齊的），所以結果是顯而易見的，這個角完美的對角線是很容易被識別的，這也是受人眼喜歡的。這個可識別的模式建立了一套圖標的一致性，讓單個圖標成為了整體。如果你的設計規定你必須打破規則，嘗試用兩等分（22.5度，11.25度等等）或者是15度的倍數。使用情景是不同的，所以結合具體情況而定。用45度角等分的好處是，反鋸齒的走勢仍然是可接受的。
常規反鋸齒的 45 度角的特寫鏡頭
曲線
會降低圖標質量，也意味著專業和業余之間的區別最明顯的一個區域就是不那么完美的圖標。而人的眼睛能精確地識別微小的變化，手眼的協調不能總達到很高的精確度。依賴于圖形工具和順序盡可能的設計曲線，使用adobe illustrator（或者你的矢量軟件）控制修改鍵（shift鍵），或者，更甚一籌地是，用Astute Graphics的VectorScribe和 InkScribe更精確地控制貝塞爾曲線。
因為我們看到了上面提過的修改前的圖片，手繪的線會畫出不規則的曲線，這會降低圖標本身的質量。
我們用illustrator的貝塞爾曲線工具畫出了這些非常精確的曲線，而不是手繪
角落
通常圓角（或者說半徑）值為2像素，一個32*32像素的圖標，2像素的半徑已經足夠被看出是圓形的，但不太過于讓角落過于圓滑以改變設計中的個性（比如“泡泡”形象），你選擇的半徑值是基于你想給圖標怎樣的個性。是否使用圓角是一個審美上的決策，也要考慮到一套圖標的整體美感。
精確的圓角
已經開始設計幾何圖形了，我們現在可以增加2像素的外圍輪廓，來演示圖形工具是怎么改善設計的，以及細節上的一致性，比如圓角。
重新設計柯基圖標的過程如此漫長
這個被大大提升的版本展示了新設計的要點：統一的圓角，光滑的曲線，耳朵邊基本的線條粗細。
像素化的展示
在設計小尺寸的圖標時，像素級的對齊是很重要的。一個小尺寸圖標邊緣的去鋸齒會讓這個圖標失真。不和像素網格對齊的線條之間的空隙將會變得反鋸齒和模糊。讓圖標和像素化的網格對齊會使得邊緣在直線上很清晰，在精確的角度和曲線上也很清晰。
如上述，45度角是最好的，因為被用來定義角的像素是成對的，階級式的，段對端是完全對角的。對角落和曲線也是同樣的：它們越精確，反鋸齒就越清晰。但是注意，在更大規模和更高分辨率的屏幕上，比如視網膜屏幕，像素化呈現并不太需要，至少對于反鋸齒而言。
線的粗細
談到線的粗細，2像素就很理想了，在必要情況下可以使用3像素。目標是提供可視化的層級和多樣性。不用介入太多樣式，那樣會破壞一套圖標的一致性。超過3個或者一套能失去它的凝聚力。2和4像素粗的線條的好處是他們是2的倍數，因此很容易向上和向下擴展。大多數情況下，避免使用很細的線，特別是在符號和扁平化圖標上。除非你刻意設計一種“線性風格”的圖標，比起線條，更依賴于光陰去定義形狀。
Iphone圖標展示了線條粗細的一致性
4、跨圖標設計使用統一的設計元素和符號
Hemmo de Jonge of Dutch在Icon Salon 2015上有一個精彩的演講，他大篇幅地講到了這方面的圖標設計。在他為荷蘭政府做的2年圖標系統項目中，Hemmo和他的設計同伴注冊了一個等級給每個圖標。并不是每個圖標都有等級，但大多數是這樣的。這種符號，適當并一貫地使用在一套圖標中，真的能把圖標集合在一起成為整體。
常用設計元素的使用
在我們的狗狗圖標例子里，我們使用了一個通用的風格元素：心形鼻子。使用心形作為鼻子這個視覺特性不僅僅把這些圖標組合在一起，而且也增添了一種異想天開的元素，為我們四條腿的朋友溝通情感。
狗狗圖標常用設計元素的使用
大多數情況下，即使一個圖標的主要部分發生了改變——比如說，風格——構建審美統一的元素仍然可以系在一起，像上面所看到的那樣。我們已經重構了相同的3只狗狗圖標的符號風格，而不僅僅是平面風格，它們仍然是保持審美一致的。
狗狗圖標使用了共同的設計元素，但是有著不同的造型
5、謹慎使用細節和裝飾
圖標應該能盡快地表達對象、想法或行動。太多的小細節將會變得復雜，這會讓圖標缺乏識別性，特別是小圖標。一個單獨的圖標或一整套圖標的細節處理水平對視覺的一致性和識別性都是很重要的一個方面。確定一個或一套圖標的細節水平是否正確的一個好方法是，以最少的細節來表達清楚圖標的意義。
在上面的這個版本中，已經離我們最終要完成改善的稿子很靠近了。眼睛周圍的黑色輪廓已經變成了耳朵周圍毛皮裹著的棕色區域。臉上黑色的線已經不見了，但是柯基臉上的白色標記上面仍然有2像素的空間。注意，我們仍然保留了一些原來版本的元素，比如扁平化的鼻子。我們會在下一步中調整它。
6、讓它變得獨特
有天賦的設計師的數量似乎每天都在增長，他們做出了高質量圖標，其中很多是免費的。不幸地是，很多的設計師過度地依賴于趨勢或者大多數流行設計師的風格。作為創意專業人士，我們應該看看圖標以外的其他領域，比如建筑、字體設計、工業設計、心理學、自然及任何我們能找到靈感的其他領域。因為很多圖標看起來很相似，，所以讓你的設計變得獨特尤為重要。
柯基臉上心型的鼻子使得這個圖標變得獨特而有個性
在最終設計的形象中，我們有一個獨特的可觸摸的心形鼻子，為這個設計添加了一些新奇和無拘無束的感覺。
這些簡單的步驟應該被看到是一個起點，而不是最終的指南。設計圖標沒有簡單的方法。本文中，我們已經概述了保持基本一致的設計方法。但是其他設計師當然也有他們自己的觀點和技巧。成為一個更優秀的設計師最好的方法看盡可能多的視覺參考，讀大量的資料，經常畫草畫（無論你去哪帶一個草圖本），不斷地練習，練習，再練習。
左邊的圖片是原始圖標。右邊的圖片是重新設計過的圖標，運用了本文中提到的原則。
結論
我們已經分享了如何構建高質量圖標的基本原理。這些原理也是技巧：通過練習，任何人都能學習并掌握它們。記住，為了設計更好的圖標，從一般（形式）開始，然后到特定的細節（可識別）。讓你的圖標保持內部的一致性，同樣在整套圖標中也要保持一致性。注意圖標和圖表集中這些被共享的元素（審美的統一）。一旦你已經掌握了這些基本的技巧，你就能更專注于讓你的圖標脫穎而出：你獨特而又創意的視野。
你有自己的技巧、建議或想分享的嗎？在下面評論中給我留言吧。
