关键词：
提起”设计规范“这个词语，许多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设计新手，如何才能掌握设计规范？你必须了解什么是设计规范，明白设计规范的重要性以及如何构建它。掌握了这三件事，你就掌握了设计规范！
微信小程序：开发之前要知道的三件事
...。为了更好地上手这门开发语言，下面这三件事你一定要知道：语言与文件微信小程序来发与其他平台开发的最大差 查看详情
微信小程序：开发之前要知道的三件事
...。为了更好地上手这门开发语言，下面这三件事你一定要知道：语言与文件微信小程序来发与其他平台开发的最大差异在于：微信使用 查看详情
微信小程序：开发之前要知道的三件事
...。为了更好地上手这门开发语言，下面这三件事你一定要知道：语言与文件微信小程序来发与其他平台开发的最大差异在于：微信使用 查看详情
分享4个新手快速晋升ui设计师的小技巧
很多学设计的小伙伴在入门的时候不知道从何入手。本文就为大家总结一下UI设计学习的的4个技巧，相信对初学者一定非常有用。学习ui设计的小技巧之一：软件学习UI设计要学的东西很多，软件是基础的东西，要想做出好的UI设... 查看详情
ui设计规范？
提前设计好使用规范或在设计过程中整理一套属于界面的设计规范小学以下前端知识，掌握专业规范词汇，便于与产品、前端层沟通概念，灵感，方法和工具概念：设计互联网产品，StyleGuide/PatternLibrary和纯粹的Specification各具不... 查看详情
分享适合新手小白学习的ui设计详细学习课程资料
Ui设计师就业市场前景及薪资很可观，而且现在市场上对于ui设计师的人才需求也很大，所以，现在越来越多的人看好这一行业，纷纷投入到ui设计的学习中来，那么想新手想要学好ui设计，以下这份完整的ui设计学习路线图... 查看详情
手机ui设计的基本规范
大家都知道手机采用的：一个是苹果的iOS系统，另一个就是谷歌公司的安卓系统。华为的鸿蒙系统虽然早就上线，但是还没有真正运用在手机移动端上，小阿在这里期待着，希望有一天也能写“华为‘鸿蒙系统’的界面尺寸规范... 查看详情
高级ui设计培训都有哪些
想要学习好UI设计，不仅仅只是将界面设计好就行，还要考虑到和用户群体的交互，考虑到用户体验等多方面，还有学习html、div、css代码等中软卓越高级UI设计培训课程包括：课程一阶段UI手绘【15天】■学习内容：UI手绘■学习... 查看详情
监听者模式
...亚军，233)，然后嘞，有三个人分别想做三件事，但是，这三件事只有当前面那个人拿了冠军，这三件事才会被做；那么，怎么办呢？用监听者模式的思想来解决这件事 查看详情
摄影新手最想知道的10件事(转)
摄影新手最想知道的10件事 原文地址 http://www.fsbus.com/danfanrumen/25114.html作为摄影新手面对摄影难免有许多疑问焦距、光圈、景深、快门如何把控？怎么拍才不跑焦？如何掌握构图、用光？一天中最佳拍摄时间是什么时候？... 查看详情
ui设计需要学习哪些软件
大家都知道创意思维对于设计师的重要性，却也不能忽略基本功和工具对于设计师的必要性。设计的基本功只有坚持不断的负重训练，扎实美术功底，才能在日后的商业实战中轻松驾驭各种风格。那设计工具也是一样，学习工具... 查看详情
新手学习seo要做的七件事是什么？
...但是在学习过程中，如果你想掌握SEO，那么我们要做的几件事。1、学习SEO需要持之以恒的精神。为什么？学习SEO要有持之以恒的精神?SEO是一个长期的工作，因为它是与搜索引擎这个工作密切相关，搜索引擎收录站点，将继续增... 查看详情
网页ui视觉设计规范
网页ui视觉设计规范
来自为知笔记(Wiz) 查看详情
ui设计师应掌握的知识体系以及职业规划！
随着移动互联网的迅猛发展，使得移动产品设计人员急缺。由于高薪酬，很多其他行业设计师转行做UI设计。 那么到底什么是UI设计？ 做UI设计需要掌握哪些知识体系？ 如何去学习？ 今后如何做职业规划？ 是很多新人常会遇到... 查看详情
视觉设计（appui）规范文档怎么写？
...得应该出个文档，看完之后能够马上上手的那种，现在才知道原来是叫做视觉设计规范文档注明使用版本、设计操作系统、与开发时要说明的1.指导分工协作2.避免重复工作3.视觉统一，形象加分4.让思路更加清晰，工作更加高效... 查看详情
ui设计流行趋势，对颜色的探讨
设计风向转换的趋势越来越短，在设计圈中，流行设计的跟新换代更是快。在设计时间越来越短的今天，在经理领导不断催促的时下，如何准确的把握当下的流行趋势，如何在设计之初就能定好设计的基调。这对于还是刚入设计... 查看详情
零基础学ui设计教学教你从0基础建立设计规范
...结出很多心得，本文将分为3个部分，阐述如何从0到1建立设计规范。目录：一、如何确定内容，规范里要写什么二、如何写三、如何推动规范落地一、如何确定内容？这里我总结了三步：1）确定目标用户、用户目标、设计目标... 查看详情