首先，在制作圖標前要考慮以下幾點（那張紙默默寫下來）：

你的icon主要適用于什么設備？

需要什么風格的icon？

有沒有其他設計要求？

接下來我們進入設計過程：

1. 設計從網格開始

 針對不同的設計我們會運用不同大小的網格。我們這里以32*32的網格為例。

網格邊緣的2px是我設計中不可觸及的，也就是留白邊緣。如果沒有特殊情況的話，我一定不會讓我的設計圖形進入這個邊緣界限。而留白的目的也是為了讓設計看著不會太滿給用戶一定的呼吸感。

圖標的結構分為形狀和方向兩部分。如果你的圖標有邊框，一般會在邊界框位置畫出像正方形，圓形，三角形，矩形等圖形作為邊框。

圓形圖標會在網格中成居中狀。在圓形圖標設計中四個邊緣會觸及到內容區域的邊緣，但不會到留白區域。一些小的圖形和邊邊角角部位會超出圓形，但不用擔心，這是一個常見的現象。

方形圖標一般也會在網格中居中，但大多數情況也會觸及到內容區域的邊緣。我們看下下面這張圖：圖中分三個方形區域（藍色、橙色和綠色），圖標中的大部分圖形在中間橙色區域內。每個區域內的圖形占比取決于圖標整體的視覺效果，而這個把控需要你不斷地練習找一些感覺才能自如的運用。

在32px的網格中，你會注意到從28px中垂直和水平的分出20px區域，一般在設計圖標時會試圖遵循這樣的規矩。

不規則的圖標設計會用一個圓形來去對齊。

但你要記住網格規矩不是所有設計都要遵循的，一個圖標的本質遠遠超過了這種規矩的設定。網格會幫助你提高圖標設計的一致性，但是如果在設計一個牛逼圖標和遵循規則中選擇的話，相信你也會選牛逼設計的。

2. 從一個簡單的幾何圖形下手

 設計圖標跟畫草圖一樣：從一個簡單而粗糙的圓形、長方形又或是三角形開始。在設計小圖標的時候，手繪的表現方式可能會看著不那么精致，所以用AI做設計是個更好的選擇。用一些基本的幾何圖形進行設計會更加準確（尤其在曲線邊緣部分），在調整的時候會更快，同時也能更精確的適應網格模式。

3. 邊緣、邊角、曲線及角度規范

盡可能在設計時邊緣、邊角、曲線及角度遵循一些數學規范的同時又不失有趣。換句話說就是不要太相信自己的眼球，在一些細節上需要遵循規范，因為如果這些元素不一致的話會很影響圖標的質量。

角度

在設計中，大多情況我會使用45度角或者它的倍數。45度角會顯得很均勻（在像素下會表現得更強），這種完美的對角線會讓人眼很舒服也很清晰。這種模式同時也可以建立一組圖標的統一性。如果我要打破這種規則我可能會使用減半角度（22.5或者11.5度）或者15的倍數，當然也會根據情況進行調整。使用45度的好處是即使反角度用也是不打亂規則的。

曲線

曲線是個特別考量技術的地方，即使圖片質量很差，一看曲線就知道設計師的能力怎樣。而且人眼的測量總也一些小的誤差，大多數人眼睛和手協調能力達不到那么高層次，所以用軟件的形狀工具和一些數字來創造曲線從而達到效果。

邊角

圓角可能用的并不多，2px半徑的圓角就很顯然是個圓形了。你要根據你的設計總特征來選擇是否用圓角，并且要用多大的圓角。

像素效果

圖標的像素效果在用戶界面中是很重要的一部分，尤其在小尺寸設計中很影響整體視覺。如果像素網格中行間距不對齊，會導致邊緣出現鋸齒在小圖標上會看起來很模糊。要是調整圖標的像素網格會使直線變得單薄，角度與曲線的精確度就沒那么精確。這也是為什么建議大家用45度角的原因，比較好掌握，更加精準容易對齊。

線的粗細

說到線的粗細，2像素應該是最理想的，可3像素是最通用的。我個人更傾向2PX和4px，理想狀態下我會用2的倍數比較多。在大多情況下字和扁平的圖標是要避免特別細的線條，除非你是為了做出一些期望效果。如果你想定義線條的形狀，一般設計師會通過光線和陰影的方法。

4. 通過設計元素及圖標特點來達成統一性

   設計師會通過某一個元素讓一系列設計更統一，像荷蘭設計師在2015年圖標沙龍上談到他為荷蘭政府做的項目，在設計中他跟伙伴運用了“缺口“的元素，不是每一個圖標都有這個元素，但是大多數的統一讓這一系列有了自己的特色，也真正的把它們融合了起來。

5. 有節制的使用細節與裝飾

   圖標的目的與讓用戶的溝通，讓他們想到并且進行選擇。太多的細節會增加圖標的辨識復雜度，尤其是小尺寸更會成為累贅。當然，細節的復雜程度也會影響單個或者整個系列圖標的效果。所以當你拿不準細節輕重的時候，最好的方法是考慮最低限度的保證細節，但要保證高質量的明確圖標含義。

6. 獨特性

   雖然我們能看到很對牛逼設計師在制作高質量的圖標，但是他們過于注重設計趨勢和其他高端設計師的風格模仿。作為一個設計師來說，創造可能是我們應該更看重的，我們可以從結構、字體、工業、心理、自然等其他領域尋找靈感。千篇一律的圖標我們都見過，可是特立獨行的你才是用戶真正認可的風格。