如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

 來源：圖冀網(wǎng)

前言：大家好我是Levy Zhao，這是一篇由國外萬粉dribbble大神Justas Galaburda免費(fèi)提供的圖標(biāo)設(shè)計(jì)指南，在國外的UI設(shè)計(jì)圈子里算是引起了不小的關(guān)注。與一些小伙伴所期待的可能不一樣的一點(diǎn)是，這是一篇側(cè)重于方法論方面的指南，涵蓋了從設(shè)計(jì)第一枚圖標(biāo)開始到完成一整套圖標(biāo)所需要的一切，而不是一篇側(cè)重于軟件技術(shù)方面的指南。

由于這個(gè)指南本身是一個(gè)超多內(nèi)容的英文PDF文件，所以我對這個(gè)文章的章節(jié)和一些重要的內(nèi)容做了一些翻譯，希望能夠幫助大家了解一下這個(gè)PDF的大致內(nèi)容。

在一切開始之前，還要為大家介紹一下 Justas Galaburda（https://dribbble.com/jucha） 這位大神。廢話不多說咱們看圖。

 順帶這位大神的博客地址是：iconutopia.com   里面有很多使用AI畫圖標(biāo)的小技巧，同時(shí)有特別知名的每月最佳圖標(biāo)評選（一期http://iconutopia.com/best-icons-of-the-month-november/），值得一看。

那一起看一下這位大神究竟在圖標(biāo)方面為我們提供了什么樣的指南。注：所有的內(nèi)容我都只是挑了我理解的重點(diǎn)翻譯了一下，如果要看全文的話記得去下PDF喲。PDF下載地址：http://iconutopia.com/files/Icon-Design-Guide-by-IconUtopia.pdf

目錄

第一章：關(guān)于圖標(biāo)的歷史與目的

什么是圖標(biāo)？

圖標(biāo)的歷史

為什么圖標(biāo)很重要？

第二章：圖標(biāo)設(shè)計(jì)的基本知識

圖標(biāo)的種類

圖標(biāo)的風(fēng)格

圖標(biāo)的大小與屬性

網(wǎng)格的作用

使圖標(biāo)具有凝聚力

第三章：完成你的第一套圖標(biāo)之前你需要知道的一切

怎樣選擇正確的主題

選擇要畫的圖標(biāo)

怎樣為圖標(biāo)選擇正確的隱喻

草圖的重要性

怎樣知道要用的風(fēng)格

理想的網(wǎng)格大小

選擇使用的軟件

如何提取最簡潔的圖標(biāo)造型

將你圖標(biāo)中的所有元素完美對齊著色與技巧

使圖標(biāo)

完成你的圖標(biāo)組

后記

第一章：圖標(biāo)的歷史與目的

1.1 什么是圖標(biāo)

我認(rèn)為圖標(biāo)最精準(zhǔn)和簡單的定義是圖標(biāo)是一種通過相似性或類比性來代表對象的符號或者表現(xiàn)。（If you ask me, I think the most accurate and simple definition is that an icon is a sign or a representation that stands for its object by virtue of a resemblance or analogy to it. 這句有點(diǎn)難翻譯）

1.2圖標(biāo)的歷史

偷懶的作者直接貼了一個(gè)鏈接上來……https://historyoficons.com/

1.3為什么圖標(biāo)很重要？

圖標(biāo)使這個(gè)世界結(jié)合起來。無論你使用的是哪一種母語，圖標(biāo)都是比語言更為容易理解的可視化語言。同時(shí)圖標(biāo)傳遞信息非常的。人類能夠維持注意力的時(shí)間越來越短（已經(jīng)比金魚還短了），因此傳遞信息的速度就越來越重要。

第二部分：圖標(biāo)設(shè)計(jì)的基本知識

2.1圖標(biāo)的種類

表象符號：通過和現(xiàn)實(shí)物體的相似性或參考性(reference)來傳遞信息的符號。比如飛機(jī)來代表飛機(jī)場。

表意符號：不是表現(xiàn)一個(gè)物體了，而是表達(dá)一個(gè)概念。比如加號減號都是這種。

