图标
#
icon 绘制规则以 px 为单位的网格
网格、比例和尺寸,系统图标以 48px 的尺寸显示。创建图标时,以 100% 的比例来设计是非常重要的,那样可以确保像素级的精度。
#
图标网格图标网格用于促进图标的一致性,并为图标元素的定位建立清晰的规范。这种标准化造就了一个灵活但一致的系统。
#
内容区域由于方形的视觉面积大于同尺寸(长=直径)圆形视觉面具,为保持图标整体大小协调,在具体图标设计时方形盒圆形采用不同的设计尺寸和四周留白。
在 48*48px 的标准画布上,圆形距离边界 2px,正方形距离边界 5px,安全绘制区域为 44px。
#
关键线形状关键线形状是网格的基础。使用这些核心形状作为准则,你可以在相关产品图标的设计中保持一致的视觉比例。
#
系统图标拆解在图形绘制中我们使用 4px 作为标准圆角,且线段内外皆为圆角,这里的圆角对于线性或面型图标均适用
#
笔画在图形绘制中我们使用 3px 作为标准描边,避免出现 3.2px 等带有小数点的数值
#
圆角在图形绘制中我们使用 4px 作为标准圆角,且线段内外皆为圆角,这里的圆角对于线性或面型图标均适用
#
内部间距在图形绘制中间距的增量请使用完整的像素块进行递增
#
标准快捷图标标准的快捷操作图标就是把一个材料系统图标放置在安全区域的中心,这里同样使用与线性和面型图标
#
通用原则为了提高图标的识别性,我们对于拥有相同属性或类别的图标进行元素抽取和复用,比如扫码支付,刷脸支付都有扫描这个含义,因此我们可以提取扫描这个元素进行复用
#
对与错#
笔画端点图标设计时以几何图形为基础进行造型设计,线条末端统一采用圆角处理。
#
角度在图标的绘制中尽量使用整数角度,例如 15°、45°、60°、120° 等,避免出现 43.2° 等带有小数的角度
#
降噪在图标的绘制中尽量使用简洁的笔画,避免出现复杂的线段,线段与线段之间的间距不得小于 3px
#
几何图形预设的标准已经确定了一些明确的关键线:圆形、正方形、矩形、正交线和对角线。这种通用和简单的线框可以统一图标的样式,以及规范图标在网格上的位置。