如何建立一套 UI 设计规范？

fruit

　　所谓规范，便是对成一定数量的可复用设计或者多设计师协作的设计项目进行量化和约束的东西。如果数量不到一个量级，或者设计师就你一个人，规范的作用力实则非常小，甚至繁琐程度会影响到正常的设计工作，所以分清你的使用场合，什么情况下需要用到规范？

　　为什么要做设计规范？
　　1.保证平台统一性统一性是交互设计的一个基本原则。在一个长期迭代多人合作的项目中，不同的设计师会负责不同的模块，每个人都有各自的思路，就有可能会对相同的元素做出了不同的方案，对于用户来说容易造成困惑，对品牌整体形象的建设也没有好处。所以对于较大型的产品，最好有设计规范来定义基本的元素，帮助众多设计师一起做出有统一性的产品。
　　2.提升团队工作效率对于同一个基本元素。如果没有设计规范，每个不同的设计师遇到这个元素时都可能重新设计一遍。但如果有了设计规范，只需设计一次，团队中任何一个设计师需要用的时候直接拿来用就可以了，也不需要再进行视觉和开发，极大的提升了效率。
　　3.在整理每个元素的规范时打磨细节体验。设计师都需要对其场景、状态考虑清楚。在整理的过程中，经常会发现一些以前没注意到的问题，并进行优化。把一个小元素单独拎出来仔细考量，写成一篇完整规范的过程，其实就是在打磨细节的过程。
　　1
　　制定一个计划
　　整理设计规范是一个涉及广周期长的项目，所以有一个清晰的计划可以帮助这个项目更好的推进。制定计划的流程如下图所示：

　　2
　　整理规范内容及分类
　　做之前先明确我们需要整理哪些内容，这些内容的分类是怎样的，下图是以网页设计规范为例，整理的内容及分类，初始时列举的内容可能不全，但没有关系，先把最基础的分类和内容定义好，后续发现有遗漏的内容再添加进去即可。

　　3
　　确定优先级与分工
　　一整套规范包含的内容非常的多，所以内容和分类整理好后，还需要确定每块内容的优先级和分工。从大的模块上说，首先应当确定整体的设计风格和框架，整体确定后才好确定细节的风格；其次的优先级最好是控件、组件、场景，因为控件组成组件，控 件和组件组成场景，所以先确定小的控件后，组件和场景更容易确定。至于分工，规范的制定是整个团队的事情，最好团队中的设计师都能够参与，互相分担工作量以提高规范整理的效率，也能够确保规范是在大家的讨论下制定而成，每个人都参与过并赞同结论。
　　4
　　确实规范展示形式
　　确定规范展示形式及推进流程其实确定规范展示形式也是确定规范目标用户，要确定规范是给谁看的，展示在网站上还是直接用文档承载，网站是否对公众开放等问题。确定了这些问题后就可以确定规范的详细程度、大体的展示形式。
　　5
　　制定规范的规范
　　规范本身要遵循什么规则，也是需要事先确定的，我认为包括两个部分，一是设计原则，二是输出物规范。
　　根据整个产品的目标用户、用户及产品目标可以确定我们的设计原则，所有的规范梳理都要遵循最基础的设计原则，以满足用户及产品需求，提升整体的体验。
　　规范一般有这三种输出物：
　　Style Guide
　　pdf格式，主要作用是指南。用于说明色相、字体、字号、分隔线、间距等这些影响到风格形式 的元素如何使用，如何建立层级，为了直观，需要适当的配上标注图，并说明界面中各组件的 作用和使用场景。组件无需标注，从Ul Kit的psd文件中提取即可。
　　UIKit
　　psd格式，主要作用是提取。设计师可直接拖拽至PS中使用。
　　标注图
　　png格式，主要作用是参考。Style Guide中不会包含方方面面场果的情况，如果设计师捉摸不 定逻辑上的一致性和合适的层级设定，可以参考更多以前交付给前端工程师的页面标注图。

　　最后，给大家发点福利，我们团队整理的UI设计规范手册一套：
　　百度网盘下载链接:　　https://pan.baidu.com/s/1pNkh8O7　　密码: k23j

　　喜欢就关注我们吧！