1.使用柵格

界面上的icon一般都能近似成一個(gè)基本形式，比如各個(gè)方向的長(zhǎng)方形、圓、三角形、正方形。如果你把他們進(jìn)行模糊化處理，你會(huì)發(fā)現(xiàn)他們都是差不多大的一小團(tuán)黑色，也就是說(shuō)其“視覺(jué)重量”是基本一致的。

把icon根據(jù)不同的形狀放入柵格框架里面。舉個(gè)例子，方形的icon就比三角和細(xì)長(zhǎng)icon顯得更緊密。

一個(gè)icon約緊密，他需要的空間就越少。一個(gè)icon的細(xì)節(jié)越多，我們?cè)贃鸥窨蚣苤芯蛻?yīng)該給他更多的空間。

注意不要讓柵格限制你的創(chuàng)作，如果這個(gè)icon超出格子后的效果非常好，那就完全可以突破柵格的限制。

2.注意像素對(duì)齊

在非retina屏上，icon的線條一定要緊貼像素網(wǎng)格，不要出現(xiàn)小數(shù)點(diǎn)；線型icon建議線寬2px。

如果你使用1px，那線條只能在內(nèi)部或外部，不能使用中心對(duì)齊。

使用居中的1px邊框，使得圖標(biāo)會(huì)在100%的比例時(shí)模糊，不過(guò)如果你放大的話，它看起來(lái)很清晰。

依照格子來(lái)確定斜線的角度。盡量使用45°、30°、60°等常見(jiàn)角度，他們會(huì)比13.7°或者81°這樣不常見(jiàn)的角度更清晰。 

3.  把握細(xì)節(jié)程度

設(shè)計(jì)一組icon時(shí)，先從最復(fù)雜的開始做起。這樣就可以控制圖標(biāo)的細(xì)節(jié)程度，保證所有icon的視覺(jué)重量相同。

如果icon的細(xì)節(jié)程度各不相同，那細(xì)節(jié)更多的icon就會(huì)吸引用戶的注意力，看起來(lái)也更“重”一些。

4.控制最小間隔尺寸

在整套icon中，每個(gè)icon內(nèi)部相鄰元素之間的距離不應(yīng)該太小。最好定義一個(gè)最小間隔尺寸，避免icon風(fēng)格不同意。

對(duì)于線型icon來(lái)說(shuō)，一個(gè)簡(jiǎn)單方法就是最小間隔大小與線寬保持一致。同時(shí)線條要清楚地分開或者相連，一定不要用那種似連非連的樣式。

5.去除重復(fù)的部分

在一套icon里，你可能設(shè)計(jì)出很多重復(fù)的細(xì)節(jié)。但一定要舍棄這些重復(fù)的部分，突出每個(gè)圖標(biāo)中特色的點(diǎn)。這就像數(shù)學(xué)中的分?jǐn)?shù)一樣，視覺(jué)雜質(zhì)越少，用戶理解的就越清楚。

如果用戶已經(jīng)知道他們正在用什么樣的軟件，那就就不需要一再重復(fù)地告訴他們。比如說(shuō)在郵箱app里，icon即使去掉“郵件”這個(gè)元素，用戶依然知道自己是在收發(fā)郵件。

這個(gè)規(guī)則對(duì)于其他裝飾性元素也適用，比如一些圍繞在icon周圍的框架、背景等。這些裝飾可能沒(méi)有幫助用戶理解icon，甚至在妨礙理解icon。

6.制定并保持一個(gè)明確的風(fēng)格

不要在一套圖標(biāo)里混合多種風(fēng)格。風(fēng)格的一致會(huì)幫助用戶理解icon意義、找出重要程度相似的icon。

線型或者填充性icon也適用這個(gè)原則。如果你把這兩種風(fēng)格的icon混合著用，用戶可能會(huì)認(rèn)為不同風(fēng)格的icon代表不同的重要程度或者狀態(tài)。當(dāng)然，除非你就是打算這么做的。舉例來(lái)說(shuō)，填充型icon代表一些關(guān)鍵指令，線型則是其他指令。

在頁(yè)面中有兩種類型的icon也是可以的，線型icon用來(lái)標(biāo)識(shí)不可用或者默認(rèn)狀態(tài)，填充型icon代表已選狀態(tài)。

7.使用icon的標(biāo)準(zhǔn)設(shè)計(jì)尺寸系統(tǒng)

8pix柵格和12列柵格是目前最靈活的設(shè)計(jì)尺寸系統(tǒng)。12可以被2、3、4、6整除，所以24*24pix和48*48pix是目前的標(biāo)準(zhǔn)icon尺寸。如果需要更大尺寸的icon可以直接放大使用。

8.保持輪廓的干凈和準(zhǔn)確

完美本身并不是目標(biāo)。沒(méi)人會(huì)為了一條像素清晰的點(diǎn)去一個(gè)一個(gè)檢查像素。但icon清晰度會(huì)影響最終產(chǎn)品給用戶的感受，所以時(shí)刻提醒自己icon中是不是有多余的錨點(diǎn)？以及icon中的錨點(diǎn)是不是準(zhǔn)確的點(diǎn)在像素點(diǎn)上？

不知道你是否遇到過(guò)“8.999px”和“100.001px”這種煩人的尺寸。如果繪制過(guò)程中，錨點(diǎn)點(diǎn)的非常準(zhǔn)確，那么icon的線條就會(huì)很“鋒利”，平滑，你也不會(huì)遇到各種稀奇孤寡的問(wèn)題。

9.規(guī)范化的SVG格式輸出

許多設(shè)計(jì)工具比如Sketch，在生成SVGs文件是會(huì)產(chǎn)生許多不必要的東西—多余的圖層、純顏色層、蒙版等等?？催@個(gè)例子：在Sketch里，看起來(lái)沒(méi)什么問(wèn)題，但是...

在其他編輯器（AI之類）里打開這個(gè)SVG文件。你會(huì)看到許多空?qǐng)D層、不知道哪來(lái)的分組、蒙版等等。這些多余的東西在開發(fā)人員使用SVG的時(shí)候就會(huì)導(dǎo)致許多問(wèn)題。

你可以刪掉這些沒(méi)用的東西，然后再保存。

你可以看到，之前從Sketch導(dǎo)出的SVG和清理過(guò)的SVG在你的電腦里看起來(lái)是不一樣的。

如果你想到其他的建議請(qǐng)直接留言，我們可以一起完善這份指南。但如果上述中有些規(guī)則會(huì)影響到你重要的設(shè)計(jì)理念，那么不要被這些規(guī)則完全束縛，發(fā)揮創(chuàng)意吧。

本文已獲得作者授權(quán)-授權(quán)截圖

譯者：@不器

校對(duì)：@熊貓小生

作者：Slava Shestopalov  

原文地址：https://medium./icon-set-3b4fc87dc6b5

版權(quán)由原作者所有，轉(zhuǎn)載請(qǐng)注明~~~