跳至主要内容

图标样式


图标风格

基础图标

通用图标的设计通常会有两个版本,一个是线条版,一个是填充版。

  • 线条版:在大多数情况下,使用图标的线条版,因为在视觉上会更有识别性。
  • 填充版:可用于表示已执行的操作和命令,例如,当文章被 “收藏” 时,使用填充版的图标,可以使用填充颜色来进一步加强这种交互的变化。

业务图标

为了降低设计成本,提高设计效率,业务图标的设计大多数情况下用通用图标的形状进行嵌套。

业务图标结构:

  • 形状:主要来源于通用图标。
  • 背景:主要来源于色板中的颜色,默认有定义好的几种颜色。

图标颜色

示例主要颜色色值用法轻量颜色色值用法
#F5424B--
#F5D1D3--
#FF9B00--
#F7E3C4--
#23C343--
#CBEBD1--
#37D4CF--
#CFEEED--
#00B4E8--
#C4E8F2--
#4080FF--
#D1DEF7--
#8D4EDA--
#E0D4F0--
#C623FF--
#ECCBF7--
#ED33A2--
#F3CEE4--
#909291--
#E1E1E1--

图标交付

图标链接

产品中所有的图标都存放在这里管理。

点击查看图标

图标格式

请使用.svg格式,这样在任何屏幕下面都不会出现模糊不清的情况。

图标尺寸

16px

在网页中,使用场景最多。

20px

在网页中,特定场景。

24px(基准)

图标设计的基准尺寸,往上往下都可以方便适配。

32px

嵌套在 48px 业务图标中的小图标尺寸。

图标类型

基础图标

单色

填充

双色

业务图标

标准业务图标

主要用于辅助信息展示,增加信息层次和对比。

图标尺寸:48px;内图标尺寸:32px。

动作业务图标

主要用于提示动作,提示当前可交互。

图标尺寸:40px;内图标尺寸:24px。

文件图标

支付图标

图标名称参数
方形-小24x24px
方形-大40x40px
圆形40x40px
长方形-大72x48px
长方形-中36x24px
长方形-小24x16px

国家图标

社交图标

图标背景

图标背景分为圆角8px圆形

图标场景

--