开发和设计沟通有多难？ - 你只差一个设计规范

在网络上或是我们的日常工作中，经常会看到设计师和开发人员两大阵营的争论。设计师可能经常会遇到这样一些情况，当开发人员对着设计稿想实现一些效果时，会提出一大堆的问题。如：这个按钮的颜色是什么呢？这个导航栏一级菜单的字体大小是多少呢？这两页的LOGO一样，大小尺寸有什么区别吗？等等。虽然两者时常会争论不休，但是，一款好的产品，绝对离不开设计师和开发两者的密切沟通配合。

ALT：开发与设计沟通

沟通？看起来简单，但在实际工作中并非易事。设计师与开发人员的沟通必须做到两点。一是让开发人员清晰的明白产品交互设计需求（可直接查看需求文档、原型图）；二是让开发人员能够严格执行界面设计元素（色彩、尺寸、字体、LOGO等），也就是我们常说的设计规范。

现在市场上能够解决需求文档（word、excel、MindManager、visio、纸等）和原型图（Axure、国产Mockplus、justinmind等）的工具很多，在之前的文章中（APP原型设计利器！【附】人人都是产品经理APP原型剖析）也有给大家推荐，在此不再赘述。然而，能够让我们自定义设计规范的工具屈指可数。

设计规范是什么？

小编的理解：能够对界面UI中的设计元素（如：Logo、配色、字体、排版等）资源进行管理和归纳的规范性文档。

设计规范的作用是什么？

设计规范能够为团队解决诸多问题，大大提高团队协作效率，其作用主要体现在如下方面：

1. 解决团队协作项目控件使用混乱

一个包含几十页甚至几百页的大型项目，一般都是团队协作一起完成。若没有制定的设计规范，想保持不同页面同一控件的统一性，几乎是不可能的。但是，如果在多人进行协作某一项目前，UI设计师制定一份设计规范，其他协作成员都遵循此规范，就可以有效的把控视觉统一性了，提高工作效率也就变得轻松多了。

ALT：控件使用混乱

2. 保持产品迭代过程中品牌一致性

在产品的后期维护过程中，少不了迭代。若没有制定的设计规范，在经过多次迭代后，我们很可能忘记了设计初衷。版本3中的LOGO样式可能和版本1相差越来越远。若有了设计规范，在后期迭代过程中就很容易保持初衷，良好的维护品牌形象。

ALT：品牌迭代

3. 大大提高开发人员工作效率，减少不必要的代码重复

有了设计规范，开发人员可快速调用一套代码，大大提高工作效率。

ALT：开发效率

设计规范系统有哪些？

今天，要给大家推荐的是国内首个设计系统-摹客设计系统。也许很多人都还没有听说过，但是我相信做产品，做设计的朋友一定听说过国产原型设计神器-Mockplus。这两者有什么关系吗？当然，这是由一家公司开发的，在设计系统里面制定的规范可直接应用到原型设计中。

有没有感觉很牛？好了，废话不多说，下面带领大家一起来认识一下这个设计系统，让你先睹为快。

目前摹客设计系统可以对界面UI中的Logo、标准色、字体、段落样式、图标、图片、组件、度量、阴影等资源进行管理和归纳。

制定规范

进入设计系统后，新建空白库，可根据自己团队需求快速对Logo、标准色、字体、图标、图片、组件等设计规范。

ALT：设计规范之LOGO

ALT：设计规范之品牌色

分享规范

当你完成设计规范后，可一键分享给其它小伙伴。

ALT：设计规范分享

分享样例：https://ds.mockplus.cn/lib/5b287538e24d4d34a9ffa613/preview

导出规范

在设计系统中，可以快速地将自己的设计库导出为规范图和样式代码。导出的样式代码可直接投入开发。

ALT：设计规范导出

完整文档下载：https://i.loli.net/2018/06/21/5b2b5317f1271.png

与Mockplus及Sketch对接

设计规范制定好后，最终的目的是要快速应用规范。打开Mockplus或Sketch中的设计系统插件，可获取设计系统中设计资源。

通过拖拽的方式将Logo、标准字、图标、图片和组件添加到Sketch或Mockplus中。

可通过点击的方式应用标准字、标准色资源。

ALT：设计规范应用

资源上传

从Mockplus和Sketch中制作好设计资源后，可快速上传到设计系统。

ALT：设计资源上传

怎么样？是不是觉得如果有了设计规范，与开发人员的沟通就会变得轻松很多呢？我们只需将导出的设计规范图发给开发人员，让他们直接看文档就好了。

结语

开发和设计沟通有多难？归根结底，你只差了一个设计规范。相信大家使用摹客设计系统后，一定会大大提高设计师和开发的协作沟通效率。赶紧来试试吧！