圖示是UI設計師必會技能之一，而一個好的icon是怎麼設計出來的呢？
今天我們來給大家一個圖示設計的全面知識彙總：
- 你的icon主要適用於什麼裝置？
- 需要什麼風格的icon？
- 有沒有其他設計要求？
針對不同的設計我們會運用不同大小的網格。我們這裡以32*32的網格為例。
網格邊緣的2px是我設計中不可觸及的，也就是留白邊緣。如果沒有特殊情況的話，我一定不會讓我的設計圖形進入這個邊緣界限。而留白的目的也是為了讓設計看著不會太滿給使用者一定的呼吸感。
圖示的結構分為形狀和方向兩部分。如果你的圖示有邊框，一般會在邊界框位置畫出像正方形，圓形，三角形，矩形等圖形作為邊框。
圓形圖示會在網格中成居中狀。在圓形圖示設計中四個邊緣會觸及到內容區域的邊緣，但不會到留白區域。一些小的圖形和邊邊角角部位會超出圓形，但不用擔心，這是一個常見的現象。
方形圖示一般也會在網格中居中，但大多數情況也會觸及到內容區域的邊緣。我們看下下面這張圖：圖中分三個方形區域（藍色、橙色和綠色），圖示中的大部分圖形在中間橙色區域內。每個區域內的圖形佔比取決於圖示整體的視覺效果，而這個把控需要你不斷地練習找一些感覺才能自如的運用。
在32px的網格中，你會注意到從28px中垂直和水平的分出20px區域，一般在設計圖示時會試圖遵循這樣的規矩。
不規則的圖示設計會用一個圓形來去對齊，如下圖。你看一看到圖形已經觸及到圓形的邊緣，這裡你不用特別精確的卡邊，只要接近就可以了。
但你要記住網格規矩不是所有設計都要遵循的，一個圖示的本質遠遠超過了這種規矩的設定。網格會幫助你提高圖示設計的一致性，但是如果在設計一個牛逼圖示和遵循規則中選擇的話，相信你也會選牛逼設計的。
設計圖示跟畫草圖一樣：從一個簡單而粗糙的圓形、長方形又或是三角形開始。在設計小圖示的時候，手繪的表現方式可能會看著不那麼精緻，所以用AI做設計是個更好的選擇。用一些基本的幾何圖形進行設計會更加準確（尤其在曲線邊緣部分），在調整的時候會更快，同時也能更精確的適應網格模式。
儘可能在設計時邊緣、邊角、曲線及角度遵循一些數學規範的同時又不失有趣。換句話說就是不要太相信自己的眼球，在一些細節上需要遵循規範，因為如果這些元素不一致的話會很影響圖示的質量。
角度
在設計中，大多情況我會使用45度角或者它的倍數。45度角會顯得很均勻（在畫素下會表現得更強），這種完美的對角線會讓人眼很舒服也很清晰。這種模式同時也可以建立一組圖示的統一性。如果我要打破這種規則我可能會使用減半形度（22.5或者11.5度）或者15的倍數，當然也會根據情況進行調整。使用45度的好處是即使反角度用也是不打亂規則的。
曲線
曲線是個特別考量技術的地方，即使圖片質量很差，一看曲線就知道設計師的能力怎樣。而且人眼的測量總也一些小的誤差，大多數人眼睛和手協調能力達不到那麼高層次，所以用軟體的形狀工具和一些數字來創造麴線從而達到效果。
邊角
圓角可能用的並不多，2px半徑的圓角就很顯然是個圓形了。你要根據你的設計總特徵來選擇是否用圓角，並且要用多大的圓角。
畫素效果
圖示的畫素效果在使用者介面中是很重要的一部分，尤其在小尺寸設計中很影響整體視覺。如果畫素網格中行間距不對齊，會導致邊緣出現鋸齒在小圖示上會看起來很模糊。要是調整圖示的畫素網格會使直線變得單薄，角度與曲線的精確度就沒那麼精確。這也是為什麼建議大家用45度角的原因，比較好掌握，更加精準容易對齊。
線的粗細
說到線的粗細，2畫素應該是最理想的，可3畫素是最通用的。我個人更傾向2PX和4px，理想狀態下我會用2的倍數比較多。在大多情況下字和扁平的圖示是要避免特別細的線條，除非你是為了做出一些期望效果。如果你想定義線條的形狀，一般設計師會通過光線和陰影的方法。
設計師會通過某一個元素讓一系列設計更統一，像荷蘭設計師在2015年圖示沙龍上談到他為荷蘭政府做的專案，在設計中他跟夥伴運用了“缺口“的元素，不是每一個圖示都有這個元素，但是大多數的統一讓這一系列有了自己的特色，也真正的把它們融合了起來。
圖示的目的與讓使用者的溝通，讓他們想到並且進行選擇。太多的細節會增加圖示的辨識複雜度，尤其是小尺寸更會成為累贅。當然，細節的複雜程度也會影響單個或者整個系列圖示的效果。所以當你拿不準細節輕重的時候，最好的方法是考慮最低限度的保證細節，但要保證高質量的明確圖示含義。
雖然我們能看到很對牛逼設計師在製作高質量的圖示，但是他們過於注重設計趨勢和其他高階設計師的風格模仿。作為一個設計師來說，創造可能是我們應該更看重的，我們可以從結構、字型、工業、心理、自然等其他領域尋找靈感。千篇一律的圖示我們都見過，可是特立獨行的你才是使用者真正認可的風格。
圖示最重要的作用就是它的辨識度是否讓使用者易理解，人們需要在小圖示中做出他們的選擇是件很困難的事，所以對於品牌來說，大部分的圖形設計是為了展現品牌logo或者是一個標誌性的形象。當然對於一個新的或者小的品牌來說也會通過一些其他方式來展現。
圖示可以包含影象，但也可能是一個文字，一個logo又或是這些元素的組合。影象圖示在其他適應裝置上會不易閱讀，而圖形的話可以攜帶更多的視覺感。
對於一個圖示而言，不會使用單詞作為內容，因為空間本身就不大，而內容不多又不易使用者理解。這也是一則經驗：如果這個文字不是你logo的一部分，那麼請儘量避免。如果是，也要慎重考慮一下。
此外，很多圖示實際使用是在一定的環境下，大多數包括一行描述性文字在圖示下面。設計時，字母的顏色和圖示的型別或者網站也要保持一致，這樣才能建立品牌的統一性。
想讓你的圖示脫穎而出？那麼請大膽的用色。選擇一個充滿活力的顏色可以幫你抓住使用者注意力，讓你的品牌更有特點。比如藍色，特別是天空藍和海軍藍，你可能會迴避因為這種大眾色並不吸引人。但如果藍色是你的主要logo色，你可以嘗試一些新的偏中性的顏色，像石灰綠，或者選擇一個季節性色調比如夏天選擇亮橙色、春天選擇粉紅色之類的。
你的品牌會有它的logo，可一旦它變成了圖示，更像是一個標誌。這個標誌可以是一個簡單的logo或者影象，它需要表現的更直接更能讓客戶記住它。而品牌也希望將logo和圖示建立一些聯絡，讓自身達成統一。
圖示不止限於手機或者電腦桌面上，所以在設計時也要顧及到它的大小和應用，所以在做大圖示後縮小是個更好的方式。圖示設計涉及到它的規模和大小，格式也成為了一個重要的因素，為了方面運用，向量圖是你最佳的選擇。
最近有很多圖示運用單色背景加白色圖示，扁平化設計與陰影結合，這種趨勢雖然很流行，但不要侷限在這種設計裡，在你的圖示中做一些不一樣的設計。當大多數人考慮用方形的設計，也許你該考慮些別的方式。在背景中加入紋理效果就會在人家單色中脫穎而出。
有一個有趣的小竅門設計師們多年用來測試設計的有效性——單色模式。在單色設計中，如果你的設計傳達同樣的資訊，那麼它是個有效設計；如果沒有顏色它變得很弱甚至影響使用者識別，那麼請繼續修改。也有些設計師會先用黑白色進行設計，建立一個堅實的框架後，然後再新增顏色。