超實用的扁平圖標繪製終極指南!
一、使用柵格
界面上的 icon 一般都能近似成一個基本形式,比如各個方向的長方形、圓、三角形、正方形。如果你把他們進行模糊化處理,你會發現他們都是差不多大的一小團黑色,也就是說其「視覺重量」是基本一致的。
把 icon 根據不同的形狀放入柵格框架裡面。舉個例子,方形的 icon 就比三角和細長 icon 顯得更緊密。
一個 icon 越緊密,它需要的空間就越少。一個 icon 的細節越多,我們在柵格框架中就應該給他更多的空間。
注意不要讓柵格限制你的創作,如果這個 icon 超出格子後的效果非常好,那就完全可以突破柵格的限制。
二、注意像素對齊
在非 retina 屏上,icon 的線條一定要緊貼像素網格,不要出現小數點;線型 icon 建議線寬 2px。
如果你使用 1px,那線條只能在內部或外部,不能使用中心對齊。
使用居中的 1px 邊框,使得圖標會在100%的比例時模糊,不過如果你放大的話,它看起來很清晰。
依照格子來確定斜線的角度。盡量使用45°、30°、60°等常見角度,他們會比13.7°或者81°這樣不常見的角度更清晰。
三、把握細節程度
設計一組 icon 時,先從最複雜的開始做起。這樣就可以控制圖標的細節程度,保證所有 icon 的視覺重量相同。
如果 icon 的細節程度各不相同,那細節更多的 icon 就會吸引用戶的注意力,看起來也更「重」一些。
四、控制最小間隔尺寸
在整套 icon 中,每個 icon 內部相鄰元素之間的距離不應該太小。最好定義一個最小間隔尺寸,避免 icon 風格不統一。
對於線型 icon 來說,一個簡單方法就是最小間隔大小與線寬保持一致。同時線條要清楚地分開或者相連,一定不要用那種似連非連的樣式。
五、去除重複的部分
在一套 icon 里,你可能設計出很多重複的細節。但一定要捨棄這些重複的部分,突出每個圖標中特色的點。這就像數學中的分數一樣,視覺雜質越少,用戶理解的就越清楚。
如果用戶已經知道他們正在用什麼樣的軟體,那就不需要一再重複地告訴他們。比如說在郵箱 app 里,icon 即使去掉「郵件」這個元素,用戶依然知道自己是在收發郵件。
這個規則對於其他裝飾性元素也適用,比如一些圍繞在icon周圍的框架、背景等。這些裝飾可能沒有幫助用戶理解 icon,甚至在妨礙理解 icon。
六、制定並保持一個明確的風格
不要在一套圖標里混合多種風格。風格的一致會幫助用戶理解 icon 意義,找出重要程度相似的 icon。
線型或者填充性 icon 也適用這個原則。如果你把這兩種風格的 icon 混合著用,用戶可能會認為不同風格的 icon 代表不同的重要程度或者狀態。當然,除非你就是打算這麼做的。舉例來說,填充型 icon 代表一些關鍵指令,線型則是其他指令。
在頁面中有兩種類型的 icon 也是可以的,線型 icon 用來標識不可用或者默認狀態,填充型 icon 代表已選狀態。
七、使用icon的標準設計尺寸系統
8pix 柵格和12列柵格是目前最靈活的設計尺寸系統。12可以被2、3、4、6整除,所以24*24pix 和48*48pix 是目前的標準 icon 尺寸。如果需要更大尺寸的 icon 可以直接放大使用。
八、保持輪廓的乾淨和準確
完美本身並不是目標。沒人會為了一條像素清晰的點去一個一個檢查像素。但 icon 清晰度會影響最終產品給用戶的感受,所以時刻提醒自己 icon 中是不是有多餘的錨點?以及 icon 中的錨點是不是準確的點在像素點上?
不知道你是否遇到過「8.999px」和「100.001px」這種煩人的尺寸。如果繪製過程中,錨點點的非常準確,那麼 icon 的線條就會很「鋒利」,平滑,你也不會遇到各種稀奇古怪的問題。
九、規範化的SVGs格式輸出
許多設計工具比如 Sketch,在生成 SVGs 文件是會產生許多不必要的東西,多餘的圖層、純顏色層、蒙版等等。看這個例子:在 Sketch 里,看起來沒什麼問題。
但是在其他編輯器( AI 之類)里打開這個 SVG 文件。你會看到許多空圖層、不知道哪來的分組、蒙版等等。這些多餘的東西在開發人員使用 SVG 的時候就會導致許多問題。
你可以刪掉這些沒用的東西,然後再保存。
你可以看到,之前從 Sketch 導出的 SVG 和清理過的 SVG 在你的電腦里看起來是不一樣的。
如果你想到其他的建議請直接留言,我們可以一起完善這份指南。但如果上述中有些規則會影響到你重要的設計理念,那麼不要被這些規則完全束縛,發揮創意吧。
推薦閱讀:
※在線製作小工具,讓設計更簡單
※OSU建築史(5):羅馬晚期和拜占庭建築
※設計必備,5個可以免費下載圖標的網站資源!
※substance designer 節點翻譯和注釋1
※保溫壺選購什麼牌的產品好?