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

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

1.什么是设计规范？

为了确定国内设计师是否真的了解“设计规范”，小编特地在各大UI设计群中甩出了一个问题：“什么是设计规范？” 这些平日里活跃异常的群，竟陷入了一片沉寂。只有几个混迹江湖的老UI悠悠地给出回应，至于具体释义嘛，最后也没人说出个所以然来。

所以，到底什么是设计规范？

“设计系统提供了由个人，团队或企业编写和发布的视觉样式，组件和其他资源库。它为开发和设计之间建立了沟通的桥梁，以便在设计产品时更高效和更具凝聚力。” - Nathan Curtis

简而言之，设计系统就是对一定数量的可复用设计资源进行规范，在多设计师协作的设计项目进行量化和约束。从视觉的角度来说就是一个素材库，产品有什么样的视觉呈现和元素定义，都有可遵循的标准。

2.为什么要构建设计规范？

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

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

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

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

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

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

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

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

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

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

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

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

构建思路：

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

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

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

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

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

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

构建步骤：

Step 1： 建立设计资源库

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

Step 2 : 确定资源库的主要模块

进入资源库以后，根据自己的产品主要界面设计确定资源库的主要板块。常见的颜色，字体，Logo,组件和度量都可以进行添加规范，除此之外，这个平台还提供了图片，阴影等共9种设计资源。

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

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

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

Step 4： 共享设计资源库

在完成设计资源库后，可以打开分享功能与小伙伴共享成果；或者分享给有经验的设计师听取一些意见。点击设计平台右上角的分享按钮，设置分享密码后，勾选“启用此分享”；然后复制分享链接发送给你的小伙伴，输入查看密码即可观看你的设计规范了。

" id="
">

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

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

Step 6: 导出PDF/图片

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

总结

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