線性 icon 的繪製該如何練習，有哪些實用技巧和較好的教程？

Q1: 看一些大牛的設計作品，在 icon 設計那塊經常會說 2px 線性重繪，遵循一致性原則，是什麼意思？

Q2：一些左右或者上下十分對稱的線性 icon 該如何繪製才能保證其對稱？

1. 就是每條線盡量都保證是 2px 寬的

2. 畫一半然後鏡像？

這是我之前在做一個項目時，

總結出的一套線性 icon 設計規範～

裡面包含了繪製一套線性 icon 的注意事項，

規範也可以保證不同項目成員在做設計時的一致性。

我在製作的時候主要參考了這兩套設計規範：

Google 的 Material Design： https://material.io/guidelines/style/icons.html#

螞蟻金服的 Ant Design： A UI Design Language

然後再結合具體項目的需求來做調整。

1 關鍵輪廓線

這個關鍵輪廓線我沿用了 Google 的規範～

關鍵輪廓線保證了各種形狀的 icon 視覺重量的一致。

繪製的時候可以利用網格來做，

網格修正了視覺誤差的大小。

icon 由幾何圖形構成，斜線的角度盡量取 30° 45° 60°

繪製的時候注意比例，含義，複雜程度等等

繪製時可以將內容和網格分成不同的圖層，方便查看～

2 細節_筆畫

這裡定義了一套 icon 里線的粗細和繪製時的畫板尺寸。

所有的 icon 線條的規則應保持一致：

「正確示範「和」錯誤示範「僅僅針對於我做的這個項目哦～

你也可以根據項目的需求進行自定義。

3 細節_邊角

定義了端點和邊角是「圓角」還是「直角」

4 透視角度

透視角度的一致保證了風格一致

5 尺寸

我在這個項目里主要使用的是 16px 24px 32px 40px 這幾個尺寸

無論尺寸大小，icon 都使用同一套，

所以要保證在最小尺寸時 icon 表現效果良好

6 製作

icon 的製作時的一些注意事項

這裡實際上沿用的是 iconfont 的圖標繪製規則，鏈接在這裡：

Iconfont-阿里巴巴矢量圖標庫

7 命名

命名也建立一套規則，方便 icon 的使用與管理。

能更快速的找到所需要的 icon。

將 icon 進行分類管理，便於索引。

我這裡參考了 Ant Design，分為四類：

方向性圖標，提示建議性圖標，通用圖標，品牌標識

8 使用與管理

阿里的 iconfont 很適合管理圖標，Iconfont-阿里巴巴矢量圖標庫

便於同事之間 ( 設計，技術 ) 協作。

將圖標以 svg 格式上傳之後，可以直接下載 png / svg 格式的圖標，

還可以定義顏色和尺寸，非常方便。

總之，無論是一個人獨立完成項目，還是在團隊合作中，

這個規範，對於視覺一致性，繪製和使用流程的一致性還是蠻有必要的～

有以下幾個優點：

1 便於團隊協作與管理

2 保證了各子產品的視覺一致性 ( 描邊粗細、重量、圓角直角等 )

3 視覺一的致性可以更加突出品牌特色

忙裡偷閒，來答一下哈~我用的是Adobe Illustrator。

Q1：一致性指的的是線的粗細、大小和icon風格。我畫icon一般都用一個模版，像下面這樣的。（模版來自iconfont）

Q2：鏡像的話，看下圖。沿著居中參考線畫一半，然後用鏡像工具複製另一半就好了。