同時(shí)表意符號和表象符號經(jīng)常會(huì)被結(jié)合在一起用來傳達(dá)正確的信息。比如創(chuàng)建新文件這種。

2.2 圖標(biāo)的風(fēng)格

線性圖標(biāo) 

填充圖標(biāo)（譯者：作者最擅長的就是這種，而且最近超流行的） 

   

面型圖標(biāo) 

扁平圖標(biāo)

手繪風(fēng)格圖標(biāo)

擬物圖標(biāo)

2.3圖標(biāo)的尺寸和屬性

畫圖標(biāo)的時(shí)候最重要的一條就是所有的圖標(biāo)都要能夠適應(yīng)同一個(gè)大小的正方形畫板，不管你畫的東西實(shí)際生活里面大小是多大，都得最后畫成差不多大。

那么在選擇尺寸的方面，如果你是在畫ios或者安卓的圖標(biāo)，按照對應(yīng)的平臺規(guī)范來就好。如果是web或者練習(xí)用，可以選擇這幾種：16x16, 24x24, 32x32, 48x48, 64x64, 96x96, 128x128, 256x256, 512x512。

同時(shí)如果是剛開始畫圖標(biāo)的話，建議選64-96px的會(huì)比較容易上手。

2.4網(wǎng)格的用法

雖然目前有很多先進(jìn)的圖標(biāo)網(wǎng)格系統(tǒng)比如ios和安卓都有碉堡了的網(wǎng)格系統(tǒng)。但是其實(shí)網(wǎng)格系統(tǒng)被過分強(qiáng)調(diào)了。我認(rèn)為你在練習(xí)了上千個(gè)圖標(biāo)之前其實(shí)是沒有必要去思考關(guān)于網(wǎng)格的問題的，

那么網(wǎng)格到底是什么呢？網(wǎng)格是一種畫板內(nèi)的參考線，最大的作用就是通過保證一套合理的結(jié)構(gòu)來讓你的圖標(biāo)組看起來很和諧很一致。

那什么應(yīng)該在時(shí)候用網(wǎng)格呢？第一種情況是，如果你的圖標(biāo)組有超過50個(gè)圖標(biāo)的時(shí)候；

第二種是如果你在為已有一套網(wǎng)格系統(tǒng)的圖標(biāo)繼續(xù)畫東西的時(shí)候。

第三種情況是，你知道日后有人會(huì)繼續(xù)接手你的圖標(biāo)組的時(shí)候。

那應(yīng)該怎么使用網(wǎng)格？通常的話我會(huì)使用下面的這兩種：

  

這背后的原理是有時(shí)候一些圖形看起來會(huì)比另外一些大，比如正方形看起來比一樣大的圓形大。所以就會(huì)把正方形放在里面的那個(gè)方形里面。（譯者：這部分的話，大家可以去閱讀以下谷歌的圖標(biāo)設(shè)計(jì)指南，里面專門講過這部分）

如果你要練習(xí)的話可以先用現(xiàn)有的網(wǎng)格練了試試看。下載鏈接：http://iconutopia.com/files/Icon-Grids.zip

2.5 讓圖標(biāo)和諧

畫一個(gè)好看的圖標(biāo)是很簡單的。分別畫幾個(gè)好看的圖標(biāo)也不難，真正讓你崩潰的是怎么讓他們看上去和諧。

首先我們要明白一個(gè)問題就是為什么要讓圖標(biāo)看起來很和諧？其實(shí)圖標(biāo)是一種獨(dú)特的語言，每個(gè)圖標(biāo)都是一個(gè)有獨(dú)特意義的單詞。但是只有當(dāng)它們結(jié)合在一起的時(shí)候，才能組成句子。注意千萬不要在一套圖標(biāo)里用不同的風(fēng)格！那樣就跟一句話里面用不同的語言一樣。（譯者：想想說話的時(shí)候喜歡夾著英文單詞的人）

1. 只使用一種風(fēng)格的圖標(biāo)。原因上面說過了

