从6个方面帮你快速掌握图标设计规范

一、图标类型

根据谷歌的 Material Design 图标规范，将图标分为：产品图标 & 系统图标。

产品应用图标（也叫启动图标），是指产品「品牌标识」中独立的图形，也是产品品牌的核心组成元素。作为产品所有视觉通信中必不可少的元素，其使用率非常高。 （如下图所示）

系统图标会根据不同的系统/应用的需求来绘制相应的图标。系统图标也常被叫做：基础图标、系统功能图标、全局图标、通用图标等。系统图标又可以细分为：线性图标、面性图标、线面结合图标。（下图示例部分系统图标）

二、系统图标的尺寸与网格

1.绘图工具

图标绘制要使用矢量绘图工具。例如sketch、AI等。尽量避免使用PS进行绘制，会出现杂边。

2.避免小数位

在用矢量工具绘制图标时，注意图标的尺寸和位置，避免产生小数位。以sketch为例：

3.尺寸与网格（keyline线）

系统图标与产品图标的尺寸是不同的，系统图标会更繁琐一些。
图标尺寸常见的有12 × 12px、16 × 16px、24 × 24px、32 × 32px、48 × 48px；

绘制时，大多都是按照1:1来进行绘制的。
每一种尺寸中包含“安全区域”和“裁剪区域”，安全区域中采用相应的4种关键线来约束图标。异形图标在设计时需要根据实际视觉效果做调整，主要保证图标在视觉上的统一。

一个项目从立项开始，就要着手进行图标规范的制定。此外，B端项目与C端项目同时开发时，需要提前将B端与C端分别建立图标库。（切记若B端C端同时开发，图标库要分开建立，否则随着项目逐渐深入，产品功能逐渐增多，后期要针对图标库进行拆分需要耗费大量时间与精力。）

下面，以32 × 32px，16 × 16px 为例，进行详细说明：

三、系统图标的绘制

1.绘制步骤

1. 绘制一个 32 x 32 像素的画板。32px 的图标四周应该有 2px 的留白，图标绘制在28 x 28px 的安全区域内。
2. 将图标绘制在画板内，确保它与像素网格对齐。
3. 确定图标的粗细与圆角（绘制时，注意图标拐角：直角拐角/非直角拐角）。
4. 绘制完毕，将所有笔画转换为轮廓 (⌥ + ⌘ + O)。（注意：在AI中，一个图标绘制完毕后，一定要转换成形状（轮廓），否则导出SVG后，上传至iconfont会出错。）

2.绘制方式

绘制方式：布尔运算 或 贝塞尔曲线

3.布尔运算

布尔指的是乔治·布尔，19世纪的一位数学家，为了纪念布尔在符号逻辑运算中的杰出贡献，所以将这种运算称为布尔运算。
布尔运算听起来比较难，但其实非常简单，布尔运算采用的数字逻辑推演法，主要有数字逻辑的联合、相交、相减。设计师在使用软件过程中引用了这种逻辑运算方法，对应到设计软件中，就有：联集（合并形状）、相减（减去顶层）、交集（与形状区域交叉）、差集（排除重叠形状）。

举例说明：要进行绘制「文档」图标，以sketch为例，布尔运算步骤示例如下图所示：

当然，也有设计师习惯使用描边的方式进行绘制。但需要注意的是，使用描边时，需要设置为居中描边，且绘制完成后，需要将描边转换为形状。

4.贝塞尔曲线

贝塞尔曲线是绘制矢量图形时的重要工具，使用钢笔工具画出的所有图形一般来说都是贝塞尔曲线组成的。

贝塞尔曲线包括：节点、控制点、控制线、曲线这几个基本概念。
矢量图形便是由这几个基本概念构成的。图形由基础节点作为支撑构成，控制点和节点之间的线段称为控制线，可调整控制点的位置，可以改变曲线的形状。

节点包括 4 种基础属性类型：
1. 没有控制点和控制线的「直线节点」；
2. 「镜像关联节点」，这种节点控制其中一侧的控制点，另一侧的控制点会发生镜像变化，适合绘制对称结构的曲线；
3. 「无关联节点」，即节点两侧的控制点可以各自自由控制它们那一侧的曲线而不互相影响；
4. 「不对称关联节点」，这种类型下，节点两侧的控制点和节点会永远保持在同一条直线上，但是却不会对称控制线的长度。

四、图标的导出与命名

1.sketch图标导出

1. 导出时，要选择整个画板区域进行导出（不仅仅是图标）。保证导出的每个icon是一个完整的正方形区域（不要溜边导出）且都留有安全区域；
2. 单击Make Exportable（制作导出项）在Sketch 中右侧工具栏底部。
3. 在Export小部件中，在格式下拉菜单中选择“SVG”。
4. 单击【已选中导出项】
5. 使用命名规范进行图标命名，存储SVG（命名规范下方有介绍）

2.图标命名

科学和高效的命名规则能够帮助我们快速定位到自己制作的图标，并且帮助开发缩短命名时间，加强团队写作效率。
命名规则：“icon_业务(或模块)_类型_功能_状态_颜色_数字”的格式进行命名。其中icon_业务(或模块)_类型，为必填项。
命名的格式建议为全英文，可在导出之前对图层进行命名，常用命名对照表如下所示。

完成图标后需要进行视觉检视，保证图标整体视觉统一。避免任何多余的线条或形状，保证尽可能整洁。检查所有线条是否都在标准框架内，合格后再加入项目资源库，这样避免多人同时修改而造成混乱，同时提升团队协作效率。一般可上传至iconfont进行统一维护。

五、图标维护

1.开发对图标库的应用

当我们在项目中上传图标后，开发会调用iconfont内生成的代码链接，生成相关的文件，具体运用时，使用具体的类名就可以了。

2.图标的修改

加入后期我们对图标进行了统一规范和重制作，项目中需要引用制作好的更加规范的图标，此时，我们应该怎么办呢？

我们不能采取直接将原来的图标在iconfont内删除的操作。

那我们具体应该如何做呢？只需要选中需要修改的图标，鼠标hover，点击「编辑」进行替换即可。