图标 · Material You

今天我们不谈各种图标的分类,样式,只有讨论系统图标。

系统图标是广泛应用到产品中的功能和部分业务的图标,其承载着产品统一性最重要的点,如何绘制统一的图标,是一个比较注重细节的问题。经过一年的工作时间和学习,我总结了系统图标设计的要点。

一、基础

1、网格

网格是图标绘制的基础,任何图标绘制都必须在网格的框架内统一绘制。常用的网格尺寸有 16px、24px、32px、48px

2、关键线

关键线是 icon 设计的参考线,帮助图标保持视觉平衡

3、设计原则

简洁(简化图标表现方式,几何化)

一致,icon 的设计要素保持一致

隐喻(贴合意向表达,保持图标的可识别性)

4、命名原则

二、设计要素

对图标进行解构,系统图标无论千变万化,导致变化的基本要素无外乎这几个

1、描边

描边可以说是构成 icon 的骨架,在 48px 的框架内,我们选择 3px 作为描边值,其在 24px 时,为 1.5px 描边

「为什么选择 3px 描边?

• 与其他 UI 元素更加平衡,并且与正文文本字体粗细权重类似
• 可以在需要时提供更多细节,为传达抽象概念和隐喻提供了支持
• 在深色界面和浅色界面表现良好」

除了标准 3px 描边外,对于特殊功能或样式图标,给予了其对应的描边尺寸。(对于导航栏或者单复选、设置、提醒等强交互图标按钮,其描边尺寸为 4px)

对箭头(表单、列表)中页面交互图标,其描边尺寸为 3.6px

对于较为复杂结构的图标,线条粗细可以适当调整

2、圆角

圆角作为 icon 元素最重要的属性之一,对 icon 的风格起着重要的作用

如图,圆角根据大小可大致分为三种

「注:圆角的大小使用除了与图标风格相关,还与图标隐喻相关。

以及【内描边的深度】【图标是否裁剪】」

必要时使用无圆角反映 icon 隐喻,例如纸张,一般纸张是尖锐的,那就不要在边角强行添加圆角;箭头,一般顶端是尖角

对 icon 轮廓拐角点(图像特征的表现),不应加入圆角,因为这会破坏其意向表达

必要时,使用非 3px 圆角反映隐喻对象的真实形式,例如瓶子,本身上面就是大曲线,如果强行使用 3px 圆角,则失去原有意向

对于【居中描边】或者【裁剪】的 icon,其圆角相相当于标准圆角 1/2

3、端点

端点根据图标不同风格选择不同端点样式,如图,前两者一般端点为直角,圆角图标端点为圆角

对于裁剪端点来说,一般直角处理

在某些情况下,端口端点可以与网格相切

在复合图形情况下,端口端点可以与路径偏置轮廓相切

4、节点

节点即 icon 内部的线段转折点,一般来说,对于前两种风格图标,内部转折点均为直角,对于圆角图标,节点一般为圆角。

5、角度

一般基于 15º 的增量来设置角度,最常用的为 45º

三、注意事项

1、内描边还是外描边

只要是闭合形状,就有【内描边】【居中描边】【外描边】三种

只要是非闭合形状,或者线段,就只有居中描边选项。

那在 Material design 中这样说明,大多数情况下,最好采用【内描边】方式,但是在特殊情况下,可以采用其他描边样式。

例如下图,左侧为大部分情况,采用【内描边】样式;右侧有裁切形状,因此整体采用【居中描边】对齐

2、关于点

点是图标内使用率较高的一个元素,我们常常会更多关注线和面,但会忽略点的一个使用。

通常来说,我们不会使用直径和线宽相同的点,因为视觉上看起来小于线段宽度(视觉平衡中也会讲到)。一般圆点的直径要大于线段描边直径。

3、最小间距

一般来说,icon 内部的元素间距建议不要小于描边宽度,但是在特殊情况,可以采用 2px 间距

4、填充

图标边缘尽量对齐像素点,以更好地保证图标的像素清晰度

在某些特殊情况下可以不对齐像素点,如一些居中图形

一般来说,icon 需要填充在关键线中,但是遇到特殊情况,也可以扩展到辅助线之外

5、图标处理

对于 icon 来说,基本上是由图形和线段绘制,然后通过布尔运算或者裁切得到更复合 icon。

• 只要带描边的图形,就必须进行轮廓化,变为形状
• 只有形状才能进行布尔运算
• 进行路径合并

四、视觉平衡

这些约束,目的是在不过度考虑风格的情况下专注于图标概念(意向)。

但是同时,我们也要考虑到这些约束是否会对图标的隐喻产生影响

那我们需要在适当的规则下考虑图标设计,当不符合图标隐喻时,可以跳出当前规则

那对于视觉平衡,Gitlab 也是提出了以下三点

• 图标如果存在更多的细节会增加其视觉重量,会引起更多关注,这是需要将图标缩小降低其视觉权重

• 对于一些极窄的图标,可以将其旋转 45 度然后缩放,可以增加其视觉重量

• 在某些情况下,视觉平衡调整意味着 icon 减少对网格或者其他间距规则的遵守,以符合其视觉重量

五、图标排版

由于图标常常和文字搭配使用,因此图标尺寸和描边需要和文字匹配

六、MD 更新

1、图标样式

此次添加了 icon 设计的规则,在前代 Material design 的基础上进行了补充更新。为了适应 Material You 动态特性,此次 icon 概念也进行了新定义。

和上文我定义的类似,MD 也把 icon 分成了三种样式,1. Outlined 2. Rounded 3. Sharp,其中 Outlined 即上图的棱角图标,Rounded 即为圆角图标,Sharp 即为直角图标

其将图标作为一种可变字体,类似字体调整,其可通过 Figma 插件调整其 weight, fill, optical size, and grade 四个元素特征。

• weight 即其参考 web 开发,将 icon 描边粗细分为七个等级,其中 regular 对应 400 值;
• fill 即【填充】和【非填充】;
• optical size 即图标尺寸,MD 中规定了四个尺寸,20px、24px、40px、48px;
• grade 是 icon 在不同模式下的调整,相比于正常模式,暗色模式下图标描边要更小;

2、图标交互

在 Material design 中,给出了关于图标的建议交互尺寸。

对于 24px 图标,使用 48px 交互尺寸。(对于 20px 图标,使用 40px 交互尺寸),这相当于 icon 间距为 24px

在 iOS 中,触摸最小区域建议为 44px,因此,icon 的间距为 20px。

实际上,在大多数 app 中,并不完全遵守安卓或者 iOS 规则,但是尽管如此,两个 icon 的间距最小也要 16px,此时相当于触摸区域为 40px

参考:Material design / Carbon design / Pajamas design / T-design / Ant design