2. 使用同一種風(fēng)格化的技巧。這里說的跟使用同一種風(fēng)格有一些區(qū)別。即使都是線性圖標(biāo)，也可有成千上萬種不一樣的做法。所以要保持組成你的風(fēng)格的元素一致，比如用多粗的線條，用多大的圓角，等等。

3. 大小很重要。不光是要在一樣大小的矩形里面，而是要讓他們視覺上的大小保持一致。

4. 嘗試使用網(wǎng)格。我不是在打自己的臉，一定要記住不要過分使用！

5. 在整套圖標(biāo)中使用一樣的元素。比如一樣大小的圓形，可以使他們看起來更和諧，也可以節(jié)約你的時(shí)間。

6. 使用同一套色板。

同時(shí)要強(qiáng)調(diào)一點(diǎn)，永遠(yuǎn)不要為了圖標(biāo)的一致性犧牲了圖標(biāo)的識別性。識別性才是讓圖標(biāo)這么牛逼的關(guān)鍵。

第三章：完成你的第一套圖標(biāo)之前你需要知道的一切

怎樣選擇正確的主題

選擇要畫的圖標(biāo)

怎樣為圖標(biāo)選擇正確的隱喻

草圖的重要性

怎樣知道要用的風(fēng)格

理想的網(wǎng)格大小

選擇使用的軟件

如何提取最簡潔的圖標(biāo)造型

將你圖標(biāo)中的所有元素完美對齊

著色與技巧

創(chuàng)造的圖標(biāo)

完成前的最后潤色

第三章 完成你的第一套圖標(biāo)之前你需要知道的一切

3.1 怎樣選擇正確的主題？

如果這是你的第一套圖標(biāo)的話，為自己而做并且選擇一個(gè)你自己覺得很有意思的主題。因?yàn)檫@樣不僅會(huì)減少不必要的限制條件同時(shí)能讓你在做圖標(biāo)的過程中感受到樂趣。另外，你不會(huì)缺少這個(gè)主題下的想法。

3.2 選擇那些圖標(biāo)來畫？

如果你在做你自己感興趣的主題的話你應(yīng)該能很輕松知道選擇哪些最具有代表性。坐下來拿個(gè)紙和本子記錄下來你想到的關(guān)于這個(gè)主題的東西。當(dāng)你想不到啥新鮮東西的時(shí)候就google一下，同時(shí)你也可以去一些圖標(biāo)網(wǎng)站找點(diǎn)靈感（iconfinder，creativemarket，iconfont，nounproject）。即使你已經(jīng)有一個(gè)很好的想法了，我還是建議你去跟你的朋友們一起做個(gè)腦暴。但是要注意不要光BB，要把每個(gè)詞都用進(jìn)入你腦海的第一個(gè)印象畫下來，你會(huì)得到很多碉堡了的概念的。

3.3 怎么樣找到每個(gè)圖標(biāo)的最佳語義符號

當(dāng)你遇到不知道怎么選擇正確的語義符號來傳達(dá)你想要傳達(dá)的信息的時(shí)候，我再次推薦你谷歌一下。也可以去查一查有沒有已經(jīng)發(fā)布的圖標(biāo)組里包含了你想要的那個(gè)。

3.4 草圖的重要性

當(dāng)你有了想法之后，就應(yīng)該去選擇適合你的最佳圖標(biāo)。不要直接上軟件，先粗略的畫一畫草圖。很多小伙伴潛意識里拒絕畫草圖是因?yàn)樗麄兯麄儾恢涝趺醋龌蛘卟涣?xí)慣做。但是萬事開頭難，一旦你開始這樣做，你會(huì)根本停不下來。

草圖帶來最佳的想法

如果你直接上軟件你很有可能會(huì)陷進(jìn)這個(gè)思路里。第一個(gè)想法往往不是最好的，在草圖階段多做嘗試會(huì)讓你的圖標(biāo)更趨近完美。

你的草圖本就是你的靈感集

