Icon和矢量圖市場(chǎng)（如iconfinder，我工作的地方）提供了成千上萬(wàn)套的高質(zhì)量收費(fèi)系列和幾百套免費(fèi)系列Icon明也，使網(wǎng)頁(yè)和視覺(jué)設(shè)計(jì)師更容易得到設(shè)計(jì)精良的矢量圖標(biāo)。
在iconfinder，我們會(huì)對(duì)每套提交的圖標(biāo)審查評(píng)估，來(lái)判斷是否對(duì)用戶(hù)有潛在吸引力纯趋，或者是否有作為收費(fèi)icon的潛在商業(yè)價(jià)值。當(dāng)我們審查這些提交的icon時(shí)冷离，我們對(duì)設(shè)計(jì)師和對(duì)客戶(hù)有責(zé)任確保所有收費(fèi)圖標(biāo)有最高的質(zhì)量吵冒。為了達(dá)到這個(gè)目的，我們時(shí)刻謹(jǐn)記“不夠好”和“收費(fèi)質(zhì)量”之間的區(qū)別西剥。區(qū)別通常都很小痹栖，一般經(jīng)過(guò)微調(diào)就可以，但這種微調(diào)卻能對(duì)設(shè)計(jì)和其價(jià)值產(chǎn)生很大影響蔫耽。與其他市場(chǎng)不同结耀，我們不會(huì)直接拒絕那些不滿(mǎn)足我們質(zhì)量要求的icon系列留夜。相反匙铡，我們會(huì)給設(shè)計(jì)師分享我們專(zhuān)業(yè)图甜、可執(zhí)行的改進(jìn)圖標(biāo)的建議。
這篇文章將分六個(gè)步驟來(lái)討論icon設(shè)計(jì)鳖眼，包含了統(tǒng)一性黑毅、可讀性、清晰等icon設(shè)計(jì)的最基本原則钦讳。Icon設(shè)計(jì)師John Hicks曾在他的書(shū)《圖標(biāo)手冊(cè)》中詳細(xì)討論了icon設(shè)計(jì)的原則矿瘦，Google也曾發(fā)表過(guò)material design中系列icon的指導(dǎo)原則。文中的六個(gè)步驟可以作為icon設(shè)計(jì)的指導(dǎo)步驟愿卒，但并不是唯一的準(zhǔn)則缚去。成為偉大設(shè)計(jì)師的其中一個(gè)條件就是要了解什么時(shí)候應(yīng)該打破原則，什么時(shí)候應(yīng)該遵循琼开，我們接下來(lái)也會(huì)證明這一點(diǎn)易结。
文章中，我們將把之前提到的六個(gè)步驟應(yīng)用于一只狗（確切的說(shuō)是威爾士矮腳狗）的icon再設(shè)計(jì)中柜候，這個(gè)icon是iconfinder的用戶(hù)Kem Bardly最近提交的搞动。我們認(rèn)為這個(gè)icon作為“收費(fèi)級(jí)質(zhì)量”來(lái)說(shuō)有些潛力，但并不夠精致渣刷。我們向Kem提了一些簡(jiǎn)單的可遵循的意見(jiàn)鹦肿，通過(guò)一些加工，他的icon已經(jīng)達(dá)到收費(fèi)級(jí)標(biāo)準(zhǔn)了辅柴。下面的圖是Kem加工前后的兩個(gè)版本的icon箩溃。接下來(lái)，我們會(huì)解釋如何依照有效的方法從左圖變成右圖碌嘀。
需要說(shuō)明的是筏餐，雖然我們討論的原則是針對(duì)于網(wǎng)頁(yè)中的icon开泽，但實(shí)際上也通用于平面印刷行業(yè)。不過(guò)魁瞪，印刷行業(yè)材質(zhì)中對(duì)精度的要求很高穆律，如果你是印刷類(lèi)設(shè)計(jì)師，文中除了像素精度的問(wèn)題导俘，其他所有原則都是適用的峦耘。
高質(zhì)量icon設(shè)計(jì)的3個(gè)屬性
形狀、審美統(tǒng)一和可識(shí)別是組成任何icon設(shè)計(jì)的三個(gè)屬性旅薄，而設(shè)計(jì)精良的icon會(huì)以有條不紊辅髓、深思熟慮的方式呈現(xiàn)出來(lái)泣崩。當(dāng)設(shè)計(jì)一套icon的時(shí)候，要以漸進(jìn)的方式不斷思考這三個(gè)屬性洛口。如開(kāi)始的時(shí)候要有通用性（形狀）矫付，而在過(guò)程中要著重個(gè)性（可識(shí)別性）。即使你設(shè)計(jì)的是單一icon第焰，這三個(gè)屬性依然可應(yīng)用买优。
不容置疑，好的icon當(dāng)然并不止這三個(gè)屬性挺举，為了相對(duì)簡(jiǎn)便起見(jiàn)杀赢，我們把重點(diǎn)放在這三個(gè)屬性上。
形狀
形狀是一個(gè)icon潛在的結(jié)構(gòu)湘纵，或者是制作的基礎(chǔ)脂崔。如果你忽略一個(gè)icon的細(xì)節(jié)，圍繞其主要形狀畫(huà)線(xiàn)梧喷，這些icon是不是都由基本的方形砌左、圓形、水平或垂直的三角形伤柄、長(zhǎng)方形或更多其他基本形狀組成绊困？這些主要的幾何圖形（圓形、方形适刀、三角形等）組成了一個(gè)視覺(jué)上穩(wěn)定的icon的基礎(chǔ)秤朗。在Kem Bardly設(shè)計(jì)的小狗案例中，小狗的頭由兩個(gè)三角形笔喉、兩個(gè)橢圓形組成取视。正如一個(gè)人畫(huà)畫(huà)會(huì)先繪制最基本、最簡(jiǎn)單的形狀常挚，然后再以更多的細(xì)節(jié)去優(yōu)化作谭，設(shè)計(jì)師繪制icon也要先從最基本的形狀開(kāi)始，之后增加更多細(xì)節(jié)奄毡，也只有細(xì)節(jié)足夠豐富之后折欠，才能傳達(dá)其所代表的物體、想法或行為的概念吼过。
美學(xué)統(tǒng)一
單一icon或者一套icon中的通用的元素，我們稱(chēng)之為美學(xué)統(tǒng)一盗忱。這些元素包括圓角酱床、方角，某一特定尺寸的邊角（2像素趟佃、4像素等等）扇谣，統(tǒng)一的線(xiàn)寬（2像素昧捷、4像素等等），風(fēng)格（扁平化罐寨、線(xiàn)條型靡挥、填充線(xiàn)條、字型）衩茸，色板芹血，及更多其他內(nèi)容贮泞。一套icon中的美學(xué)統(tǒng)一是你重復(fù)應(yīng)用于整套的設(shè)計(jì)元素和內(nèi)容集合楞慈，通過(guò)這些內(nèi)容將icon從視覺(jué)上聯(lián)系成一個(gè)整體。在下面的案例中啃擦，Kem的三個(gè)小狗圖標(biāo)囊蓝，每個(gè)都使用了相同的設(shè)計(jì)元素，如2像素的圓角令蛉，圍繞整個(gè)小狗面部的2像素寬的線(xiàn)條和心形的鼻子聚霜。
可識(shí)別性
可識(shí)別性是一個(gè)icon作為產(chǎn)品的本質(zhì)蝎宇，或者說(shuō)是使其成為一個(gè)獨(dú)特icon的標(biāo)志。一個(gè)icon是否可用祷安，完全依賴(lài)于閱讀者是否能容易的理解其所表達(dá)的物體姥芥、想法或行為』惚蓿可識(shí)別性包括閱讀者所理解的icon本身概念的特性凉唐，還包括那些獨(dú)特或預(yù)期之外的元素，如柯基狗的心形鼻子霍骄。要記住台囱，可識(shí)別性不只是icon所表達(dá)的物體、想法读整、行為簿训，也指你的icon系列區(qū)別于他人的獨(dú)特之處。從這方面來(lái)說(shuō)米间，美學(xué)統(tǒng)一和可識(shí)別性强品，通常會(huì)重疊。在下圖中车伞，我們可以認(rèn)出分別為柯基和哈士奇择懂，因?yàn)樗麄儾煌念伾㈩^部形狀另玖、耳朵困曙，但我們也會(huì)認(rèn)為這兩個(gè)icon屬于一個(gè)系列表伦，因?yàn)樗鼈冿L(fēng)格和元素是統(tǒng)一的。
我們已經(jīng)了解了高質(zhì)量icon設(shè)計(jì)的3個(gè)主要屬性。接下來(lái)要糊，我們會(huì)深入探討如何分六步把這3個(gè)屬性應(yīng)用到設(shè)計(jì)中纲熏。
六個(gè)步驟
記住，從柵格開(kāi)始
很多文章出現(xiàn)過(guò)不同的柵格尺寸锄俄。在這里局劲，我們將會(huì)使用32x32像素的柵格。我們將利用柵格幫助我們創(chuàng)建每個(gè)icon的基本形狀奶赠。
柵格中外面的2個(gè)像素我們稱(chēng)之為“禁用區(qū)”，除非必要毅戈，不要將icon的任何部分放到這個(gè)空間苹丸。“禁用區(qū)”的目的是圍繞icon做一個(gè)可呼吸的空間苇经。
Icon的形態(tài)大部分是基本形狀和方向赘理。如果圍繞icon外面的邊框畫(huà)一條線(xiàn)，這個(gè)形狀基本會(huì)是方形扇单、圓形商模、三角形、水平或垂直長(zhǎng)方形或者對(duì)角矩形令花。
圓形icon會(huì)在柵格中心阻桅，并且不會(huì)超出內(nèi)容區(qū)域的最大邊，也不會(huì)到“禁用區(qū)”兼都。要說(shuō)明的是嫂沉，通常會(huì)打破“禁用區(qū)”原則的一個(gè)原因是，圓形icon中一些符號(hào)或元素需要超出內(nèi)容區(qū)域來(lái)保持設(shè)計(jì)的整體感扮碧，如下面的案例趟章。
方形圖標(biāo)也在柵格的中心，但多數(shù)情況下慎王，不要超出內(nèi)容區(qū)域的最大邊蚓土。為了與圓形icon和三角形icon保持視覺(jué)中心的平衡，很多長(zhǎng)方形和方形icon會(huì)將關(guān)鍵線(xiàn)居中對(duì)齊（下圖中橙色區(qū)域）赖淤，什么時(shí)候?qū)R哪條基準(zhǔn)線(xiàn)由icon本身的視覺(jué)中心決定蜀漆，而要決定什么時(shí)候使用什么尺寸就需要多練習(xí)去找感覺(jué)了。下圖的方形布局圖片中咱旱，剛提到的同心方形分別以藍(lán)色确丢、橙色和淺綠色顯示绷耍。
在32像素方形內(nèi)鲜侥，20x28像素的垂直和水平長(zhǎng)方形也很常用褂始。我們讓水平或垂直方向的icon以遵循下面藍(lán)色區(qū)域的長(zhǎng)方形，使每個(gè)icon的外部匹配20x28像素的長(zhǎng)方形尺寸描函。
對(duì)角線(xiàn)方向圖標(biāo)可以對(duì)齊到圓形內(nèi)容區(qū)域，可以參考下圖舀寓。要注意鋸子icon的最外面知識(shí)近似對(duì)齊到圓形區(qū)域內(nèi)胆数。這種對(duì)齊不需要太精確，只是近似就好基公。
記住幅慌，你不 需要時(shí)時(shí)刻刻都嚴(yán)格遵守柵格和規(guī)則宋欺。柵格是幫助你創(chuàng)建統(tǒng)一的icon轰豆，但是如果需要在創(chuàng)建更好的icon和嚴(yán)格遵守規(guī)則之間選擇的話(huà)，請(qǐng)打破原則齿诞，只是做的時(shí)候謹(jǐn)慎些酸休。正如Hemmo De Jonge，不過(guò)他的綽號(hào)Dutch Icon更加知名祷杈，他曾說(shuō)過(guò)：
單個(gè)icon的本質(zhì)要?jiǎng)龠^(guò)一套圖標(biāo)的組合斑司。
從基本幾何形開(kāi)始
從最基本的主要形狀，如圓形但汞、長(zhǎng)方形宿刮、三角形開(kāi)始設(shè)計(jì)。盡管最后這個(gè)icon可能會(huì)成為自然中有機(jī)的形態(tài)私蕾，也要在ai中從形狀工具開(kāi)始制作僵缺。當(dāng)制作icon時(shí)，尤其是制作屏幕中小尺寸icon的時(shí)候踩叭，只要邊角有輕微的手工痕跡就會(huì)使icon看起來(lái)不夠精致磕潮。從基本幾何圖形開(kāi)始，尤其是沿著邊線(xiàn)制作容贝，會(huì)使icon更加精確自脯，會(huì)讓你能快速調(diào)整icon元素的相對(duì)比例，也確保你能遵循柵格和形狀斤富。
遵循數(shù)字：邊線(xiàn)满力、線(xiàn)焕参、邊角屋谭、曲線(xiàn)和角度
盡量不要讓設(shè)計(jì)看起來(lái)過(guò)于機(jī)械和無(wú)聊，邊角龟糕、曲線(xiàn)和角度應(yīng)該達(dá)到數(shù)字化的精確桐磁。換言之，當(dāng)制作這些細(xì)節(jié)的時(shí)候讲岁，一定要遵循數(shù)字我擂，不要只用眼看或者手工制作，這些元素的不連貫會(huì)減少整個(gè)icon的精確度缓艳。
角度
在多數(shù)設(shè)計(jì)中校摩，堅(jiān)持用45度角，或者是其倍數(shù)阶淘。45度角的抗鋸齒是平穩(wěn)階梯狀的（像素從頭至尾與柵格對(duì)齊）衙吩，所以邊角是尖銳的。而且溪窒，45度的對(duì)角線(xiàn)是很容易識(shí)別的圖案坤塞，人類(lèi)的眼睛很喜歡。這種可識(shí)別的圖案可以建立一套icon和單個(gè)icon內(nèi)的統(tǒng)一性澈蚌。如果你的設(shè)計(jì)使你必須打破規(guī)則摹芙，盡量一半一半的減少（22.5度，11.25度等等）或者使用15的倍數(shù)宛瞄。每種情況都有所不同浮禾，所以還是要看情況。使用45度一半的度數(shù)好處是抗鋸齒的階梯會(huì)比較平穩(wěn)份汗。
曲線(xiàn)
降低icon品質(zhì)盈电、區(qū)分專(zhuān)家和業(yè)余icon的一個(gè)最顯著的地方就是不精確的曲線(xiàn)。人類(lèi)的眼睛能精確的察覺(jué)到最細(xì)微的變化杯活，手工和眼睛的合作并不能制作高精確度的icon匆帚。盡量依靠圖形工具和數(shù)字來(lái)創(chuàng)建曲線(xiàn)，而不是用手去畫(huà)轩猩。當(dāng)你確實(shí)需要手繪曲線(xiàn)的時(shí)候卷扮，使用ai（或者其他矢量軟件）中的約束組合鍵（shift按鈕），或者均践，更好的是使用asture graphic提供的ai插件vectorscribe和inkscribe來(lái)制作更精確的貝塞爾曲線(xiàn)晤锹。
我們可以看上圖，手繪創(chuàng)建的不規(guī)則線(xiàn)條降低了整體設(shè)計(jì)的質(zhì)量彤委。
圓角
通常使用的圓角尺寸為2像素鞭铆。在32x32像素的icon中，2像素的圓角看起來(lái)足夠清晰，但又不會(huì)大到足以改變整個(gè)設(shè)計(jì)的特性车遂。圓角的值取決于你想給你的設(shè)計(jì)什么性格封断。無(wú)論是否使用圓角，都要考慮到整體的美學(xué)風(fēng)格舶担。
從幾何形開(kāi)始設(shè)計(jì)坡疼，再加上2像素的邊線(xiàn)，現(xiàn)在我們可以證明衣陶，幾何形狀柄瑰、統(tǒng)一性的細(xì)節(jié)如圓角是如何改變這個(gè)設(shè)計(jì)的。
這個(gè)設(shè)計(jì)經(jīng)過(guò)了統(tǒng)一圓角剪况、平滑曲線(xiàn)教沾、耳朵邊線(xiàn)的調(diào)整等大改，已經(jīng)能顯示新設(shè)計(jì)的主旨译断。
像素級(jí)精確
當(dāng)創(chuàng)建小尺寸icon時(shí)授翻，像素級(jí)對(duì)齊是非常重要的。小尺寸icon的抗鋸齒渲染邊緣會(huì)看起來(lái)模糊孙咪。行間距不對(duì)其柵格也會(huì)消除鋸齒堪唐，看起來(lái)不清楚。將icon對(duì)齊到柵格该贾，直線(xiàn)的邊緣會(huì)很清晰羔杨，而一定角度的線(xiàn)或曲線(xiàn)也會(huì)更清晰。
剛剛提過(guò)杨蛋，45度角是除直線(xiàn)外最好的角度，因?yàn)闀?huì)形成清晰干脆階梯狀的斜邊理澎。邊角或曲線(xiàn)也是一樣的逞力，越是數(shù)字化的精確，抗鋸齒效果會(huì)更尖銳糠爬。但是注意寇荧，大尺寸icon在高分辨率屏幕中（如“視網(wǎng)膜”顯示屏）是不受影響的，至少是不受抗鋸齒影響执隧。
線(xiàn)寬
對(duì)于線(xiàn)寬來(lái)說(shuō)揩抡，2像素是最理想的，但有時(shí)候也會(huì)用3個(gè)像素镀琉。目標(biāo)是不使用更多變形破壞整體統(tǒng)一性來(lái)建立視覺(jué)層次和多樣性峦嗤。大于三個(gè)像素的線(xiàn)寬會(huì)破壞整體性。2像素和4像素線(xiàn)寬的好處是屋摔，他們都是2的倍數(shù)烁设，因此很容易更平衡的放大或縮小。在更多案例中钓试，避免使用很細(xì)的線(xiàn)條装黑，尤其是在字形和扁平化icon中副瀑。除非你特意設(shè)計(jì)一個(gè)“線(xiàn)型”圖標(biāo)，依靠光和影恋谭，而不是線(xiàn)來(lái)定義形狀糠睡。
整套icon使用統(tǒng)一的設(shè)計(jì)元素和符號(hào)
荷蘭圖標(biāo)設(shè)計(jì)師hemmo je jonge在2015年的icon沙龍上發(fā)表過(guò)精彩的演講疚颊，他曾經(jīng)深入的談?wù)撨^(guò)icon設(shè)計(jì)的統(tǒng)一性這方面铜幽。在他為荷蘭政府做icon系統(tǒng)設(shè)計(jì)項(xiàng)目的兩年間，hemmo和他的設(shè)計(jì)伙伴在每個(gè)icon中加入了icon的設(shè)計(jì)元素串稀。不是所有icon都有凹痕除抛，但大部分都有。像這種適當(dāng)?shù)脑谝惶譱con中加入同一元素母截，確實(shí)可以增進(jìn)統(tǒng)一性到忽。
在我們的小狗icon案例中，我們使用了有獨(dú)特風(fēng)格的設(shè)計(jì)元素－心形鼻子清寇。這個(gè)特征不僅使這些icon成為系列喘漏，也增加了個(gè)特別的元素，表達(dá)了我們對(duì)四條腿小伙伴們的喜愛(ài)华烟。
在很多情況下翩迈，雖然一套icon的主要方面改變了，如風(fēng)格盔夜，但是這些統(tǒng)一的設(shè)計(jì)元素能將這些icon捆綁在一起负饲，如下圖。我們將三個(gè)icon從平面化調(diào)整為黑白風(fēng)格喂链，視覺(jué)上依然保持統(tǒng)一返十。
少量應(yīng)用細(xì)節(jié)與裝飾
icon應(yīng)該能快速傳達(dá)一個(gè)物體、想法或行為椭微。而過(guò)多的細(xì)節(jié)可能會(huì)讓icon變得復(fù)雜洞坑，使icon變得不易識(shí)別，尤其是對(duì)于小尺寸icon蝇率。一個(gè)或一套icon中的細(xì)節(jié)成都應(yīng)該也是統(tǒng)一性和識(shí)別性中很重要的一個(gè)方面迟杂。根據(jù)經(jīng)驗(yàn)，確定一個(gè)或一套圖標(biāo)的細(xì)節(jié)成都是否合適的一個(gè)很好的原則是只包含滿(mǎn)足icon意義清晰的最基本的細(xì)節(jié)本慕。
上面的版本已經(jīng)非常接近改進(jìn)后的完成版了排拷，耳朵周?chē)暮谏€(xiàn)條變成了與毛色相近的棕色，面部周?chē)暮谏€(xiàn)條消失了间狂，但柯基臉部的白色區(qū)域還是能看到2個(gè)像素寬的線(xiàn)條攻泼，另外，我們?nèi)杂行┡f版本的元素遺留，如扁平的鼻子忙菠，我們下一步將會(huì)重點(diǎn)強(qiáng)調(diào)它何鸡。
使其獨(dú)特
很多創(chuàng)造高品質(zhì)icon的設(shè)計(jì)師，提供的一部分icon是免費(fèi)的牛欢，而且似乎有增長(zhǎng)的趨勢(shì)骡男。但是很多設(shè)計(jì)師嚴(yán)重依賴(lài)于設(shè)計(jì)趨勢(shì)和多數(shù)流行設(shè)計(jì)師的風(fēng)格。作為一個(gè)創(chuàng)意性的行業(yè)傍睹，我們應(yīng)該放開(kāi)眼界隔盛，向icon界以外的行業(yè)尋找創(chuàng)意，如建筑拾稳、字體吮炕、工業(yè)設(shè)計(jì)、心理學(xué)访得、大自然和其他我們能找到靈感的任何領(lǐng)域龙亲。因?yàn)槿缃裨絹?lái)越多的icon看起來(lái)很相似，讓你的icon變得特別更加重要悍抑。
在最后這張圖的右圖中鳄炉，我們加入了獨(dú)特的心形鼻子，給整個(gè)設(shè)計(jì)增加了些新奇和輕松的感覺(jué)搜骡。
這幾個(gè)步驟只是拋磚引玉拂盯，并不是一個(gè)完整的方法指導(dǎo)。icon設(shè)計(jì)并沒(méi)有單一的設(shè)計(jì)方法记靡。在文中谈竿，我們提出了使icon設(shè)計(jì)保持一致的基本法則，但其他設(shè)計(jì)師肯定有各自的觀點(diǎn)和方法簸呈，成為更好的設(shè)計(jì)師的最好方法就是盡量看更多視覺(jué)素材榕订，讀各種材料，經(jīng)常畫(huà)（不管到哪都攜帶畫(huà)冊(cè)）蜕便，并且不斷的練習(xí)、練習(xí)贩幻。
結(jié)論
我們分享了如何創(chuàng)建高品質(zhì)的icon的基礎(chǔ)方法丛楚。任何人都可以通過(guò)練習(xí)學(xué)習(xí)并掌握族壳。記住，創(chuàng)建好的icon要從基礎(chǔ)圖形開(kāi)始（形態(tài)）趣些，再不斷細(xì)化出特色（識(shí)別性）仿荆，在一個(gè)或一套icon中應(yīng)用共同元素使你的icon保持內(nèi)外統(tǒng)一（美學(xué)統(tǒng)一）。一旦你掌握了技術(shù)方法，你會(huì)更加關(guān)注如何真正使你的icon變得杰出：你的獨(dú)特審美拢操。
原文鏈接：https://www.smashingmagazine.com/2016/05/easy-steps-to-better-logo-design
