知道这三件事，UI设计新手就能掌握设计规范

提起”设计规范“这个词语，许多UI设计师都一脸懵逼，更不用说那些UI设计新手了。而这个在国人眼中看似“陌生”的词汇，却已在国外盛行已久。到底什么是设计规范呢？为什么要做设计规范？如何构建一套设计规范呢？本文将为UI设计新手一一解惑。

1.什么是设计规范？

既然已经了解了“设计规范”的含义，那么我们为什么要构建设计规范呢？仅仅是为了建立企业品牌形象？当然不是！对于不同的团队或企业来说，构建设计规范的原因各有不同。小编整理后归纳为以下这些方面：

减少设计错误 - 建立通用的设计细节标准，可以减少新手设计师出错的次数

减少辩论 - 无需浪费时间重新访问同一组件的设计决策

快速复用- 帮助组内设计师快速复用基础组件

方便协作 - 改善远程和在异地办公合作设计的窘境，实现快速协作

减少沟通成本 - 降低产品与开发的沟通成本

统一产品 - 帮助统一产品的UI风格及用户体验

专注于用户体验 - 使用统一的设计规范让设计师和产品经理有更多的精力专注于用户体验设计

有助产品优化 - 设计规范在沉淀优秀设计的同时，可以推进产品的持续优化

3. 如何构建一套设计规范？

设计规范对于团队和企业的重要性想必大家也有了一定的了解。那么作为一名UI设计新手，如何才能掌握构建设计规范的技巧？小编以摹客设计系统的使用为例，为各位设计新手作简单介绍。

（PS：小编用的这款是最近刚上线的摹客设计系统，个人感觉比较简单易操作，适合UI设计新手及设计师使用。）

构建思路：

a. 熟悉所设计的产品，确立设计规范方向

b. 在主要界面和栅格定稿后，梳理出主要模块

c. 建立基础控件的规范，并定义使用场景和样式

d. 规范字号、色值、图标尺寸等基础尺寸、间距、位置等信息

e. 建立设计 – 研发对照表

f. 建立设计资源输出规范

构建步骤：

Step 1： 建立设计资源库

打开设计系统平台，点击新建资源库，这里有自定义资源库和示例库可供选择。选择完毕后，设置资源库名称，点击创建。

Step 3：建立基础的资源规范

通过设计平台中的“+”按钮，可根据提示进行资源的添加。对于习惯使用Sketch的设计师来说，可以先在Sketch中对资源进行编辑，然后在打开Mockplus X 插件点击添加资源，即可与Mockplus设计平台的资源库实时同步。其他的资源建立方式相同，就不再一一赘述了。

（PS：有使用Mockplus这款原型工具的朋友,也可以在Mockplus中上传和应用设计资源。）

Step 5 ： 导出样式代码（让开发更懂你的设计）

点击设计平台的右上角箭头按钮，即可导出样式代码，目前该平台支持CSS, SCSS及LESS三种代码样式的导出。

<img src="http://cdn.mockplus.cn/image/2018/07/184f60fe-2b62-40f2-8c38-e613d7e92040.png" alt="导出样式代码" "="" style="display: inline; width: auto; height: auto !important;">

Step 6: 导出PDF/图片

在完成上述操作及设计资源的上传后，是时候展示你的成果了。点击“导出图片”或“PDF”，就可以随时随地共享你的设计规范了。

总结

随着设计行业的不断发展，设计规范扮演着越来越重要的角色，甚至成为UI设计师必须掌握的技能之一。作为一名UI设计新手，如何才能掌握设计规范？你必须了解什么是设计规范，明白设计规范的重要性以及如何构建它。掌握了这三件事，你就掌握了设计规范！