鐵律一：永遠(yuǎn)帶著你的草圖本。隨時(shí)記錄下靈感，同時(shí)能讓你回顧你之前的作品，發(fā)現(xiàn)以前的作品，同時(shí)激勵(lì)你繼續(xù)努力練習(xí)。

草圖會(huì)節(jié)約你的時(shí)間

有一種常見的錯(cuò)誤思路就是認(rèn)為草圖會(huì)浪費(fèi)時(shí)間。這是錯(cuò)的！想一想你用AI不斷返工修改的那些時(shí)間，如果你畫了草圖這些可能根本不會(huì)發(fā)生。想一下如果你要在ai里面嘗試風(fēng)格或者變化有多麻煩，我可以肯定的說這會(huì)要畫草圖的兩倍時(shí)間。

誰都可以畫草圖

這是最棒的一部分，你們說你們不會(huì)畫畫，其實(shí)我也不會(huì)?。ㄗg者：信你有鬼，不要以為我沒看過你的視頻），但是如果你堅(jiān)持做的話，你會(huì)畫的越來越好。而且你只是畫個(gè)草圖而已，不是要畫個(gè)大作，冷靜，放松，享受這個(gè)過程。

我的草圖流程

我的草圖流程分為兩個(gè)部分。第一個(gè)部分更類似腦暴。我會(huì)把我剛才的想法和icon全都簡單畫出來。這一步的目的是檢查對于同一個(gè)圖標(biāo)來說哪個(gè)是最好的。

當(dāng)我決定了哪個(gè)草圖看起來最好之后我會(huì)進(jìn)入下一步——畫更具體的草圖。這里我推薦大家使用網(wǎng)點(diǎn)本。

首先我會(huì)畫一個(gè)正方形作為邊界，然后選擇勝出的那個(gè)來細(xì)化它。在這個(gè)階段我會(huì)嘗試使用基本圖形，這是嘗試找到你的圖標(biāo)的最佳結(jié)構(gòu)的最好方式，因?yàn)楝F(xiàn)在你可以快速的草圖和修改。后面我們會(huì)詳細(xì)講。

當(dāng)草圖完成之后我一般會(huì)把他們拍下來或者掃描一下作為矢量化的參考。

3.5 怎么樣知道使用哪種風(fēng)格？

通常根據(jù)那些令人激動(dòng)品牌設(shè)計(jì)或者logo來選擇你的風(fēng)格是很好的思路。我一般會(huì)搜一下我正在創(chuàng)作的圖標(biāo)的相關(guān)品牌來找一些能夠很好表現(xiàn)它的元素。同時(shí)你應(yīng)該好好留意一下那些形狀，顏色和字體等等。試著找一下他們的調(diào)性。所有的這些會(huì)告訴你你應(yīng)該用什么樣的風(fēng)格同時(shí)會(huì)對你的工作流和風(fēng)格化方面加上許多的限制。

如果你剛好沒有什么特別喜歡的風(fēng)格，我推薦所有的新手都從線性圖標(biāo)開始練起。這里給你們一篇文章，希望對你們有所幫助。

http://iconutopia.com/proper-way-of-creating-outline-icons/

3.6 理想的網(wǎng)格大小

網(wǎng)格的大小主要取決于你的圖標(biāo)的使用場景

3.7 選擇使用的軟件

答案就是隨便，哪個(gè)順手用哪個(gè)。剛開始練習(xí)的時(shí)候建議不要去做32px以下的圖標(biāo)，因?yàn)橥ㄟ^一個(gè)圖標(biāo)去傳達(dá)正確的信息會(huì)變的很困難。

3.8 如何提取最簡潔的圖標(biāo)造型

圖標(biāo)應(yīng)該看起來超級簡潔，但是簡潔不是一件容易的事。那么，怎么才能知道在一個(gè)圖標(biāo)里做多少的細(xì)節(jié)呢？圖標(biāo)越小，細(xì)節(jié)應(yīng)該越少。但是你應(yīng)該在減少細(xì)節(jié)的過程中小心不要做過火。

看一下這個(gè)例子：

  

你能猜到這個(gè)的含義么，他的意思是工作面試。這是一個(gè)典型的超簡潔的但是搞不懂意思的一個(gè)圖標(biāo)。

