2017-1-25 用心設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動發(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)常會被結(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的會比較容易上手。
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í)候。
第三種情況是，你知道日后有人會繼續(xù)接手你的圖標(biāo)組的時(shí)候。
那應(yīng)該怎么使用網(wǎng)格？通常的話我會使用下面的這兩種：
這背后的原理是有時(shí)候一些圖形看起來會比另外一些大，比如正方形看起來比一樣大的圓形大。所以就會把正方形放在里面的那個(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í)候喜歡夾著英文單詞的人）
只使用一種風(fēng)格的圖標(biāo)。原因上面說過了
使用同一種風(fēng)格化的技巧。這里說的跟使用同一種風(fēng)格有一些區(qū)別。即使都是線性圖標(biāo)，也可有成千上萬種不一樣的做法。所以要保持組成你的風(fēng)格的元素一致，比如用多粗的線條，用多大的圓角，等等。
大小很重要。不光是要在一樣大小的矩形里面，而是要讓他們視覺上的大小保持一致。
嘗試使用網(wǎng)格。我不是在打自己的臉，一定要記住不要過分使用！
在整套圖標(biāo)中使用一樣的元素。比如一樣大小的圓形，可以使他們看起來更和諧，也可以節(jié)約你的時(shí)間。
使用同一套色板。
同時(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)檫@樣不僅會減少不必要的限制條件同時(shí)能讓你在做圖標(biāo)的過程中感受到樂趣。另外，你不會缺少這個(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è)印象畫下來，你會得到很多碉堡了的概念的。
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í)慣做。但是萬事開頭難，一旦你開始這樣做，你會根本停不下來。
草圖帶來最佳的想法
如果你直接上軟件你很有可能會陷進(jìn)這個(gè)思路里。第一個(gè)想法往往不是最好的，在草圖階段多做嘗試會讓你的圖標(biāo)更趨近完美。
你的草圖本就是你的靈感集
鐵律一：永遠(yuǎn)帶著你的草圖本。隨時(shí)記錄下靈感，同時(shí)能讓你回顧你之前的作品，發(fā)現(xiàn)以前的作品，同時(shí)激勵你繼續(xù)努力練習(xí)。
草圖會節(jié)約你的時(shí)間
有一種常見的錯誤思路就是認(rèn)為草圖會浪費(fèi)時(shí)間。這是錯的！想一想你用AI不斷返工修改的那些時(shí)間，如果你畫了草圖這些可能根本不會發(fā)生。想一下如果你要在ai里面嘗試風(fēng)格或者變化有多麻煩，我可以肯定的說這會要畫草圖的兩倍時(shí)間。
誰都可以畫草圖
這是最棒的一部分，你們說你們不會畫畫，其實(shí)我也不會！（譯者：信你有鬼，不要以為我沒看過你的視頻），但是如果你堅(jiān)持做的話，你會畫的越來越好。而且你只是畫個(gè)草圖而已，不是要畫個(gè)大作，冷靜，放松，享受這個(gè)過程。
我的草圖流程
我的草圖流程分為兩個(gè)部分。第一個(gè)部分更類似腦暴。我會把我剛才的想法和icon全都簡單畫出來。這一步的目的是檢查對于同一個(gè)圖標(biāo)來說哪個(gè)是最好的。
當(dāng)我決定了哪個(gè)草圖看起來最好之后我會進(jìn)入下一步——畫更具體的草圖。這里我推薦大家使用網(wǎng)點(diǎn)本。
首先我會畫一個(gè)正方形作為邊界，然后選擇勝出的那個(gè)來細(xì)化它。在這個(gè)階段我會嘗試使用基本圖形，這是嘗試找到你的圖標(biāo)的最佳結(jié)構(gòu)的最好方式，因?yàn)楝F(xiàn)在你可以快速的草圖和修改。后面我們會詳細(xì)講。
當(dāng)草圖完成之后我一般會把他們拍下來或者掃描一下作為矢量化的參考。
3.5 怎么樣知道使用哪種風(fēng)格？
通常根據(jù)那些令人激動品牌設(shè)計(jì)或者logo來選擇你的風(fēng)格是很好的思路。我一般會搜一下我正在創(chuàng)作的圖標(biāo)的相關(guān)品牌來找一些能夠很好表現(xiàn)它的元素。同時(shí)你應(yīng)該好好留意一下那些形狀，顏色和字體等等。試著找一下他們的調(diào)性。所有的這些會告訴你你應(yīng)該用什么樣的風(fēng)格同時(shí)會對你的工作流和風(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á)正確的信息會變的很困難。
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)容都拿走了，那它看上去肯定會很無趣。
使用基本圖形
復(fù)雜的圖標(biāo)可以用基本圖形來組成，你要做的只是換個(gè)角度來看待問題。圖標(biāo)的使命是傳達(dá)信息，因此它需要很明晰。這就是為什么要使用基本圖形從而不會使圖標(biāo)比它所需要的更復(fù)雜。
我知道初學(xué)者可能會在使用基本圖形將一個(gè)復(fù)雜實(shí)物變成一個(gè)簡單圖形的過程中遇到許多困難。解決這個(gè)只有一種辦法，練習(xí)。
首先，聚焦在你選擇的物體的特點(diǎn)上。在設(shè)計(jì)中強(qiáng)調(diào)關(guān)鍵元素非常的重要。同時(shí)牢記少即是多，如果有什么元素你去掉它也不妨礙理解，那么去掉它就好。
第二個(gè)技巧是草圖。這樣做主要是因?yàn)闀芸臁?/span>
唯有不斷聯(lián)系才能幫助你理解這一切。
看一些例子。
總結(jié)一下
把你的圖標(biāo)簡約到它的本質(zhì)是非常關(guān)鍵的一步，但是有時(shí)候會弄巧成拙。永遠(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í)使用一致的間距和對齊也同樣重要的原因是：
保證了一套圖標(biāo)的一致性
你的圖標(biāo)看上去更加專業(yè)
平衡的圖標(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
在整套繪制的過程中你肯定會用到更多的尺寸，所以一定要確定你的最小間距的值不要變。
另外一件你要記住的事情是不要使用太多的間距尺寸，一般來說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)會被用在哪兒。在你開始之前有兩個(gè)事情要提前考慮的：
你的圖標(biāo)會被用在哪兒
誰是他們的目標(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)格的客戶就會直接來找你了。
而且有一個(gè)獨(dú)特和具有很強(qiáng)識別性的個(gè)人風(fēng)格能夠成為你吸引狂熱粉絲的基礎(chǔ)。
那么怎么才能找到你的個(gè)人風(fēng)格呢？
在我的概念中，最好的方式就是你每天都狂畫，但是不要去想那些什么個(gè)人風(fēng)格的問題。到最后你的個(gè)人風(fēng)格自然會一點(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.teruid.com )是一家專注而深入的界面設(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com