Icon Library Part2：Icon 的製作規範

Icon 的規範涵蓋顏色、符號的表達、線條的運用等等。當設計系統還沒那麼明朗時要建立 Icon Library 我選擇比較保守的作法，將設計系統會影響到的層面抽離本次建立的 icon 規範。

規範將會涵蓋 Icon 最基本的構成：畫布尺寸、線條、視覺比重。

章節列表

1. Icon Library Part1 ：Sketch 製作 TTF 檔案
2. ***Icon Library Part2：Icon 的製作規範
3. Icon Library Part3：導入設計師的工作流程

*** 為 目前章節 記號，如果你在找其他章節，可以透過上面的連結快速穿梭。

視覺上的比重

同樣高與寬的圖像會因為形狀而有不同的視覺比重，例如直徑 14px 的圓與 14px 高寬的正方形在視覺上看起來就不一樣大。

在 Sketch 中常常會用高與寬來判斷物件尺寸，觀察不同形狀形成的負空間，在視覺上並不一樣大。

觀察上圖可以看見方形在視覺上最大，而圓形與三角形較小；因此在視覺比重上盡量維持每一個 icon 看起來是一樣大的。

當然會有一些例外的 icon 例如：方向（左右上下）用於下拉選單或上一頁等，在繪製這些 icon 時將其維持在「視覺的」正中心。

畫布尺寸與作圖空間

製作 icon 的畫布尺寸為 14px * 14px。
作畫空間會隨著構圖而有所不同，以方形構圖為基準：

方形構圖

因為方形在視覺上為最大的圖形，因此方形構圖在 14px* 14px 的畫布上會預留 1px 空間。

圓形構圖

圓形構圖則會超出預留 1px 的空間，為了讓它在視覺上的重量與方形構圖相當。

線條運用

線條的運用可以分成三種元素：

1px 線條元素（主要構圖）

主要構圖將會構成 icon 的主要形狀。描繪 icon 主體部分使用 1px 粗細圓頭線條，在轉折處的圓角為 1px。

0.8px 線條元素（用於細節）

主要形狀之外，在 icon 內部的細節，0.8px 線條的圓角是使用 Sketch 線條圓角。

1.4px 元素（通常用於原點、正方形）

用於比較特殊的情形，當 icon 細節有圓形時則會使用。

小結

目前只規範 icon 最基本的組成，當然線條的使用多少也會受到設計系統所訂定的風格影響，這在未來也會持續修正調整。