图标 icon ·

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

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

规范将会涵盖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 最基本的组成,当然线条的使用多少也会受到设计系统所订定的风格影响,这在未来也会持续修正调整。

参与评论