本文非常全面并且很長，建議收藏以備日后所需，看完本文基本就能了解圖標的一切，如果沒有耐心，可以拉倒底部，查看技巧。

我們的追波team鏈接，文中部分作品來自team成員。https://dribbble.com/nullest

一、圖標的歷史和它的目的

開始之前，你必須先清楚要了解什么是圖標設計以及它的來歷，下面我會簡要介紹圖標設計的歷史， 了解它在當今世界的重要性，以及未來的發(fā)展趨勢。

1.1 什么是圖標

如果我們在字典中查“icon”這個詞，會發(fā)現(xiàn)很多同的含義，從“ 一個神圣的人物”到“計算機命令常用的象征性符號”。

“icon”最簡潔準確的定義是，用相似的或者類比的方式來表現(xiàn)它所代表的對象。

1.2 圖標設計歷史

正如我之前提到的，圖標設計的歷史可以追溯到史前時代。然而在這個特定的部分我想關注近代圖標的發(fā)展史，就對圖標理解更深刻了，我這個網(wǎng)站寫的圖標歷史非常的棒：https://historyoficons.com/

1.3 為什么圖標很重要

隨著人們越來越忙，圖標成了我們生活的基本組成部分。它們幫助我們定位、迅速決策、發(fā)現(xiàn)要找的東西。

讓我們仔細看看為什么圖標在今天如此重要，以及在未來將會產(chǎn)生何種影響。圖標統(tǒng)一整個世界，無論你說何種語言，一個圖標勝過千言萬語。當你要在機場導航，在繁華的商場找一個廁所或者只是要在軟件中做一個特定的操作，圖標都是至關重要的。

1.4 圖標傳遞信息非常迅速

為什么圖標如此重要？

因為人們的平均注意力比金魚還短。，是的你沒聽錯，根據(jù)美國國家生物中心的調(diào)查：

人們的平均注意 從2000年的12秒下降到 2013年的8秒，比金魚的注意力還短1秒。

你能想象金魚的注意力比人類還長嗎？事實就是如此。

在這個充滿信息噪音的世界 ，圖標是一個救星。你只需要快速瀏覽一下圖標所代表的復雜信息，用這種方法，你可以用剩下的7秒關注真正重要的信息。無論你是需要在產(chǎn)品的頁面上找到某個特定的功能，或是在國外的城市找地鐵。圖標節(jié)省了你很多時間，加快了進度。

隨著人們?nèi)找娣泵?，信息噪聲越來越多，越來越全球化，圖標在未來會更加重要。

二、圖標的基礎知識

如果你不了解圖標的基礎知識想取得進步非常困難， 這章就是在你設計圖標之前指導你每一個技術(shù)細節(jié)。學習圖標的類型、不同風格、不同尺寸之間的差異， 如何使用網(wǎng)格以及讓一套圖標看起來視覺統(tǒng) 。

2.1 圖標的類型

象形符號：最流行的圖標類型，象形符號代表了意義相似的對象，或者引用了物理世界的對象。 如：飛機這個象形符號可以表示飛機場。

表意符號：這種圖標更復雜點，不代表一個簡單的對象，而且還代表抽象的想法，通常表意符號所代表的意思需要學習才能明白。舉例來說：一個圓和一條穿過它的線代表“禁止”；另一個很好的例子就是：+- =這些表意符號。

備注：象形符號和表意符號經(jīng)常結(jié)合在一起表達一個意思， 如：“ 文件”這個象形符號結(jié)合“+”這個表意符號就是“添加件”的意思。

2.2 圖標的風格

圖標被劃分為很多不同的風格以及很多風格的變異。

下面這些是最常見的:

線性圖標 （作者：AnyOldTime ）

面性圖標 （作者：AnyOldTime ）

擬物圖標（作者：Atom_neo ）

手繪圖標（作者：mike ）

扁平風 （作者：Evgeniy Dolgov ）

三、圖標的尺寸和比例

