图标设计规范与命名规范

图标是良好设计系统的基本组成部分 图标对营销材料非常有帮助。他们是插画内容的基础构建块，但他们也具有很高的技术性。因此科学严谨的设计规范能帮助我们设计精致、风格统一的图标，也让我们整体的视觉效果更和谐。

图标设计中应遵从

1、 高辨识度减少用户理解成本 2、 易传播、易复用兼备设计感

一、图标样式

系统图标根据不同场景使用描边图形与填充图形两种样式，两种样式使用同一结构图形，这样整体页面看起来更具有视觉统一性。 图标选中状态多采用主题色（不包括特殊功能型入口图标、运营类入口图标）

功能型图标与运营类图标，在同一产品中也应保证风格不得相差甚远。

二、图形尺寸布局

icon 的常用尺寸有很多，在绘制时，一定要确保所有的图标都相同大小。在PC端中单独 icon 使用时，尽量不要太小，最小值 12px，图标的尺寸以12+2n为标准。 一个页面中的图标若分为大、中、小层级，每个层级间最小相差4px，否则图标梯度不够明显，视觉层级不宜与区分。

在绘制图标之前确定好图标尺寸再开始绘制，避免出现后期由于尺寸不符，手动拖拽调整大小。

1.1 使用图标盒子规范绘制

系统图标设计以 24px 为标准尺寸，中央 22px 为图标主要绘制区域，上下左右各留 1px 作为空隙。

使用图标盒子规范绘制利用这些核心形状做为向导，可尽量使图标保持一致的视觉比例及体量。

若图标形状特殊，需要添加额外的视觉重量实现整体图标体量平衡，绘制区域可以延伸到空隙区域内，但图标整体仍应保持在24px大小的范围之内。

最优样式推荐

绘制图标时，应保证图标基础样式一致。

1.1 使用图标盒子规范绘制

系统图标设计以 24px 为标准尺寸，中央 22px 为图标主要绘制区域，上下左右各留 1px 作为空隙。

三、图标命名规范

在图标的命名规则规范中，需要明确多项目之间有哪些不同。如每个产品项目有自己单独的后缀，在公共的基础图标部分又使用相同的命名规则，这样既能够让图标应用到各个产品，同时每个图标之间也能追寻到最终的源头。

命名逻辑顺序：

系统系统图标：ds-ic-模块-功能- （位置 / 大小 / 颜色 / 状态 / 线性 / 面性 ）前四个为必填项，括号内的可根据情况来标注 运营类图标：op-ic-模块-功能- （位置 / 大小 / 颜色 / 状态 / 线性 / 面性 ）前四个为必填项，括号内的可根据情况来标注

注：资源名要求全部为小写字母，长字段可以缩写，命名不可有空格，不同字段以 “ - ” 来分隔

例：