圖標(biāo)設(shè)計(jì)的規(guī)范涵蓋顏色、符號(hào)的表達(dá)、線條的運(yùn)用等等。當(dāng)整個(gè)設(shè)計(jì)系統(tǒng)還沒那么明朗要建立圖標(biāo)庫(kù)時(shí)，應(yīng)選擇比較保守的作法，將設(shè)計(jì)系統(tǒng)會(huì)影響到的層面抽離本次建立的圖標(biāo) 規(guī)范。

規(guī)范將會(huì)涵蓋Icon 圖標(biāo)最基本的構(gòu)成：畫布尺寸、線條、視覺重量。

視覺上的重量

同樣高與寬的圖像會(huì)因?yàn)樾螤疃胁煌囊曈X重量，例如直徑14px 的圓與14px 高寬的正方形在視覺上看起來(lái)就不一樣大。

在Sketch 中常常會(huì)用高與寬來(lái)判斷物件尺寸，觀察不同形狀形成的負(fù)空間，在視覺上并不一樣大。

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

當(dāng)然會(huì)有一些例外的圖標(biāo)，例如：方向（左右上下）用于下拉選單或上一頁(yè)等，在繪制這些icon圖標(biāo) 時(shí)將其維持在「視覺的」正中心。

畫布尺寸與繪圖空間

制作icon圖標(biāo)的畫布尺寸為14px * 14px。繪圖空間會(huì)隨著構(gòu)圖而有所不同，以方形構(gòu)圖為基準(zhǔn)：

方形構(gòu)圖

因?yàn)榉叫卧谝曈X上為最大的圖形，因此方形構(gòu)圖在14px* 14px 的畫布上會(huì)預(yù)留1px 空間。

圓形構(gòu)圖

圓形構(gòu)圖則會(huì)超出預(yù)留1px 的空間，為了讓它在視覺上的重量與方形構(gòu)圖相當(dāng)。

線條運(yùn)用

線條的運(yùn)用可以分成三種元素：

1px 線條元素（主要構(gòu)圖）

主要構(gòu)圖將會(huì)構(gòu)成icon圖標(biāo)的主要形狀。描繪icon圖標(biāo) 主體部分使用1px 粗細(xì)圓頭線條，在轉(zhuǎn)折處的圓角為1px。

0.8px 線條元素（用于細(xì)節(jié)）

主要形狀之外，在圖標(biāo) 內(nèi)部的細(xì)節(jié)，0.8px 線條的圓角是使用Sketch 線條圓角。

1.4px 元素（通常用于原點(diǎn)、正方形）

用于比較特殊的情形，當(dāng)icon 細(xì)節(jié)有圓形時(shí)則會(huì)使用。

小結(jié)

目前只規(guī)范icon 最基本的組成，當(dāng)然線條的使用多少也會(huì)受到設(shè)計(jì)系統(tǒng)所訂定的風(fēng)格影響，這在未來(lái)也會(huì)持續(xù)修正調(diào)整。