在設計圖標時的一個主要規(guī)則就是：你的圖標必須放個合適的方框里，不管它們現(xiàn)實生活中是否是不用的，比如：一個回形針和一個相機。

圖標必須放到一個特定大小的畫板中，確保它們的尺寸在視覺上是一致的，然而這意味著你的圖標需要挨著畫板的四個邊。為了讓整個圖標集看起來一樣，有些圖標可以小一點，在接下來的章節(jié)中我們將繼續(xù)討論這個。

之前有新手就一直糾結(jié)視覺上怎么統(tǒng)一，這個還是需要自己去多練習，文章末尾我會分享網(wǎng)格，確保在90%的圖標都是統(tǒng)一的，個別視覺需要自己另行調(diào)整。

為特定的項目選擇特定的尺寸， 如果你為iOS或是Android設計圖標，在決定尺寸之前，你應該查看圖標規(guī)范。不過我們一般移動端是sketch 里面用的是24×24，在ai里面是用的是24×24或48×48。

如果是為網(wǎng)頁項目創(chuàng)建圖標，或是練習，可以使用以下這些默認尺 16×16, 24×24,32×32, 48×48, 64×64, 96×96, 128×128,256×256, 512×512;

備注：如果你是一個初級圖標設計師，我建議避免使用較小的尺寸，因為小尺寸更有難度，64 或 96 px 的網(wǎng)格是不錯的選擇。

四、使用網(wǎng)格

其實，寫這篇文章是因為我的一個學弟問了我很多如何繪制圖標的問題，我給了他網(wǎng)格，但是他卻思想陷入其中，不知道如何視覺統(tǒng)一。其實，在你真正理解網(wǎng)格的時候，你要畫很多圖標才能理解網(wǎng)格的意義。

4.1 究竟什么是圖標網(wǎng)格?

把圖標網(wǎng)格當成一種約束，讓你的圖標集保持規(guī)范統(tǒng)一，網(wǎng)格是一個框架，讓你的圖標保持統(tǒng)一。

下面我分享2種常用的網(wǎng)格：

鏈接: https://pan.baidu.com/s/1fEz33qHOzPxkYAmejU8T5A 密碼: mutt

4.2 什么時候使用網(wǎng)格？

首先，如果你要創(chuàng)建超過50個圖標的圖標集時我認為網(wǎng)格很有必要。 你要使用同一種風格創(chuàng)建很多圖標，網(wǎng)格有助于保持視覺網(wǎng)格統(tǒng)一 。

另一個情況就是當你要給現(xiàn)有的平臺設計圖標，而這個平臺有自己的圖標網(wǎng)格。 如給 iOS或Android 設計圖標，你最好使用它們各自的網(wǎng)格，這些網(wǎng)格確保它們在各個平臺上保持網(wǎng)格統(tǒng)一，你應該遵循這些規(guī)則，確保和平臺的風格保持一致。

這是一個框架結(jié)構(gòu)，你的圖標集將會在這個基礎一致。如果將來這些網(wǎng)格會被其他人維護，網(wǎng)格也能派上用場。比如：你要創(chuàng)建一個通用樣式，其他人會在這基礎上構(gòu)建其他圖標集。網(wǎng)格很像需要遵循的規(guī)則，讓其他設計師在最開始就明白圖標的尺寸。

就像上面所說，網(wǎng)格被高估了它的作用，但是在有些場合仍然至關重要。

4.3 如何使網(wǎng)格?

大多數(shù)時候我使用最簡單的網(wǎng)格，就是上面網(wǎng)盤里面ai 文件的網(wǎng)格。

如下圖：

這是我經(jīng)常使用的網(wǎng)格

五、圖標視覺統(tǒng)一

這個網(wǎng)格背后理念就是把你的圖標放到框內(nèi)，盡量保持圖標的在在里面框里面，不要超過第二個框，當然如果為了視覺需要也可以出來。這個就是新手把握不準的地方了，因為如何判斷是否需要根據(jù)視覺需要，這個他們很難理解。這個需要在你的后面練習中去自己體會，這里我會分析幾種常見的視覺需要。