谷歌的material design的圖標(biāo)是更好的極簡圖標(biāo)的范例。關(guān)鍵點(diǎn)在于在使圖標(biāo)簡潔的同時(shí)含義清晰。同時(shí)不要忘記圖標(biāo)應(yīng)該是引人注目同時(shí)有一點(diǎn)點(diǎn)趣味的。你把所有的內(nèi)容都拿走了，那它看上去肯定會(huì)很無趣。

使用基本圖形

復(fù)雜的圖標(biāo)可以用基本圖形來組成，你要做的只是換個(gè)角度來看待問題。圖標(biāo)的使命是傳達(dá)信息，因此它需要很明晰。這就是為什么要使用基本圖形從而不會(huì)使圖標(biāo)比它所需要的更復(fù)雜。

我知道初學(xué)者可能會(huì)在使用基本圖形將一個(gè)復(fù)雜實(shí)物變成一個(gè)簡單圖形的過程中遇到許多困難。解決這個(gè)只有一種辦法，練習(xí)。

首先，聚焦在你選擇的物體的特點(diǎn)上。在設(shè)計(jì)中強(qiáng)調(diào)關(guān)鍵元素非常的重要。同時(shí)牢記少即是多，如果有什么元素你去掉它也不妨礙理解，那么去掉它就好。

第二個(gè)技巧是草圖。這樣做主要是因?yàn)闀?huì)很快。

唯有不斷聯(lián)系才能幫助你理解這一切。

看一些例子。

總結(jié)一下

把你的圖標(biāo)簡約到它的本質(zhì)是非常關(guān)鍵的一步，但是有時(shí)候會(huì)弄巧成拙。永遠(yuǎn)牢記圖標(biāo)的目的是傳遞信息。

額外閱讀：

http://blog.iconfinder.com/better-icon-design-in-6-easy-steps/

3.9 將你圖標(biāo)中的所有元素完美對齊

 區(qū)分圖標(biāo)的好與壞的一個(gè)重要因素就是元素的對齊和間距。正確的對齊和的間距可以將你的圖標(biāo)帶到一個(gè)全新的境界。我已經(jīng)強(qiáng)調(diào)過了使用一致的元素，但是同時(shí)使用一致的間距和對齊也同樣重要的原因是：

1. 保證了一套圖標(biāo)的一致性

2. 你的圖標(biāo)看上去更加專業(yè)

3. 平衡的圖標(biāo)看上去更有吸引力 

當(dāng)使用同一種間距 規(guī)則的時(shí)候你在相似的元素間創(chuàng)造聯(lián)系——同時(shí)從另一個(gè)角度上來說，將主要元素和次要的分割開來。

一起來看一下這個(gè)信用卡的圖標(biāo)：

  

這個(gè)圖標(biāo)根據(jù)64px的網(wǎng)格來制作，同時(shí)我是用了4px的描邊。這樣做的原因是這樣我也可以把它變成最小的圖標(biāo)。（16px）

在可能的情況下，總是根據(jù)你要使用的最小間距單位來選擇你要在圖標(biāo)中使用的元素的大小。舉個(gè)例子，那個(gè)磁條的寬度是最小間距的三倍，所以信息的那個(gè)跳的寬度也是三倍。那個(gè)mastercard的元素的寬度是五倍，所以信息條下面的那條的寬度也是五倍。

當(dāng)你開始畫第一個(gè)圖標(biāo)的時(shí)候，就開始為剩下的圖標(biāo)準(zhǔn)備規(guī)則。比如對于同一種元素用4px的間隔對于不同組的元素用8px的間隔。再強(qiáng)調(diào)一下，這些規(guī)則不是死的，要靈活變通。

這樣我們的規(guī)則大概就是這樣

元素之間的間距：

1x - 4px

2x - 8px

物體的大小

1x-4px

3x-12px

5x-20px

在整套繪制的過程中你肯定會(huì)用到更多的尺寸，所以一定要確定你的最小間距的值不要變。

