图标设计的三点最基本规范

图标设计的规范涵盖颜色、符号的表达、线条的运用等等。当整个设计系统还没那么明朗要建立图标库时，应选择比较保守的作法，将设计系统会影响到的层面抽离本次建立的图标 规范。

规范将会涵盖Icon 图标最基本的构成：画布尺寸、线条、视觉重量。

视觉上的重量

同样高与宽的图像会因为形状而有不同的视觉重量，例如直径14px 的圆与14px 高宽的正方形在视觉上看起来就不一样大。

在Sketch 中常常会用高与宽来判断物件尺寸，观察不同形状形成的负空间，在视觉上并不一样大。

观察上图可以看见方形在视觉上最大，而圆形与三角形较小；因此在视觉重量上尽量维持每一个icon 看起来是一样大的。

当然会有一些例外的图标，例如：方向（左右上下）用于下拉选单或上一页等，在绘制这些icon图标 时将其维持在「视觉的」正中心。

画布尺寸与绘图空间

制作icon图标的画布尺寸为14px * 14px。绘图空间会随着构图而有所不同，以方形构图为基准：

方形构图

因为方形在视觉上为最大的图形，因此方形构图在14px* 14px 的画布上会预留1px 空间。

圆形构图

圆形构图则会超出预留1px 的空间，为了让它在视觉上的重量与方形构图相当。

线条运用

线条的运用可以分成三种元素：

1px 线条元素（主要构图）

主要构图将会构成icon图标的主要形状。描绘icon图标 主体部分使用1px 粗细圆头线条，在转折处的圆角为1px。

0.8px 线条元素（用于细节）

主要形状之外，在图标 内部的细节，0.8px 线条的圆角是使用Sketch 线条圆角。

1.4px 元素（通常用于原点、正方形）

用于比较特殊的情形，当icon 细节有圆形时则会使用。

小结

目前只规范icon 最基本的组成，当然线条的使用多少也会受到设计系统所订定的风格影响，这在未来也会持续修正调整。