图标原则

容易识别

图标的主要目标是能高效地将信息准确无误地传达给用户。为保证图标在不同场景下都容易分辨,图标应该突出信息的特征点,减少不必要的细节。

美观统一

图标本身具有一定的装饰作用,可以提高界面的美观性,同时也应该和界面的其他元素风格统一。
推荐风格

图标大小

图标画布
Semi Design 将图标画布尺寸定为 24×24。图标优先满足 1 倍网格,在此基础上,满足 2 倍网格的图标也是允许的(即满足 0.5px 倍数的坐标)。实际应用是,图标可缩放为如下尺寸:
名称大小
Extra Small8×8
Small12×12
Default16×16
Large20×20
Extra Large24×24

网格与参考线

绘制网格

图标风格

面性图标

Semi Design 目前主要使用的是面性(或实心)风格的图标。不过对于一些常见的不易用面性表示的图标如关闭、加号、放大镜图标,由于这些图标已经形成了很强的用户认知,所以我们仍然保留其线性的外观。对于这类和面性图标搭配的线性图标,优先使用 3px 粗细的线条,使其视觉上与面性图标取得平衡。除了负空间等特殊情况,不建议使用 1px 粗细的线条。

圆角和角度

对于图标中的大元素而言,外角半径应为 2px。图标内的小元素,内外角半径可采用 0.5px, 1px 或 2px。 注:目前大多数面性图标外角半径为 3px,将逐步优化为 2px。
图标圆角
所有拐角的角度都必须是 15° 的倍数。
拐角角度

特殊情况

在主要使用面性风格时,如果配套的线性图标形态比较复杂,3px 粗细的图标和会显得比较臃肿,此时可以使用 2px 的粗细的图标。
dosanddonts3

线性图标

当绘制线性风格的图标时,默认使用 2 px 粗细的线段。当图标最外层是一个矩形时,使用 2 px的圆角,同时将图标内部的线条和拐点设置成圆形。 图标内部的间隙建议大于 2px,以保证尺寸较小时的可读性。
线性图标元素规范

圆角和角度

当图标由多个小元素组成时,不建议将每个元素设置 2 px 的圆角,而是将拐点和端点都设置为圆形即可。
dosanddonts1
dosanddonts2

特殊情况

当图标形态简单时,2px 粗细的图标和加粗的文字搭配会显得不平衡,此时可以使用 3px 的粗细的图标。
dosanddonts4