B端系统图标绘制规范和使用指南

前言

图标是 UI 设计中必不可少的组成。通常我们理解图标设计的含义，是将某个概念转换成清晰易读的图形，从而降低用户的理解成本，提升界面的美观度。

在后台系统设计中，图标在界面设计的诸多元素中往往只占了很小的比重，在调用时也会被缩到比设计稿小很多倍的尺寸，加上设计师在平时可以快速从各个平台获取素材，所以一套美观、一致、易用、便于延展的图标体系往往会被不小心忽略掉。

那么FS后台系统图标体系，一方面在体验方面保证图标基因元素的一致性，另一方面为设计提效保驾护航。

一、绘制规范

1、设计原则

准确： 设计造型准确的图标（尽量保持偶数原则，去小数点）；选择表意准确的图标，不对用户的认知造成困扰。

简单： 在表意清晰准确的基础上，尽量保持图形的简洁，不做多余的修饰。

节奏： 图标保持一定的秩序。

愉悦： 赋予适度的情感。

2、设计规格

画板：图标我们统一基于 32x32 也就是16的倍数的画板绘制，缩放比例后按照四舍五入微调像素。

出血位：画板预留 2px 出血位，在绘制区域进行绘制，预防某些造型的图标在具体应用中出现边缘被切掉的风险，特殊形状图标的部分笔画可以超出绘制区域，不强制限制在安全区域内，多数的图标在设计中我们都不建议超过这个区域。

3.轮廓线与模版

根据形状几何的视觉差特性衍生出来的keyline线，包含长方形、正方形、圆形。通过keyline线我们可以使不同形状的图标保持一致的视觉比例，注意：如遇特殊形状则不强制要求按照以下四种图形大小绘制，可做适当的调整。

4.参数以及指引

（1）颜色

图标的颜色可根据页面的整体色彩比例和信息强调的层级来搭配。可使用品牌色、中立色和功能色，详见颜色规范文档。

（2）线宽

我们对于线宽的定义，在视觉效果上看起来应该精致并且舒适，不能太过粗狂也不能过于轻盈，所以我们定义线宽为2px。

当我们使用描边画线宽的时候，建议使用内描边，更加符合keyline线的规范，并且在我们转化为面性图标的时候能保持图标大小一致。

（3）圆角

由于我们是后台系统的图标，所以对于圆角的定义，在视觉效果上令图标看起来应该更加“坚硬和理性”，但又不至于太过尖锐，所以我们选择圆角为1px。

例如：当基础图形为满矩形时候，圆角的规格采取的1px，图标内部空间的圆角则保持直角的处理方式；当基础图形为很小的矩形时候，采用直角。

（4）解剖细节

内结构与外部结构间距不小于线宽 ，内部元素之前间距不小于 1/2 的线宽 。

如图（二）类型图标时，外框与在断口的元素间距不小于1/2线宽，并且断口里元素的高度大概为整个图标高度的1/2，宽度不小于整个图标宽度的1/2。

如图（三）类型图标时，外框与在断口的元素间距不小于线宽。

（5）视觉平衡

要保持整套图标在视觉重量上的平衡，是一件不太容易的事并且是一件需要大量实践的工作。图标的造型、线条摆放的角度甚至是留白空间等，都是会影响视觉平衡的因素，因此需要设计师适时的通过对基本元素规格上的微调来达到图标的平衡感。

弯曲的线条会比竖直的线条看起来细 因此在圆形的外边框上我们会适当的对 2px 的规格进行0.2px的微调。

倾斜的线条也会比竖直的线条看起来细 因此倾斜的线条也会对 2px 的规格进行0.2px的微调。

5.图标整理

在完成图标设计后，保持图形的整洁，图层结构的清晰，也是构筑图标体系必不可少的部分。

1、删掉多余的锚点，保持图形的整洁。

2、轮廓化、合并图形，便于输出。

3、对小数点以及奇数进行最后一遍的走查与修正。

4、整洁的图层管理。

二、导出上传到iconfont

1.导出

在整理好图标后，统一针对画板导出svg格式，注意：导出时把keyline线和网格关闭。

2.上传

三、如何在sketch中使用

推荐 Ant Design 出品的 Sketch 插件 Kitchen，可以在 「图标」中拖拽出来使用，另外还有「图表生成」等提效神器。

Kitchen 插件下载：https://kitchen.alipay.com/

用这个插件的好处是保证图标大小和前端调用是一致的，如果是自己去iconfont下载图标的留白间距默认是没有的。并且此插件还有很多其他好用的功能，这里就不一一细说，自己可以去体验一下哦~~

小结

图标的设计在UI设计中是很容被忽略的，如果公司没有开展完整的设计体系建设，很多UI设计师可能对这块都不是很清楚，更多的是只能保证自己个人在绘制时是统一的，但是当团队扩大的时候，图标的使用和一致性变得尤为重要，建立图标绘制规范和使用规范能很好的提高设计效率和保证一致性。

作者：设计恐慌症
本文由 @设计恐慌症 原创发布。未经许可，禁止转载。