另外一件你要記住的事情是不要使用太多的間距尺寸，一般來說2-3中尺寸就足夠了，不要折騰太多不一樣的。

然后永遠(yuǎn)記住的一點(diǎn)，永遠(yuǎn)不要因?yàn)橐曈X犧牲圖標(biāo)的識別性。

3.10 著色與技巧

色彩是非常強(qiáng)大的。這就是為什么為你的圖標(biāo)選擇合適的顏色如此重要。現(xiàn)在我來告訴你一些小秘密。

明確了解內(nèi)容

一切都取決于你的圖標(biāo)會(huì)被用在哪兒。在你開始之前有兩個(gè)事情要提前考慮的：

1. 你的圖標(biāo)會(huì)被用在哪兒

2. 誰是他們的目標(biāo)人群

選擇正確的色板

取決你想要的風(fēng)格你可以使用單色系列，使用一個(gè)顏色的不同色度?；蛘哌x擇一個(gè)配好不同顏色的色板，這是用來創(chuàng)作扁平圖標(biāo)的常用方法。做出優(yōu)秀的是配色確實(shí)不是一件容易的事情。我的建議是在整套中使用2-5種顏色。

可以找找Colourlovers或者adobe color來獲取靈感。不要害怕嘗試。

明白顏色的含義

關(guān)于這部分內(nèi)容我就不翻譯了，強(qiáng)烈推薦小伙伴們?nèi)プx一些關(guān)于色彩方面的文章和書籍。

3.11 創(chuàng)造的圖標(biāo)

首先不要因?yàn)楹ε聸]有自己的獨(dú)特的風(fēng)格就不去創(chuàng)造任何圖標(biāo)了。掌握一個(gè)自己的風(fēng)格是很難的一件事，需要上千個(gè)小時(shí)的練習(xí)。我認(rèn)為在一個(gè)方面做到要好過在很多方面都平庸。如果你有一個(gè)自己的獨(dú)特風(fēng)格，那么喜歡你的風(fēng)格的客戶就會(huì)直接來找你了。

而且有一個(gè)獨(dú)特和具有很強(qiáng)識別性的個(gè)人風(fēng)格能夠成為你吸引狂熱粉絲的基礎(chǔ)。

那么怎么才能找到你的個(gè)人風(fēng)格呢？

在我的概念中，最好的方式就是你每天都狂畫，但是不要去想那些什么個(gè)人風(fēng)格的問題。到最后你的個(gè)人風(fēng)格自然會(huì)一點(diǎn)點(diǎn)慢慢匯聚起來的。

3.12 完成前的最后潤色

首先要說的是你不太可能在反復(fù)修改前完成你的第一套圖標(biāo)。在你完成所有的圖標(biāo)后，就是你微調(diào)和修改他們的關(guān)鍵時(shí)刻了。這一步真的很重要，因?yàn)橹挥械搅诉@個(gè)時(shí)候，你才能調(diào)整單個(gè)的圖標(biāo)來時(shí)他們看起來更成套。你需要讓他們看起來很平均并且一樣漂亮。

有時(shí)候要發(fā)現(xiàn)所有的小問題是很難的。我喜歡把圖標(biāo)打印下來。這樣能夠更輕松察覺到所有的不連貫的地方，微小的細(xì)節(jié)差別和所有要改正的地方。然后拿個(gè)鉛筆然后改就行了。反復(fù)修改直到你感覺不到還有不對的地方。

但是一定要注意！

千萬不要因?yàn)橥昝乐髁x而放棄完成你的一整套圖標(biāo)！把你的圖標(biāo)po出去，獲取建議，然后一步步提高。完成要比完美更棒。

OK以上就是這份指南的大部分內(nèi)容了，因?yàn)槲覐?qiáng)烈的拖延癥的關(guān)系脫了很長時(shí)間終于是弄完了。最后還是強(qiáng)烈推薦一下大家去閱讀原文，畢竟我只是簡單挑了一些翻譯，還有很多不到位的地方。最后感謝大家閱讀。PDF我看看能不能給弄到附件里面去。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)