- 简洁
保持图形的简单和高识别性,去除不必要的装饰和线条,颜色默认为单色
- 通用
采用目前 UI 中常见的形状和图形,减少认识难度
- 统一
保证图标大小、线条粗细、端点特征、拐角特征、圆角特征的统一性
- 大小
图标外边框大小范围设定为 24x24px
,这个范围作为所有图标的虚拟边界(一般都会留有空白部分),是对齐、缩放的参照边界
- 绘制方式
对于大多数图标,采用 线性描边法绘制 ,线的头部和转角形状选择圆弧,默认描边粗细选为 1.2px
,颜色默认为纯黑色 #000000
对于不同的场景图标大小不同时,可根据实际视觉效果与上下文内容调整描边的宽度,推荐分层级地设定,比如对应 16px
、24px
、32px
的图标描边设定为 1.2px
- 基本图形与视觉大小
图标的基本图形可分为正方形、长方形、菱形、圆形、三角形、异形等这几种基本形状,为了保持其视觉上大小相等,应该对它们的绝对尺寸进行调整,比如圆形的外边界应大于方形,这样他们看起来是大致相等的
- 圆角尺寸
在许多绘制方框、直角的图标中,为了增加图形的亲和力(不过份尖锐),推荐使用 1px
大小的圆角。这样的圆角通常出现在较大的边框、转角中,对于图标中较小的细节、不同角度的折角,圆角的大小可酌情处理
- 复杂的
logo
图标
对于 Twitter
、Chrome
、Discord
、Github
等常用的以 logo
为识别特征的图标,可不适用线性图标的绘制方式,用已有的、常用的图形来表达是一种更为通用的表现形式,这里将继续沿用,暂不做线性图标的创作
注意: 跟进这些品牌
logo
的更新,如淘宝的新“淘”字logo
使用规范的英文表达,注意图标命名的大小写