本文非常全面並且很長，建議收藏以備日後所需，看完本文基本就能了解圖標的一切，如果沒有耐心，可以拉倒底部，查看技巧。
我們的追波team連結，文中部分作品來自team成員。https://dribbble.com/nullest
一、圖標的歷史和它的目的
開始之前，你必須先清楚要了解什麼是圖標設計以及它的來歷，下面我會簡要介紹圖標設計的歷史， 了解它在當今世界的重要性，以及未來的發展趨勢。
1.1 什麼是圖標
如果我們在字典中查「icon」這個詞，會發現很多同的含義，從「 一個神聖的人物」到「計算機命令常用的象徵性符號」。
「icon」最簡潔準確的定義是，用相似的或者類比的方式來表現它所代表的對象。
1.2 圖標設計歷史
正如我之前提到的，圖標設計的歷史可以追溯到史前時代。然而在這個特定的部分我想關注近代圖標的發展史，就對圖標理解更深刻了，我這個網站寫的圖標歷史非常的棒：https://historyoficons.com/
1.3 為什麼圖標很重要
隨著人們越來越忙，圖標成了我們生活的基本組成部分。它們幫助我們定位、迅速決策、發現要找的東西。
讓我們仔細看看為什麼圖標在今天如此重要，以及在未來將會產生何種影響。圖標統一整個世界，無論你說何種語言，一個圖標勝過千言萬語。當你要在機場導航，在繁華的商場找一個廁所或者只是要在軟體中做一個特定的操作，圖標都是至關重要的。
1.4 圖標傳遞信息非常迅速
為什麼圖標如此重要？
因為人們的平均注意力比金魚還短。，是的你沒聽錯，根據美國國家生物中心的調查：
人們的平均注意 從2000年的12秒下降到 2013年的8秒，比金魚的注意力還短1秒。
你能想像金魚的注意力比人類還長嗎？事實就是如此。
在這個充滿信息噪音的世界 ，圖標是一個救星。你只需要快速瀏覽一下圖標所代表的複雜信息，用這種方法，你可以用剩下的7秒關注真正重要的信息。無論你是需要在產品的頁面上找到某個特定的功能，或是在國外的城市找地鐵。圖標節省了你很多時間，加快了進度。
隨著人們日益繁忙，信息噪聲越來越多，越來越全球化，圖標在未來會更加重要。
二、圖標的基礎知識
如果你不了解圖標的基礎知識想取得進步非常困難， 這章就是在你設計圖標之前指導你每一個技術細節。學習圖標的類型、不同風格、不同尺寸之間的差異， 如何使用網格以及讓一套圖標看起來視覺統 。
2.1 圖標的類型
象形符號：最流行的圖標類型，象形符號代表了意義相似的對象，或者引用了物理世界的對象。 如：飛機這個象形符號可以表示飛機場。
表意符號：這種圖標更複雜點，不代表一個簡單的對象，而且還代表抽象的想法，通常表意符號所代表的意思需要學習才能明白。舉例來說：一個圓和一條穿過它的線代表「禁止」；另一個很好的例子就是：+- =這些表意符號。
備註：象形符號和表意符號經常結合在一起表達一個意思， 如：「 文件」這個象形符號結合「+」這個表意符號就是「添加件」的意思。
2.2 圖標的風格
圖標被劃分為很多不同的風格以及很多風格的變異。
下面這些是最常見的:
線性圖標 （作者：AnyOldTime ）
面性圖標 （作者：AnyOldTime ）
擬物圖標（作者：Atom_neo ）
手繪圖標（作者：mike ）
扁平風 （作者：Evgeniy Dolgov ）
三、圖標的尺寸和比例
在設計圖標時的一個主要規則就是：你的圖標必須放個合適的方框裡，不管它們現實生活中是否是不用的，比如：一個回形針和一個相機。
圖標必須放到一個特定大小的畫板中，確保它們的尺寸在視覺上是一致的，然而這意味著你的圖標需要挨著畫板的四個邊。為了讓整個圖標集看起來一樣，有些圖標可以小一點，在接下來的章節中我們將繼續討論這個。
之前有新手就一直糾結視覺上怎麼統一，這個還是需要自己去多練習，文章末尾我會分享網格，確保在90%的圖標都是統一的，個別視覺需要自己另行調整。
為特定的項目選擇特定的尺寸， 如果你為iOS或是Android設計圖標，在決定尺寸之前，你應該查看圖標規範。不過我們一般移動端是sketch 裡面用的是24×24，在ai裡面是用的是24×24或48×48。
如果是為網頁項目創建圖標，或是練習，可以使用以下這些默認尺 16×16, 24×24,32×32, 48×48, 64×64, 96×96, 128×128,256×256, 512×512;
備註：如果你是一個初級圖標設計師，我建議避免使用較小的尺寸，因為小尺寸更有難度，64 或 96 px 的網格是不錯的選擇。
四、使用網格
其實，寫這篇文章是因為我的一個學弟問了我很多如何繪製圖標的問題，我給了他網格，但是他卻思想陷入其中，不知道如何視覺統一。其實，在你真正理解網格的時候，你要畫很多圖標才能理解網格的意義。
4.1 究竟什麼是圖標網格?
把圖標網格當成一種約束，讓你的圖標集保持規範統一，網格是一個框架，讓你的圖標保持統一。
下面我分享2種常用的網格：
連結: https:///s/1fEz33qHOzPxkYAmejU8T5A 密碼: mutt
4.2 什麼時候使用網格？
首先，如果你要創建超過50個圖標的圖標集時我認為網格很有必要。 你要使用同一種風格創建很多圖標，網格有助於保持視覺網格統一 。
另一個情況就是當你要給現有的平臺設計圖標，而這個平臺有自己的圖標網格。 如給 iOS或Android 設計圖標，你最好使用它們各自的網格，這些網格確保它們在各個平臺上保持網格統一，你應該遵循這些規則，確保和平臺的風格保持一致。
這是一個框架結構，你的圖標集將會在這個基礎一致。如果將來這些網格會被其他人維護，網格也能派上用場。比如：你要創建一個通用樣式，其他人會在這基礎上構建其他圖標集。網格很像需要遵循的規則，讓其他設計師在最開始就明白圖標的尺寸。
就像上面所說，網格被高估了它的作用，但是在有些場合仍然至關重要。
4.3 如何使網格?
大多數時候我使用最簡單的網格，就是上面網盤裡面ai 文件的網格。
如下圖：
這是我經常使用的網格
五、圖標視覺統一
這個網格背後理念就是把你的圖標放到框內，儘量保持圖標的在在裡面框裡面，不要超過第二個框，當然如果為了視覺需要也可以出來。這個就是新手把握不準的地方了，因為如何判斷是否需要根據視覺需要，這個他們很難理解。這個需要在你的後面練習中去自己體會，這裡我會分析幾種常見的視覺需要。
，這是解釋視覺統一的一些原理，如果還是看不懂，就要多加練習，才能領悟。讓你的圖標保持統一，那它們就會說話哦。
使用統一風格；保持設計語言一致：這個不難解釋，就是如果都是圓角，請都保持圓角，如果粗細是2px，請都保持一樣的粗細；尺寸很重要，保持大小一致：這個就是上文提到的網格，最好在網格裡面畫，就能避免90%的圖標不一致；在一個圖標集中使用相同元素：這些說的不是絕對的，比如：這個圖標裡面有一個元是10px，另一個地方也需要用到類似大小的圓，請儘量用一樣大小的圓。不要用9px，這樣保持元素一致，才能整體統一；使用同一套配色方案：這點如果你看很多圖標就會發現，圖標的統一性比識別性更重要，一眼看去，顏色一樣，個別的粗細不一樣，或許你要花一點時間才能找出來，如果是顏色不一樣，一眼就看出來了。
六、軟體的使用
我一般使用的是ai ：
設置，注意要選像素
建立好以後的樣子顯示/隱藏參考線command+；
顯示/隱藏參考線command+；
準備工作，建立網格
設置參數
設置好網格以後，你可能會發現，依然沒有網格，顯示/隱藏網格 command + 「
選中所有的輔助線，command+2 將輔助線鎖定住，這樣你在操作的時候，就不會選中輔助線了
隨時預覽圖標是否視覺上統一，快捷鍵 command +shift + H
知識點，畫好基礎圖形的時候，一定要查看屬性，保證寬和高，X、Y，沒有小數點，要保證是整數。
常用的功能將路徑變為形狀
另一個方法將路徑變為形狀是擴展功能，在稍微複雜一點的裡面會用到
這個小的知識點，這個可以選擇圖標對其畫板，還是2形狀的對其，形狀編組快捷鍵是command +G
切換描邊和線性的快捷鍵是 shift + X，像上圖描述一樣，我們可以快速的將線性圖標變為面性圖標。
這裡有一個知識點，形狀生成器，是一個比布爾運算好用100倍的工具。快捷鍵是shift + M 選中以後，按住option 就是減掉形狀，不按就是讓2個形狀合併，記住，用這個工具之前，要全選整個圖標。
七、圖標靈感網站推薦
部分網站需要自備梯子
7.1 圖標繪畫技巧網站
八、圖標收集整理軟體推薦
NUCLEO，這個軟體的好處是裡面有自帶的icon，拖到界面就能用
eagle，圖片和icon收集軟體，缺點是不會更新icon，不過收集靈感很好用
這麼長的文章，我也是碼字一天了，基本這些掌握了就可以了。稍加練習，就可以完成很好的圖標集。
補充：
有評論說sketch半像素問題，再次列出解決方案：
基本上面2個步驟就能解決了，還有一個方法是通過插件的方法，那個插件我很久沒有用了。名字叫：Pixel Cleanup For Sketch
本文由 @二哈 原創發布於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議