一、使用柵格

界面上的 icon 一般都能近似成一個基本形式，比如各個方向的長方形、圓、三角形、正方形。如果你把他們進行模糊化處理，你會發(fā)現(xiàn)他們都是差不多大的一小團黑色，也就是說其「視覺重量」是基本一致的。

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

一個 icon 越緊密，它需要的空間就越少。一個 icon 的細節(jié)越多，我們在柵格框架中就應該給他更多的空間。

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

二、注意像素對齊

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

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

使用居中的 1px 邊框，使得圖標會在100%的比例時模糊，不過如果你放大的話，它看起來很清晰。

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

三、把握細節(jié)程度

設計一組 icon 時，先從最復雜的開始做起。這樣就可以控制圖標的細節(jié)程度，保證所有 icon 的視覺重量相同。

如果 icon 的細節(jié)程度各不相同，那細節(jié)更多的 icon 就會吸引用戶的注意力，看起來也更「重」一些。

四、控制最小間隔尺寸

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

對于線型 icon 來說，一個簡單方法就是最小間隔大小與線寬保持一致。同時線條要清楚地分開或者相連，一定不要用那種似連非連的樣式。

五、去除重復的部分

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

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

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

六、制定并保持一個明確的風格

不要在一套圖標里混合多種風格。風格的一致會幫助用戶理解 icon 意義，找出重要程度相似的 icon。

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

在頁面中有兩種類型的 icon 也是可以的，線型 icon 用來標識不可用或者默認狀態(tài)，填充型 icon 代表已選狀態(tài)。

七、使用icon的標準設計尺寸系統(tǒng)

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

八、保持輪廓的干凈和準確

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

不知道你是否遇到過「8.999px」和「100.001px」這種煩人的尺寸。如果繪制過程中，錨點點的非常準確，那么 icon 的線條就會很「鋒利」，平滑，你也不會遇到各種稀奇古怪的問題。

九、規(guī)范化的SVGs格式輸出

許多設計工具比如 Sketch，在生成 SVGs 文件是會產(chǎn)生許多不必要的東西，多余的圖層、純顏色層、蒙版等等?？催@個例子：在 Sketch 里，看起來沒什么問題。

但是在其他編輯器（ AI 之類）里打開這個 SVG 文件。你會看到許多空圖層、不知道哪來的分組、蒙版等等。這些多余的東西在開發(fā)人員使用 SVG 的時候就會導致許多問題。

你可以刪掉這些沒用的東西，然后再保存。

你可以看到，之前從 Sketch 導出的 SVG 和清理過的 SVG 在你的電腦里看起來是不一樣的。

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

原文鏈接：《Hopefully, the Ultimate Guide to a Flat Icon Set》?Slava Shestopalov

歡迎關注譯者微信公眾號：「熊貓設計院」

圖片素材作者：Victor Erixon

「圖標設計新手指南」

• 《沒掌握圖標的繪制規(guī)范之前，別說自己會畫圖標了》
• 《如何畫好一組線性圖標？來看這份新手科普總結！》
• 《用品牌基因法，三步幫你搞定圖標設計！》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內(nèi)人氣最高的設計網(wǎng)址導航，設計師必備： http://hao.uisdc.com