圖標是UI設計師必會技能之一，而一個好的icon是怎么設計出來的呢？今天我們來給大家一個圖標設計的全面知識匯總：

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

需要什么風格的icon？

有沒有其他設計要求？

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

1. 設計從網格開始

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

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

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

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

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

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

不規則的圖標設計會用一個圓形來去對齊，如下圖。你看一看到圖形已經觸及到圓形的邊緣，這里你不用特別精確的卡邊，只要接近就可以了。

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

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

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

角度

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

曲線

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

邊角

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

像素效果

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

線的粗細

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

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

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

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

下面講一些設計過程中你需要注意的：

1. 讓用戶更容易理解

圖標最重要的作用就是它的辨識度是否讓用戶易理解，人們需要在小圖標中做出他們的選擇是件很困難的事，所以對于品牌來說，大部分的圖形設計是為了展現品牌logo或者是一個標志性的形象。當然對于一個新的或者小的品牌來說也會通過一些其他方式來展現。

圖標可以包含圖像，但也可能是一個文本，一個logo又或是這些元素的組合。圖像圖標在其他適應設備上會不易閱讀，而圖形的話可以攜帶更多的視覺感。

對于一個圖標而言，不會使用單詞作為內容，因為空間本身就不大，而內容不多又不易用戶理解。這也是一則經驗：如果這個文本不是你logo的一部分，那么請盡量避免。如果是，也要慎重考慮一下。

此外，很多圖標實際使用是在一定的環境下，大多數包括一行描述性文本在圖標下面。設計時，字母的顏色和圖標的類型或者網站也要保持一致，這樣才能建立品牌的統一性。

4. 用鮮亮的顏色

想讓你的圖標脫穎而出？那么請大膽的用色。選擇一個充滿活力的顏色可以幫你抓住用戶注意力，讓你的品牌更有特點。比如藍色，特別是天空藍和海軍藍，你可能會回避因為這種大眾色并不吸引人。但如果藍色是你的主要logo色，你可以嘗試一些新的偏中性的顏色，像石灰綠，或者選擇一個季節性色調比如夏天選擇亮橙色、春天選擇粉紅色之類的。

5. 做一個logo的延伸

你的品牌會有它的logo，可一旦它變成了圖標，更像是一個標志。這個標志可以是一個簡單的logo或者圖像，它需要表現的更直接更能讓客戶記住它。而品牌也希望將logo和圖標建立一些聯系，讓自身達成統一。

6. 圖標的用途

圖標不止限于手機或者電腦桌面上，所以在設計時也要顧及到它的大小和應用，所以在做大圖標后縮小是個更好的方式。圖標設計涉及到它的規模和大小，格式也成為了一個重要的因素，為了方面運用，矢量圖是你最佳的選擇。

7. 內容外面的世界

最近有很多圖標運用單色背景加白色圖標，扁平化設計與陰影結合，這種趨勢雖然很流行，但不要局限在這種設計里，在你的圖標中做一些不一樣的設計。當大多數人考慮用方形的設計，也許你該考慮些別的方式。在背景中加入紋理效果就會在人家單色中脫穎而出。

8. 單色挑戰

有一個有趣的小竅門設計師們多年用來測試設計的有效性——單色模式。在單色設計中，如果你的設計傳達同樣的信息，那么它是個有效設計；如果沒有顏色它變得很弱甚至影響用戶識別，那么請繼續修改。也有些設計師會先用黑白色進行設計，建立一個堅實的框架后，然后再添加顏色。

以上就是設計師必知的UI圖標設計的全面知識匯總，大家學會了嗎？希望能對大家有所幫助！