用Sketch制作中后台Web设计规范

去年的时候，我回答了一个问题《如何建立一套UI设计规范？》，并且发表了自己进入公司UED以后发布的第一个设计规范，没想到该回答获得了很多小伙伴的认可与关注，所以我开始更加深入地研究设计规范。

另外由于在2016年3月份开始，我们的UED部门全线采用Sketch进行UI设计工作，所以重新制作一份基于Sketch的UI设计规范组件变得刻不容缓。

由于我们新的设计规范主要用于搭建面向企业级的中后台Web产品，所以相对而言通用性更强，同时，我们也结合该设计规范推出了相对应的Axure元件库以及前端框架组件，使得产品原型、交互设计、UI设计、前端开发之间的协作损耗大大降低，并且尽可能保证了产品产出质量，并且通过不断更新迭代设计规范的方式优化产品。

在设计新设计规范的时候，我参考了大量优秀的设计规范，其中包括Material Design、IOS HIG、Ant Design、Salesforce Design等等，并且结合公司现有业务与产品的特殊性，最后梳理出了现在的这套Codeages Design，并且开始运用到我们自己的产品中。

为什么要用Sketch制作设计规范？

1、Sketch专门为UI设计量身定做，所以制作UI相关组件的时候相当快速便捷。

2、Sketch的全局Style样式能够做到变化一处色彩，就能统一整套设计规范的色彩，这对于我们需要针对不同项目采用不同色彩的设计规范而言非常方便快捷。

3、Sketch的Symbol能够真正将设计元素“组件化”，通过在项目中快速调用组件大大提高设计效率，并且由于组件单位基本与前端组件和产品原型组件保持一致，所以能够大大提高产品设计、交互设计、UI设计、前端开发的协作效率，大幅度减少沟通成本。

4、结合Sketch Measure插件，能够快速将设计规范导出，不需要任何手动标注就能够让前端开发实时查看元素属性，非常方便。

5、除此之外，将Sketch与Flinto相结合，能够快速将设计稿变成轻量化的交互产出物，目前我也在等Craft插件即将推出的Prototype功能，能够让Sketch像Adobe XD一样直接在工具中进行部分交互处理。

制作设计规范需要注意什么？

1、偏向中后台的设计规范需要有组件化概念，合理采用Symbol功能，可以大大提高复用性，也让原型设计和前端组件化有参考标准。

2、所有图标设计在同样的盒模型中，保证图标尺寸的一致性（参考Material Design的Icon设计标准）。

3、设定文字大小层级，以及默认文字色值／半透明度。

4、除了Paragraph里的文字以外，其他文字行高（line-height）统一设定为1倍，避免设计过程中不断换算文字行高。

5、按照Web字重（font-weight）与设计软件中字重的比较，Normal约等于400字重，Bold约等于700字重。

6、通过调整Sketch中相关元素的Resizing属性，让Symbol的复用更为合理。