這是一篇非常全面的圖標設計乾貨
側重於方法論方面的指南，涵蓋了從設計第一枚圖標開始到完成一整套圖標所需要的一切，而不是一篇側重於軟體技術方面的指南
作者Justas Galaburda
（https://dribbble.com/jucha）
目錄
第一章：關於圖標的歷史與目的
什麼是圖標？
圖標的歷史
為什麼圖標很重要？
第二章：圖標設計的基本知識
圖標的種類
圖標的風格
圖標的大小與屬性
網格的作用
使圖標具有凝聚力
第三章：完成你的第一套圖標之前你需要知道的一切
怎樣選擇正確的主題
選擇要畫的圖標
怎樣為圖標選擇正確的隱喻
草圖的重要性
怎樣知道要用的風格
理想的網格大小
選擇使用的軟體
如何提取最簡潔的圖標造型
將你圖標中的所有元素完美對齊著色與技巧
使圖標獨一無二
完成你的圖標組
後記
第一章：圖標的歷史與目的
1.1 什麼是圖標
我認為圖標最精準和簡單的定義是圖標是一種通過相似性或類比性來代表對象的符號或者表現。
1.2圖標的歷史
偷懶的作者直接貼了一個連結上來……
https://historyoficons.com/
1.3為什麼圖標很重要？
圖標使這個世界結合起來。無論你使用的是哪一種母語，圖標都是比語言更為容易理解的可視化語言。同時圖標傳遞信息非常的高效。人類能夠維持注意力的時間越來越短（已經比金魚還短了），因此傳遞信息的速度就越來越重要。
第二部分：圖標設計的基本知識
2.1圖標的種類
表象符號：通過和現實物體的相似性或參考性(reference)來傳遞信息的符號。比如飛機來代表飛機場。
表意符號：不是表現一個物體了，而是表達一個概念。比如加號減號都是這種。
同時表意符號和表象符號經常會被結合在一起用來傳達正確的信息。比如創建新文件這種。
2.2 圖標的風格
線性圖標
填充圖標（譯者：作者最擅長的就是這種，而且最近超流行的）
面型圖標
扁平圖標
手繪風格圖標
擬物圖標
2.3圖標的尺寸和屬性
畫圖標的時候最重要的一條就是所有的圖標都要能夠適應同一個大小的正方形畫板，不管你畫的東西實際生活裡面大小是多大，都得最後畫成差不多大。
那麼在選擇尺寸的方面，如果你是在畫ios或者安卓的圖標，按照對應的平臺規範來就好。如果是web或者練習用，可以選擇這幾種：16x16, 24x24, 32x32, 48x48, 64x64, 96x96, 128x128, 256x256, 512x512。
同時如果是剛開始畫圖標的話，建議選64-96px的會比較容易上手。
2.4網格的用法
雖然目前有很多先進的圖標網格系統比如ios和安卓都有碉堡了的網格系統。但是其實網格系統被過分強調了。我認為你在練習了上千個圖標之前其實是沒有必要去思考關於網格的問題的，
那麼網格到底是什麼呢？網格是一種畫板內的參考線，最大的作用就是通過保證一套合理的結構來讓你的圖標組看起來很和諧很一致。
那什麼應該在時候用網格呢？第一種情況是，如果你的圖標組有超過50個圖標的時候；
第二種是如果你在為已有一套網格系統的圖標繼續畫東西的時候。
第三種情況是，你知道日後有人會繼續接手你的圖標組的時候。
那應該怎麼使用網格？通常的話我會使用下面的這兩種：
這背後的原理是有時候一些圖形看起來會比另外一些大，比如正方形看起來比一樣大的圓形大。所以就會把正方形放在裡面的那個方形裡面。（譯者：這部分的話，大家可以去閱讀以下谷歌的圖標設計指南，裡面專門講過這部分）
如果你要練習的話可以先用現有的網格練了試試看。下載連結：http://iconutopia.com.zcool.cn/files/Icon-Grids.zip
2.5 讓圖標和諧
畫一個好看的圖標是很簡單的。分別畫幾個好看的圖標也不難，真正讓你崩潰的是怎麼讓他們看上去和諧。
首先我們要明白一個問題就是為什麼要讓圖標看起來很和諧？其實圖標是一種獨特的語言，每個圖標都是一個有獨特意義的單詞。但是只有當它們結合在一起的時候，才能組成句子。注意千萬不要在一套圖標裡用不同的風格！那樣就跟一句話裡面用不同的語言一樣。（譯者：想想說話的時候喜歡夾著英文單詞的人）
只使用一種風格的圖標。原因上面說過了
使用同一種風格化的技巧。這裡說的跟使用同一種風格有一些區別。即使都是線性圖標，也可有成千上萬種不一樣的做法。所以要保持組成你的風格的元素一致，比如用多粗的線條，用多大的圓角，等等。
大小很重要。不光是要在一樣大小的矩形裡面，而是要讓他們視覺上的大小保持一致。
嘗試使用網格。我不是在打自己的臉，一定要記住不要過分使用！
在整套圖標中使用一樣的元素。比如一樣大小的圓形，可以使他們看起來更和諧，也可以節約你的時間。
使用同一套色板。
同時要強調一點，永遠不要為了圖標的一致性犧牲了圖標的識別性。識別性才是讓圖標這麼牛逼的關鍵。
第三章：完成你的第一套圖標之前你需要知道的一切
怎樣選擇正確的主題
選擇要畫的圖標
怎樣為圖標選擇正確的隱喻
草圖的重要性
怎樣知道要用的風格
理想的網格大小
選擇使用的軟體
如何提取最簡潔的圖標造型
將你圖標中的所有元素完美對齊
著色與技巧
創造獨一無二的圖標
完成前的最後潤色
第三章 完成你的第一套圖標之前你需要知道的一切
3.1 怎樣選擇正確的主題？
如果這是你的第一套圖標的話，為自己而做並且選擇一個你自己覺得很有意思的主題。因為這樣不僅會減少不必要的限制條件同時能讓你在做圖標的過程中感受到樂趣。另外，你不會缺少這個主題下的想法。
3.2 選擇那些圖標來畫？
如果你在做你自己感興趣的主題的話你應該能很輕鬆知道選擇哪些最具有代表性。坐下來拿個紙和本子記錄下來你想到的關於這個主題的東西。當你想不到啥新鮮東西的時候就google一下，同時你也可以去一些圖標網站找點靈感（iconfinder，creativemarket，iconfont，nounproject）。即使你已經有一個很好的想法了，我還是建議你去跟你的朋友們一起做個腦暴。但是要注意不要光BB，要把每個詞都用進入你腦海的第一個印象畫下來，你會得到很多碉堡了的概念的。
3.3 怎麼樣找到每個圖標的最佳語義符號
當你遇到不知道怎麼選擇正確的語義符號來傳達你想要傳達的信息的時候，我再次推薦你谷歌一下。也可以去查一查有沒有已經發布的圖標組裡包含了你想要的那個。
3.4 草圖的重要性
當你有了想法之後，就應該去選擇適合你的最佳圖標。不要直接上軟體，先粗略的畫一畫草圖。很多小夥伴潛意識裡拒絕畫草圖是因為他們他們不知道怎麼做或者不習慣做。但是萬事開頭難，一旦你開始這樣做，你會根本停不下來。
草圖帶來最佳的想法
如果你直接上軟體你很有可能會陷進這個思路裡。第一個想法往往不是最好的，在草圖階段多做嘗試會讓你的圖標更趨近完美。
你的草圖本就是你的靈感集
鐵律一：永遠帶著你的草圖本。隨時記錄下靈感，同時能讓你回顧你之前的作品，發現以前的作品，同時激勵你繼續努力練習。
草圖會節約你的時間
有一種常見的錯誤思路就是認為草圖會浪費時間。這是錯的！想一想你用AI不斷返工修改的那些時間，如果你畫了草圖這些可能根本不會發生。想一下如果你要在ai裡面嘗試風格或者變化有多麻煩，我可以肯定的說這會要畫草圖的兩倍時間。
誰都可以畫草圖
這是最棒的一部分，你們說你們不會畫畫，其實我也不會！（譯者：信你有鬼，不要以為我沒看過你的視頻），但是如果你堅持做的話，你會畫的越來越好。而且你只是畫個草圖而已，不是要畫個大作，冷靜，放鬆，享受這個過程。
我的草圖流程
我的草圖流程分為兩個部分。第一個部分更類似腦暴。我會把我剛才的想法和icon全都簡單畫出來。這一步的目的是檢查對於同一個圖標來說哪個是最好的。
當我決定了哪個草圖看起來最好之後我會進入下一步——畫更具體的草圖。這裡我推薦大家使用網點本。
首先我會畫一個正方形作為邊界，然後選擇勝出的那個來細化它。在這個階段我會嘗試使用基本圖形，這是嘗試找到你的圖標的最佳結構的最好方式，因為現在你可以快速的草圖和修改。後面我們會詳細講。
當草圖完成之後我一般會把他們拍下來或者掃描一下作為矢量化的參考。
3.5 怎麼樣知道使用哪種風格？
通常根據那些令人激動品牌設計或者logo來選擇你的風格是很好的思路。我一般會搜一下我正在創作的圖標的相關品牌來找一些能夠很好表現它的元素。同時你應該好好留意一下那些形狀，顏色和字體等等。試著找一下他們的調性。所有的這些會告訴你你應該用什麼樣的風格同時會對你的工作流和風格化方面加上許多的限制。
如果你剛好沒有什麼特別喜歡的風格，我推薦所有的新手都從線性圖標開始練起。這裡給你們一篇文章，希望對你們有所幫助。
http://iconutopia.com.zcool.cn/proper-way-of-creating-outline-icons/
3.6 理想的網格大小
網格的大小主要取決於你的圖標的使用場景
3.7 選擇使用的軟體
答案就是隨便，哪個順手用哪個。剛開始練習的時候建議不要去做32px以下的圖標，因為通過一個圖標去傳達正確的信息會變的很困難。
3.8 如何提取最簡潔的圖標造型
圖標應該看起來超級簡潔，但是簡潔不是一件容易的事。那麼，怎麼才能知道在一個圖標裡做多少的細節呢？圖標越小，細節應該越少。但是你應該在減少細節的過程中小心不要做過火。
看一下這個例子：
你能猜到這個的含義麼，他的意思是工作面試。這是一個典型的超簡潔的但是搞不懂意思的一個圖標。
谷歌的material design的圖標是更好的極簡圖標的範例。關鍵點在於在使圖標簡潔的同時含義清晰。同時不要忘記圖標應該是引人注目同時有一點點趣味的。你把所有的內容都拿走了，那它看上去肯定會很無趣。
使用基本圖形
複雜的圖標可以用基本圖形來組成，你要做的只是換個角度來看待問題。圖標的使命是傳達信息，因此它需要很明晰。這就是為什麼要使用基本圖形從而不會使圖標比它所需要的更複雜。
我知道初學者可能會在使用基本圖形將一個複雜實物變成一個簡單圖形的過程中遇到許多困難。解決這個只有一種辦法，練習。
首先，聚焦在你選擇的物體的特點上。在設計中強調關鍵元素非常的重要。同時牢記少即是多，如果有什么元素你去掉它也不妨礙理解，那麼去掉它就好。
第二個技巧是草圖。這樣做主要是因為會很快。
唯有不斷聯繫才能幫助你理解這一切。
看一些例子。
總結一下
把你的圖標簡約到它的本質是非常關鍵的一步，但是有時候會弄巧成拙。永遠牢記圖標的目的是傳遞信息。
額外閱讀：
http://blog.iconfinder.com/better-icon-design-in-6-easy-steps/
3.9 將你圖標中的所有元素完美對齊
區分圖標的好與壞的一個重要因素就是元素的對齊和間距。正確的對齊和精確的間距可以將你的圖標帶到一個全新的境界。我已經強調過了使用一致的元素，但是同時使用一致的間距和對齊也同樣重要的原因是：
保證了一套圖標的一致性
你的圖標看上去更加專業
平衡的圖標看上去更有吸引力
當使用同一種間距 規則的時候你在相似的元素間創造聯繫——同時從另一個角度上來說，將主要元素和次要的分割開來。
一起來看一下這個信用卡的圖標：
這個圖標根據64px的網格來製作，同時我是用了4px的描邊。這樣做的原因是這樣我也可以把它變成最小的圖標。（16px）
在可能的情況下，總是根據你要使用的最小間距單位來選擇你要在圖標中使用的元素的大小。舉個例子，那個磁條的寬度是最小間距的三倍，所以信息的那個跳的寬度也是三倍。那個mastercard的元素的寬度是五倍，所以信息條下面的那條的寬度也是五倍。
當你開始畫第一個圖標的時候，就開始為剩下的圖標準備規則。比如對於同一種元素用4px的間隔對於不同組的元素用8px的間隔。再強調一下，這些規則不是死的，要靈活變通。
這樣我們的規則大概就是這樣
元素之間的間距：
1x - 4px
2x - 8px
物體的大小
1x-4px
3x-12px
5x-20px
在整套繪製的過程中你肯定會用到更多的尺寸，所以一定要確定你的最小間距的值不要變。
另外一件你要記住的事情是不要使用太多的間距尺寸，一般來說2-3中尺寸就足夠了，不要折騰太多不一樣的。
然後永遠記住的一點，永遠不要因為視覺犧牲圖標的識別性。
3.10 著色與技巧
色彩是非常強大的。這就是為什麼為你的圖標選擇合適的顏色如此重要。現在我來告訴你一些小秘密。
明確了解內容
一切都取決於你的圖標會被用在哪兒。在你開始之前有兩個事情要提前考慮的：
你的圖標會被用在哪兒
誰是他們的目標人群
選擇正確的色板
取決你想要的風格你可以使用單色系列，使用一個顏色的不同色度。或者選擇一個配好不同顏色的色板，這是用來創作扁平圖標的常用方法。做出優秀的是配色確實不是一件容易的事情。我的建議是在整套中使用2-5種顏色。
可以找找Colourlovers或者adobe color來獲取靈感。不要害怕嘗試。
明白顏色的含義
關於這部分內容我就不翻譯了，強烈推薦小夥伴們去讀一些關於色彩方面的文章和書籍。
3.11 創造獨一無二的圖標
首先不要因為害怕沒有自己的獨特的風格就不去創造任何圖標了。掌握一個自己的風格是很難的一件事，需要上千個小時的練習。我認為在一個方面做到極致要好過在很多方面都平庸。如果你有一個自己的獨特風格，那麼喜歡你的風格的客戶就會直接來找你了。
而且有一個獨特和具有很強識別性的個人風格能夠成為你吸引狂熱粉絲的基礎。
那麼怎麼才能找到你的個人風格呢？
在我的概念中，最好的方式就是你每天都狂畫，但是不要去想那些什麼個人風格的問題。到最後你的個人風格自然會一點點慢慢匯聚起來的。
3.12 完成前的最後潤色
首先要說的是你不太可能在反覆修改前完成你的第一套圖標。在你完成所有的圖標後，就是你微調和修改他們的關鍵時刻了。這一步真的很重要，因為只有到了這個時候，你才能調整單個的圖標來時他們看起來更成套。你需要讓他們看起來很平均並且一樣漂亮。
有時候要發現所有的小問題是很難的。我喜歡把圖標列印下來。這樣能夠更輕鬆察覺到所有的不連貫的地方，微小的細節差別和所有要改正的地方。然後拿個鉛筆然後改就行了。反覆修改直到你感覺不到還有不對的地方。
但是一定要注意！
千萬不要因為完美主義而放棄完成你的一整套圖標！把你的圖標po出去，獲取建議，然後一步步提高。完成要比完美更棒。
往期精華文章導讀：