建设设计图标规范 第1篇
推荐 Ant Design 出品的 Sketch 插件 Kitchen，可以在 「图标」中拖拽出来使用，另外还有「图表生成」等提效神器。
Kitchen 插件下载：
用这个插件的好处是保证图标大小和前端调用是一致的，如果是自己去iconfont下载图标的留白间距默认是没有的。并且此插件还有很多其他好用的功能，这里就不一一细说，自己可以去体验一下哦~~
图标的设计在UI设计中是很容被忽略的，如果公司没有开展完整的设计体系建设，很多UI设计师可能对这块都不是很清楚，更多的是只能保证自己个人在绘制时是统一的，但是当团队扩大的时候，图标的使用和一致性变得尤为重要，建立图标绘制规范和使用规范能很好的提高设计效率和保证一致性。
建设设计图标规范 第2篇
科学和高效的命名规则能够帮助我们快速定位到自己制作的图标，加强团队效率。
可将图标分类，命名规范如以下规则： 「默认状态」：类别/图标名 「状态」：类别/图标名/状态
根据平台应用场景，icon绘制分为【线条 & 填充】两种形式，选中/强调状态下使用实心样式icon，使信息展示更明确。
线性图标是通过线条来表现物体的轮廓。
优点：具有辨识度高，清晰，简约易识别等有点，可以减少视觉干扰，让用户集中在产品核心功能上。不同线条粗细图标带来的视觉感受也不同，细线显得精致，粗线显得饱满。
缺点：线性图标的创作空间较少，太复杂的线性图标对识别性产生较大的困扰。
面形图标是以面为主要表现形式的图标，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感。
优点：具有表意能力强，视觉突出，情绪感强，创作空间大等优点。面型图标的视觉面积较大，具有强烈的视觉表现力，短时间内更加容易识别；
缺点：面性图标在页面中不可过多出现，否则会造成页面臃肿，难分主次，用户视觉疲劳。
1.优化基础网格：优化图标输出的尺寸和视觉基准区域；
2.优化icon细节规范：绘制一个符合业务风格的图标，将图标中的细节元素（圆角、笔画末端等）进行分解，并在规范中制定细节元素的使用法则；如下：
建设设计图标规范 第3篇
准确： 设计造型准确的图标（尽量保持偶数原则，去小数点）；选择表意准确的图标，不对用户的认知造成困扰。
简单： 在表意清晰准确的基础上，尽量保持图形的简洁，不做多余的修饰。
节奏： 图标保持一定的秩序。
愉悦： 赋予适度的情感。
画板：图标我们统一基于 32x32 也就是16的倍数的画板绘制，缩放比例后按照四舍五入微调像素。
出血位：画板预留 2px 出血位，在绘制区域进行绘制，预防某些造型的图标在具体应用中出现边缘被切掉的风险，特殊形状图标的部分笔画可以超出绘制区域，不强制限制在安全区域内，多数的图标在设计中我们都不建议超过这个区域。
根据形状几何的视觉差特性衍生出来的keyline线，包含长方形、正方形、圆形。通过keyline线我们可以使不同形状的图标保持一致的视觉比例，注意：如遇特殊形状则不强制要求按照以下四种图形大小绘制，可做适当的调整。
图标的颜色可根据页面的整体色彩比例和信息强调的层级来搭配。可使用品牌色、中立色和功能色，详见颜色规范文档。
我们对于线宽的定义，在视觉效果上看起来应该精致并且舒适，不能太过粗狂也不能过于轻盈，所以我们定义线宽为2px。
当我们使用描边画线宽的时候，建议使用内描边，更加符合keyline线的规范，并且在我们转化为面性图标的时候能保持图标大小一致。
由于我们是后台系统的图标，所以对于圆角的定义，在视觉效果上令图标看起来应该更加“坚硬和理性”，但又不至于太过尖锐，所以我们选择圆角为1px。
例如：当基础图形为满矩形时候，圆角的规格采取的1px，图标内部空间的圆角则保持直角的处理方式；当基础图形为很小的矩形时候，采用直角。
内结构与外部结构间距不小于线宽 ，内部元素之前间距不小于 1/2 的线宽 。
如图（二）类型图标时，外框与在断口的元素间距不小于1/2线宽，并且断口里元素的高度大概为整个图标高度的1/2，宽度不小于整个图标宽度的1/2。
如图（三）类型图标时，外框与在断口的元素间距不小于线宽。
要保持整套图标在视觉重量上的平衡，是一件不太容易的事并且是一件需要大量实践的工作。图标的造型、线条摆放的角度甚至是留白空间等，都是会影响视觉平衡的因素，因此需要设计师适时的通过对基本元素规格上的微调来达到图标的平衡感。
弯曲的线条会比竖直的线条看起来细 因此在圆形的外边框上我们会适当的对 2px 的规格进行的微调。
倾斜的线条也会比竖直的线条看起来细 因此倾斜的线条也会对 2px 的规格进行的微调。
在完成图标设计后，保持图形的整洁，图层结构的清晰，也是构筑图标体系必不可少的部分。
1、删掉多余的锚点，保持图形的整洁。
2、轮廓化、合并图形，便于输出。
3、对小数点以及奇数进行最后一遍的走查与修正。
4、整洁的图层管理。