最近在绘制负责的一个B端产品整套图标，约110个。在绘制图标、与前端交接的过程中，发现一些问题，现总结出来与大家分享。

1. 产品中图标不规范存在的问题

在绘制自己的图标库之前，产品中使用的图标都是在iconfont中找。这种做法短期看来效率高，没什么问题。但是当产品慢慢健壮后，使用的图标越来越多，会发现一系列问题。

1.1 图标类型不一致

有的是线条型，有的是填充型。

1.2 图标圆角不一致

有的边角是直角90°型，有的边角是圆角弧度型并且弧度大小不一样。

1.3图标尺寸大小问题

Iconfont上icon大小与外框比例不统一，前端引用时要单独调整大小，影响开发效率。

1.4 图标线条粗细不一致

1.5 图标颜色色值不统一

1.6 图标命名不规范问题

这些问题不解决，不仅会给前端开发增加工作量，且整个产品看起来不专业。特别在一个页面同时出现多个图标时，这种影响尤其明显。

图1：未规范化的产品图标

2. 确定图标规范

根据上述总结的问题，整理出在图标绘制时需要注意的事项。并形成关于该产品的图标规范。

2.1图标类型：线型、面型

因为某些特殊场景的需要，有些图标提供线型、面积型2种样式，如提示信息图标；有些图标只有线型一种，如常用图标编辑

2.2 图标的圆角半径

绘制图标使用的是AI，模板为iconfont官网下载。主要线条宽度定义为64排序，经多次调试，最终将矩形圆角半径定义为15px。

2.3 图标大小及外框大小

图标外框大小统一为iconfont官方样例大小，1024*1024px。圆形图标直径为896px，长方形长宽为896*830px，正方形边长为830px。

图2：AI绘制图标网格参考线

2.4 点、线的大小

主要构图的线条宽度为64px（主要构图将会构成icon图标的主要形状）。

图标内部细节的线条宽度为52px。

细节元素如圆点和正方形，用90px作为直径或边长。

2.5 图标颜色

图标颜色统一为#000000。

2.6 图标命名规则

该规范紧适用于当前产品，如果是公司整体的命名规范，还需区分产品线及模块。icon-【circle圆、square方，可选】-【action动词，可选】-【图标名称】-【line，fill可选】

命名规则解析：

【circle圆、square方，可选】此项选填，是指图标的外形是什么形状，目前较常见的是圆形和方形，有些图标可能既不是圆形，也不是方形，根据实际情况而定。

【action动词，可选】此项选填，是指图标的含义，图标中多数是一个动作，如下载。

【图标名称】此项必填，就是图标含义的文字表征。

【line，fill可选】此项选填，如果一个图标有线型和面积型2种形式，则其他命名都相同，最后以line、fill区分。

图3：命名规则图示

3.  工具使用注意事项（使用AI绘制，上传至iconfont）

3.1 轮廓化描边

为保证导出的svg文件可以正常上传至iconfont，所有元素画完后，必须轮廓化描边（步骤：效果-路径-轮廓化描边）

3.2 图标有重合路径的处理

绘制图标时，我们一般使用简单的几何图形拼接，有时几何图形之间会有重叠。如果重叠图形不处理，这样上传iconfont是一切正常的，但是前端引用时就会出现问题；如果将重合路径的图形使用路径查找器工具组合后，问题就会解决。

图4：图标有重合路径时，路径处理前后对比

3.3 巧用替换工具

如果发现上传的图标有问题，需要修改。一般都会直接删除之前的图标，重新上传新图标。这样做在iconfont上看不出什么区别，无非就是图标位置换了下，但是对于前端开发来说，需要更改链接、改代码，比较麻烦。

而如果我们使用编辑图标-点击上传替换图标，前端只需要替换链接，不用修改代码，减少前端的工作量。

图5：巧用替换工具

参考：图标设计的三点最基本规范 https://www.25xt.com/iconweb/17892.html

封面：转载自网络侵删