知道这三件事，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： 共享设计资源库

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

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

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

Step 6: 导出PDF/图片

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

总结

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