類似Iconfinder的圖標(biāo)和矢量圖形市場絮重，為網(wǎng)頁和印刷設(shè)計(jì)者提供了豐富的實(shí)惠可用的矢量圖標(biāo)資源轿秧。
我們會對每一套提交至Iconfinder的圖標(biāo)進(jìn)行審核評估钙姊，其中優(yōu)秀的圖標(biāo)有潛在的商業(yè)價(jià)值。在評審一套提交到網(wǎng)站的圖標(biāo)時(shí)须妻，需要對設(shè)計(jì)師負(fù)責(zé)仔蝌，對于客戶，也要確保所有出現(xiàn)在網(wǎng)站的優(yōu)質(zhì)圖標(biāo)都盡可能的是高質(zhì)量荒吏。為此敛惊，我們要不斷地意識到“還不夠好”和“優(yōu)質(zhì)”之間的區(qū)別。這個區(qū)別通常是很小的绰更，經(jīng)常需要一些極小的改變瞧挤，但是在設(shè)計(jì)和整套圖標(biāo)的價(jià)值上產(chǎn)生的影響是很大的。不像很多其他的市場儡湾，我們很少駁回那些沒有完全滿足我們質(zhì)量要求的圖標(biāo)特恬。反而，我們會給設(shè)計(jì)師分享具體使用的建議關(guān)于如何提高圖標(biāo)的質(zhì)量徐钠。
本文討論了圖標(biāo)設(shè)計(jì)準(zhǔn)則的6個步驟癌刽。這6個步驟遵循了圖標(biāo)設(shè)計(jì)的基礎(chǔ)，包括一致性尝丐、易識別和清晰妒穴。高效圖標(biāo)設(shè)計(jì)的原則已經(jīng)被圖標(biāo)設(shè)計(jì)師John Hicks在他的《The Icon Handbook》一書中詳細(xì)地討論過，同樣google的“material系統(tǒng)圖標(biāo)設(shè)計(jì)指南”也有講過摊崭。本文中被討論的6個步驟應(yīng)該被看做一種指南讼油，而不是一列教條式的規(guī)則。學(xué)會什么時(shí)候打破規(guī)則呢簸，什么時(shí)候遵循規(guī)則矮台，也是成為一個優(yōu)秀設(shè)計(jì)師的必不可少的一部分。
在本文中運(yùn)用的圖片案例根时，被討論的6個步驟將會運(yùn)用到改進(jìn)一只狗上（確切地說瘦赫，是一只柯基），這個圖標(biāo)是由iconfinder的用戶Kem Bardly最近提交的蛤迎。這個圖標(biāo)是有潛質(zhì)的确虱，但還不是夠優(yōu)美到可以稱為“高質(zhì)量”。我們給Kem一些簡單的小技巧替裆，只要做一些小小的改進(jìn)校辩。他的圖標(biāo)已經(jīng)準(zhǔn)備被作為優(yōu)質(zhì)圖標(biāo)通過了。下面展示的圖片顯示了Kem的圖標(biāo)改進(jìn)前后的版本辆童。在接下來的章節(jié)宜咒，我們將循序漸進(jìn)地解釋它是怎么從最初版變到最終版的。
左邊的圖片是原始圖標(biāo)把鉴。右邊的圖片是重新設(shè)計(jì)過的圖標(biāo)故黑，運(yùn)用了本文中提到的原則。
注意，文章中討論的原則適應(yīng)到網(wǎng)頁圖標(biāo)時(shí)场晶，他們通常也適用于印刷圖標(biāo)混埠。典型的300 dpi的印刷材料，使得像素化呈現(xiàn)本質(zhì)上是毫無意義的诗轻。如果你是一個平面印刷設(shè)計(jì)師钳宪，文中提到的所有原則都是適應(yīng)的，但是你可以忽略像素化呈現(xiàn)的作品概耻。
有效圖標(biāo)設(shè)計(jì)的三個特性
對于組成圖標(biāo)的3個屬性：形式使套、統(tǒng)一審美和識別性，好的圖標(biāo)顯示了一套系統(tǒng)的經(jīng)過深思熟慮的方法鞠柄。當(dāng)新設(shè)計(jì)一套圖標(biāo)侦高，把這些屬性都考慮在迭代的途徑中，從整體（形式）出發(fā)厌杜，進(jìn)入到細(xì)節(jié)（識別性）奉呛。即使你只設(shè)計(jì)單個圖標(biāo)，這3個屬性也仍然能被應(yīng)用夯尽，能從單個圖標(biāo)中推測出瞧壮。
毋庸置疑，設(shè)計(jì)一個有效的圖標(biāo)不止這3個屬性匙握，但有這3個精選屬性是設(shè)計(jì)一個好的圖標(biāo)的開端咆槽。為了相對簡潔性，我們專注于考慮這3個主要的屬性圈纺。
形式
形式是一個圖標(biāo)根本的結(jié)構(gòu)秦忿，或者說是它的組成部分。如果你忽視圖標(biāo)的細(xì)節(jié)蛾娶，在主要圖形周圍畫了一條線灯谣，那他們是形成了一個方形、一個圓形蛔琅、一個垂直或水平的矩形胎许，一個三角形或者更多有組織的圖形？最主要的幾何形狀——圓形罗售、方形和三角形——能為圖標(biāo)設(shè)計(jì)打下一個穩(wěn)固的視覺基礎(chǔ)辜窑。在Kem Bardly設(shè)計(jì)的柯基圖標(biāo)示例中，狗的頭部是由兩個三角形和兩個橢圓形組成的莽囤。一個人開始會畫一個最大最簡單的形狀谬擦，然后才定義越來越多的細(xì)節(jié)。另一個人從最簡單的形狀開始設(shè)計(jì)圖標(biāo)朽缎，然后添加更多的細(xì)節(jié)——但是只有盡可能多的需要溝通概念的細(xì)節(jié)被表達(dá)出來，它就會成為一個物體，一個想法或行動话肖。
這張圖片的關(guān)鍵線條展示了設(shè)計(jì)構(gòu)型的基本形狀
審美的一致性
單個圖標(biāo)的構(gòu)成元素能運(yùn)用到整套圖標(biāo)中北秽，就是我們說的視覺的一致性。這些元素比如是圓形或方形的角最筒，角度的大泻孛ァ（2像素，4像素…）床蜘，被限制和保持一致的線條粗細(xì)（2像素辙培，4像素…），圖標(biāo)風(fēng)格（扁平的邢锯，線條的扬蕊，被填充的線條或符號），配色等等丹擎。審美一致性是設(shè)計(jì)元素的集合尾抑，或是設(shè)計(jì)中你為其成為一個整體所貫穿使用的手法。在下面的例子中蒂培，會發(fā)現(xiàn)Kem圖標(biāo)中的這3只狗都有一些共同元素再愈，比如2像素的圓角，2像素寬的眼睛和心形嘴巴护戳。
這3只狗圖標(biāo)有共同的設(shè)計(jì)元素翎冲，形成了視覺的一致性
識別性
識別性是產(chǎn)品圖標(biāo)的基本，它造就了圖標(biāo)的唯一性媳荒。一個圖標(biāo)是否從根本上起了作用抗悍，依賴于觀眾能多么容易地去理解這個圖形、它的含義及它描述的動作肺樟。一致性包括展示觀眾普遍會和你的想法聯(lián)系在一起的特性檐春，但是它也包括哪些獨(dú)特的，出乎意料的元素么伯，像把狗狗的鼻子設(shè)計(jì)為心形疟暖。記住識別性不僅僅是指對形狀、想法或它表達(dá)的動作的理解田柔，也指識別出你的圖標(biāo)俐巴。從這方面來說，美學(xué)的一致性和識別性能經(jīng)常重合在一起的硬爆。下面的圖標(biāo)欣舵，我們能識別出一只是柯基犬，一只是西伯利亞的愛斯基摩犬缀磕。因?yàn)樗麄儶?dú)特的顏色缘圈、頭部形狀和耳朵劣光，但是仍然會認(rèn)為他們是同一組圖標(biāo)，因?yàn)樗麄冇泄餐脑O(shè)計(jì)元素糟把。
每一只狗的特性使得他們能各自被識別绢涡，但是它們共同的設(shè)計(jì)元素又可以讓人識別出是同一套圖標(biāo)
迄今，我們已經(jīng)看了有效圖標(biāo)設(shè)計(jì)的3個主要屬性遣疯。在接下來的部分雄可，我們將深入看6個步驟是如何妥善處理這3個領(lǐng)域的問題。
六個步驟
1缠犀、從柵格化設(shè)計(jì)開始
不同網(wǎng)格大小的好處將在一個單獨(dú)的文章中得到最好的處理数苫。從我們的目的出發(fā)，我們做出了一個32*32的網(wǎng)格辨液。我們的網(wǎng)格也包括一些基本的指導(dǎo)原則虐急，來幫助我們?yōu)槊總€圖標(biāo)設(shè)計(jì)創(chuàng)造最基本的形式。
這里室梅，我們能看到一個32*32的像素化網(wǎng)格戏仓，有一個2像素的邊框（或者說是不可達(dá)區(qū)域）作為留白。
最外面的2像素我們叫做“禁區(qū)”亡鼠。避免把圖標(biāo)的任何部分放在這個區(qū)域赏殃，除非是絕對需要的。這個禁區(qū)存在的原因是為圖標(biāo)留出一些透氣的空間间涵。
圖標(biāo)形式的一個組成部分是大體的形狀和方向仁热。如果你在一個圖標(biāo)的外部邊緣畫了一條線——這個邊界框，如果你能夠——這個形狀將會形成一個正方形勾哩，圓形抗蠢，三角形，垂直居中的矩形思劳，水平居中的矩形或平行四邊形迅矛。
圓形圖標(biāo)處于網(wǎng)格的正中央，將經(jīng)常觸碰到內(nèi)容區(qū)域四周的邊沿潜叛，而不觸及到禁區(qū)秽褒。注意，打破禁區(qū)這個規(guī)則的一個普遍原因是威兜，有一些重點(diǎn)或小元素需要超過圓形區(qū)域销斟。如上所述，為了保持設(shè)計(jì)的完整性椒舵。
方形圖標(biāo)也是在網(wǎng)格的中央蚂踊，但不這樣做，在大多數(shù)情況下笔宿，會擴(kuò)展到內(nèi)容區(qū)的最外層邊緣犁钟。為了保持圓形和三角形圖標(biāo)的視覺面積的一致性棱诱，大多數(shù)矩形和方形圖標(biāo)將會在中間對齊到關(guān)鍵線（以下圖片的黃色區(qū)域）。什么時(shí)候?qū)R到每一條關(guān)鍵線由圖標(biāo)本身的視覺面積決定特纤。什么時(shí)候使用哪種尺寸只需要多加練習(xí)军俊〗募樱看下面的方形布局圖片。上面說到的3個同軸的方形就是以下的淺藍(lán)色、橙色和淺綠色區(qū)域捉貌。
在32像素的正方形里霹菊，你會發(fā)現(xiàn)20*28像素垂直的和水平的矩形。我們認(rèn)為這些矩形提前，要么是垂直的吗货，要么是水平的。嘗試讓任何圖標(biāo)的大小做適應(yīng)狈网，去匹配這些20*28像素大小的矩形宙搬。
在對角線方向的圖標(biāo)是對其到圓形區(qū)域的邊緣，如下圖所示拓哺。注意勇垛，這個鋸子的最外面區(qū)域是大約和圓形的邊緣對齊。這一塊區(qū)域你并不必很準(zhǔn)確地知道在哪士鸥，大概相近就可以了
記住你沒有必要每次都遵循網(wǎng)格和指南闲孤。網(wǎng)格的存在是為了幫助你讓圖標(biāo)保持一致性，但是如果你不得不在做一個好的圖標(biāo)和遵循規(guī)則中選擇烤礁，那就打破這個規(guī)則——有節(jié)制的遵循讼积。
Hemmo de Jonge因他的昵稱 Dutch Icon而出名，如他所說：
“一個獨(dú)立的圖標(biāo)的本質(zhì)重要性超越了保持整體性脚仔∏谥冢”
2、從簡單的集合圖形開始
用簡單的圓形鲤脏、三角形和矩形畫圖標(biāo)的主體们颜，從這個開始做起。本質(zhì)上凑兰，即使一個圖標(biāo)最終大多數(shù)將成為有組織的掌桩，剛開始時(shí)在 Adobe Illustrator中設(shè)計(jì)圖形。在設(shè)計(jì)圖標(biāo)時(shí)姑食，特別是為屏幕設(shè)計(jì)更小的圖標(biāo)時(shí)波岛，手繪的邊緣那些微小的變化將會使一個圖標(biāo)看起來不那么精致。從基本的集合圖形開始將會使邊緣更加精確（特別是沿著曲線）音半，也能讓你快速地調(diào)整元素之間的相對大小了则拷，當(dāng)然確保你是遵循網(wǎng)格的贡蓖。
這是一個基本的幾何圖形，2個三角形煌茬，2個橢圓斥铺，組成了這個柯基圖標(biāo)。
3坛善、按照這樣的順序設(shè)計(jì)：邊晾蜘、線、角落眠屎、曲線和角度
盡可能不要讓設(shè)計(jì)看起來過度地呆板和無趣剔交，角落、曲線和角度都應(yīng)該有數(shù)學(xué)化的精確改衩。換句話說岖常，按照這個順序，當(dāng)涉及到細(xì)節(jié)時(shí)葫督，不要嘗試盯著看或徒手畫圖標(biāo)竭鞍。元素的不統(tǒng)一會降低圖標(biāo)的質(zhì)量。
角度
大多數(shù)情況下橄镜，堅(jiān)持用45度角偎快，或者它的倍數(shù)。在45度角上反鋸齒是均勻地走勢蛉鹿。（活躍的像素一直是對齊的）滨砍，所以結(jié)果是顯而易見的，這個角完美的對角線是很容易被識別的妖异，這也是受人眼喜歡的惋戏。這個可識別的模式建立了一套圖標(biāo)的一致性，讓單個圖標(biāo)成為了整體他膳。如果你的設(shè)計(jì)規(guī)定你必須打破規(guī)則响逢，嘗試用兩等分（22.5度，11.25度等等）或者是15度的倍數(shù)棕孙。使用情景是不同的舔亭，所以結(jié)合具體情況而定。用45度角等分的好處是蟀俊，反鋸齒的走勢仍然是可接受的钦铺。
常規(guī)反鋸齒的 45 度角的特寫鏡頭
曲線
會降低圖標(biāo)質(zhì)量，也意味著專業(yè)和業(yè)余之間的區(qū)別最明顯的一個區(qū)域就是不那么完美的圖標(biāo)肢预。而人的眼睛能精確地識別微小的變化矛洞，手眼的協(xié)調(diào)不能總達(dá)到很高的精確度。依賴于圖形工具和順序盡可能的設(shè)計(jì)曲線烫映，使用adobe illustrator（或者你的矢量軟件）控制修改鍵（shift鍵）沼本，或者噩峦，更甚一籌地是，用Astute Graphics的VectorScribe和 InkScribe更精確地控制貝塞爾曲線抽兆。
因?yàn)槲覀兛吹搅松厦嫣徇^的修改前的圖片识补，手繪的線會畫出不規(guī)則的曲線，這會降低圖標(biāo)本身的質(zhì)量辫红。
我們用illustrator的貝塞爾曲線工具畫出了這些非常精確的曲線凭涂，而不是手繪
角落
通常圓角（或者說半徑）值為2像素，一個32*32像素的圖標(biāo)厉熟，2像素的半徑已經(jīng)足夠被看出是圓形的导盅，但不太過于讓角落過于圓滑以改變設(shè)計(jì)中的個性（比如“泡泡”形象），你選擇的半徑值是基于你想給圖標(biāo)怎樣的個性揍瑟。是否使用圓角是一個審美上的決策，也要考慮到一套圖標(biāo)的整體美感乍炉。
精確的圓角
已經(jīng)開始設(shè)計(jì)幾何圖形了绢片，我們現(xiàn)在可以增加2像素的外圍輪廓，來演示圖形工具是怎么改善設(shè)計(jì)的岛琼，以及細(xì)節(jié)上的一致性底循，比如圓角。
這個被大大提升的版本展示了新設(shè)計(jì)的要點(diǎn)：統(tǒng)一的圓角槐瑞，光滑的曲線熙涤，耳朵邊基本的線條粗細(xì)。
像素化的展示
在設(shè)計(jì)小尺寸的圖標(biāo)時(shí)困檩，像素級的對齊是很重要的祠挫。一個小尺寸圖標(biāo)邊緣的去鋸齒會讓這個圖標(biāo)失真。不和像素網(wǎng)格對齊的線條之間的空隙將會變得反鋸齒和模糊悼沿。讓圖標(biāo)和像素化的網(wǎng)格對齊會使得邊緣在直線上很清晰等舔，在精確的角度和曲線上也很清晰。
如上述糟趾，45度角是最好的慌植，因?yàn)楸挥脕矶x角的像素是成對的，階級式的义郑，段對端是完全對角的蝶柿。對角落和曲線也是同樣的：它們越精確，反鋸齒就越清晰非驮。但是注意交汤，在更大規(guī)模和更高分辨率的屏幕上，比如視網(wǎng)膜屏幕院尔，像素化呈現(xiàn)并不太需要蜻展，至少對于反鋸齒而言喉誊。
線的粗細(xì)
談到線的粗細(xì)，2像素就很理想了纵顾，在必要情況下可以使用3像素伍茄。目標(biāo)是提供可視化的層級和多樣性。不用介入太多樣式施逾，那樣會破壞一套圖標(biāo)的一致性敷矫。超過3個或者一套能失去它的凝聚力。2和4像素粗的線條的好處是他們是2的倍數(shù)汉额，因此很容易向上和向下擴(kuò)展曹仗。大多數(shù)情況下，避免使用很細(xì)的線蠕搜，特別是在符號和扁平化圖標(biāo)上怎茫。除非你刻意設(shè)計(jì)一種“線性風(fēng)格”的圖標(biāo)，比起線條妓灌，更依賴于光陰去定義形狀轨蛤。
4、跨圖標(biāo)設(shè)計(jì)使用統(tǒng)一的設(shè)計(jì)元素和符號
Hemmo de Jonge of Dutch在Icon Salon 2015上有一個精彩的演講虫埂，他大篇幅地講到了這方面的圖標(biāo)設(shè)計(jì)祥山。在他為荷蘭政府做的2年圖標(biāo)系統(tǒng)項(xiàng)目中，Hemmo和他的設(shè)計(jì)同伴注冊了一個等級給每個圖標(biāo)掉伏。并不是每個圖標(biāo)都有等級缝呕，但大多數(shù)是這樣的。這種符號斧散，適當(dāng)并一貫地使用在一套圖標(biāo)中供常，真的能把圖標(biāo)集合在一起成為整體。
在我們的狗狗圖標(biāo)例子里颅湘，我們使用了一個通用的風(fēng)格元素：心形鼻子话侧。使用心形作為鼻子這個視覺特性不僅僅把這些圖標(biāo)組合在一起，而且也增添了一種異想天開的元素闯参，為我們四條腿的朋友溝通情感瞻鹏。
大多數(shù)情況下，即使一個圖標(biāo)的主要部分發(fā)生了改變——比如說鹿寨，風(fēng)格——構(gòu)建審美統(tǒng)一的元素仍然可以系在一起新博，像上面所看到的那樣。我們已經(jīng)重構(gòu)了相同的3只狗狗圖標(biāo)的符號風(fēng)格脚草，而不僅僅是平面風(fēng)格赫悄，它們?nèi)匀皇潜３謱徝酪恢碌摹?/p>
5、謹(jǐn)慎使用細(xì)節(jié)和裝飾
圖標(biāo)應(yīng)該能盡快地表達(dá)對象埂淮、想法或行動姑隅。太多的小細(xì)節(jié)將會變得復(fù)雜，這會讓圖標(biāo)缺乏識別性倔撞，特別是小圖標(biāo)讲仰。一個單獨(dú)的圖標(biāo)或一整套圖標(biāo)的細(xì)節(jié)處理水平對視覺的一致性和識別性都是很重要的一個方面。確定一個或一套圖標(biāo)的細(xì)節(jié)水平是否正確的一個好方法是痪蝇，以最少的細(xì)節(jié)來表達(dá)清楚圖標(biāo)的意義鄙陡。
在上面的這個版本中，已經(jīng)離我們最終要完成改善的稿子很靠近了躏啰。眼睛周圍的黑色輪廓已經(jīng)變成了耳朵周圍毛皮裹著的棕色區(qū)域趁矾。臉上黑色的線已經(jīng)不見了，但是柯基臉上的白色標(biāo)記上面仍然有2像素的空間给僵。注意毫捣，我們?nèi)匀槐Ａ袅艘恍┰瓉戆姹镜脑兀热绫馄交谋亲酉爰省Ｎ覀儠谙乱徊街姓{(diào)整它培漏。
6、加入獨(dú)特元素
有天賦的設(shè)計(jì)師的數(shù)量似乎每天都在增長胡本，他們做出了高質(zhì)量圖標(biāo)，其中很多是免費(fèi)的畸悬。不幸地是侧甫，很多的設(shè)計(jì)師過度地依賴于趨勢或者大多數(shù)流行設(shè)計(jì)師的風(fēng)格。作為創(chuàng)意專業(yè)人士蹋宦，我們應(yīng)該看看圖標(biāo)以外的其他領(lǐng)域披粟，比如建筑、字體設(shè)計(jì)冷冗、工業(yè)設(shè)計(jì)守屉、心理學(xué)、自然及任何我們能找到靈感的其他領(lǐng)域蒿辙。因?yàn)楹芏鄨D標(biāo)看起來很相似拇泛，，所以讓你的設(shè)計(jì)變得獨(dú)特尤為重要思灌。
在最終設(shè)計(jì)的形象中俺叭，我們有一個獨(dú)特的可觸摸的心形鼻子，為這個設(shè)計(jì)添加了一些新奇和無拘無束的感覺泰偿。
這些簡單的步驟應(yīng)該被看到是一個起點(diǎn)熄守，而不是最終的指南。設(shè)計(jì)圖標(biāo)沒有簡單的方法。本文中裕照，我們已經(jīng)概述了保持基本一致的設(shè)計(jì)方法攒发。但是其他設(shè)計(jì)師當(dāng)然也有他們自己的觀點(diǎn)和技巧。成為一個更優(yōu)秀的設(shè)計(jì)師最好的方法看盡可能多的視覺參考晋南，讀大量的資料惠猿，經(jīng)常畫草畫（無論你去哪帶一個草圖本），不斷地練習(xí)搬俊，練習(xí)紊扬，再練習(xí)。
結(jié)論
以上便是如何構(gòu)建高質(zhì)量圖標(biāo)的基本原理，同時(shí)也是通過練習(xí)任何人都能掌握的技巧：從一般（形式）開始玩祟，然后到特定的細(xì)節(jié)（可識別）腹缩。讓你的圖標(biāo)保持內(nèi)部一致性，同樣的空扎，在整套圖標(biāo)中注重整體的審美統(tǒng)一藏鹊。當(dāng)你掌握了這些基本技巧，便能更專注于以獨(dú)特和創(chuàng)意讓圖標(biāo)脫穎而出转锈。