國外有一個文章解釋過這個原理，原文鏈接https://link.jianshu.com/?t=https://medium.muz.li/optical-effects-9fca82b4cd9a

上文翻譯版本請查看這里，這是解釋視覺統(tǒng)一的一些原理，如果還是看不懂，就要多加練習，才能領悟。讓你的圖標保持統(tǒng)一，那它們就會說話哦。

1. 使用統(tǒng)一風格；
2. 保持設計語言一致：這個不難解釋，就是如果都是圓角，請都保持圓角，如果粗細是2px，請都保持一樣的粗細；
3. 尺寸很重要，保持大小一致：這個就是上文提到的網(wǎng)格，最好在網(wǎng)格里面畫，就能避免90%的圖標不一致；
4. 在一個圖標集中使用相同元素：這些說的不是絕對的，比如：這個圖標里面有一個元是10px，另一個地方也需要用到類似大小的圓，請盡量用一樣大小的圓。不要用9px，這樣保持元素一致，才能整體統(tǒng)一；
5. 使用同一套配色方案：這點如果你看很多圖標就會發(fā)現(xiàn)，圖標的統(tǒng)一性比識別性更重要，一眼看去，顏色一樣，個別的粗細不一樣，或許你要花一點時間才能找出來，如果是顏色不一樣，一眼就看出來了。

六、軟件的使用

我一般使用的是ai ：

設置，注意要選像素

建立好以后的樣子顯示/隱藏參考線command+；

顯示/隱藏參考線command+；

準備工作，建立網(wǎng)格

設置參數(shù)

設置好網(wǎng)格以后，你可能會發(fā)現(xiàn)，依然沒有網(wǎng)格，顯示/隱藏網(wǎng)格 command + “

選中所有的輔助線，command+2 將輔助線鎖定住，這樣你在操作的時候，就不會選中輔助線了

隨時預覽圖標是否視覺上統(tǒng)一，快捷鍵 command +shift + H

知識點，畫好基礎圖形的時候，一定要查看屬性，保證寬和高，X、Y，沒有小數(shù)點，要保證是整數(shù)。

常用的功能將路徑變?yōu)樾螤?/p>

另一個方法將路徑變?yōu)樾螤钍菙U展功能，在稍微復雜一點的里面會用到

這個小的知識點，這個可以選擇圖標對其畫板，還是2形狀的對其，形狀編組快捷鍵是command +G

切換描邊和線性的快捷鍵是 shift + X，像上圖描述一樣，我們可以快速的將線性圖標變?yōu)槊嫘詧D標。

這里有一個知識點，形狀生成器，是一個比布爾運算好用100倍的工具。快捷鍵是shift + M 選中以后，按住option 就是減掉形狀，不按就是讓2個形狀合并，記住，用這個工具之前，要全選整個圖標。

七、圖標靈感網(wǎng)站推薦

http://www.iconfont.cn/

http://www.iconlet.com/

https://icons8.com/web-app/new-icons/ios7

http://linea.io/

部分網(wǎng)站需要自備梯子

7.1 圖標繪畫技巧網(wǎng)站

http://m.zcool.com.cn/article/ZNjgzOTky.html?from=groupmessage&isappinstalled=0

八、圖標收集整理軟件推薦

NUCLEO，這個軟件的好處是里面有自帶的icon，拖到界面就能用

eagle，圖片和icon收集軟件，缺點是不會更新icon，不過收集靈感很好用

這么長的文章，我也是碼字一天了，基本這些掌握了就可以了。稍加練習，就可以完成很好的圖標集。

補充：

有評論說sketch半像素問題，再次列出解決方案：

基本上面2個步驟就能解決了，還有一個方法是通過插件的方法，那個插件我很久沒有用了。名字叫：Pixel Cleanup For Sketch

本文由 @二哈 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議