图标原则
容易识别
图标的主要目标是能高效地将信息准确无误地传达给用户。为保证图标在不同场景下都容易分辨,图标应该突出信息的特征点,减少不必要的细节。
美观统一
图标本身具有一定的装饰作用,可以提高界面的美观性,同时也应该和界面的其他元素风格统一。

图标大小

Semi Design 将图标画布尺寸定为 24×24。图标优先满足 1 倍网格,在此基础上,满足 2 倍网格的图标也是允许的(即满足 0.5px 倍数的坐标)。实际应用是,图标可缩放为如下尺寸:
名称 | 大小 |
---|---|
Extra Small | 8×8 |
Small | 12×12 |
Default | 16×16 |
Large | 20×20 |
Extra Large | 24×24 |
网格与参考线
欢迎使用 Icon 绘制模版(Figma) 。

图标风格
面性图标
Semi Design 目前主要使用的是面性(或实心)风格的图标。不过对于一些常见的不易用面性表示的图标如关闭、加号、放大镜图标,由于这些图标已经形成了很强的用户认知,所以我们仍然保留其线性的外观。对于这类和面性图标搭配的线性图标,优先使用 3px 粗细的线条,使其视觉上与面性图标取得平衡。除了负空间等特殊情况,不建议使用 1px 粗细的线条。
圆角和角度
对于图标中的大元素而言,外角半径应为 2px。图标内的小元素,内外角半径可采用 0.5px, 1px 或 2px。
注:目前大多数面性图标外角半径为 3px,将逐步优化为 2px。

所有拐角的角度都必须是 15° 的倍数。

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

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

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


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