背景：

最近在整理公司的UI组件规范，发现目前的规范存在的问题是：只是把各种场景组件统一整合到一块了，但没有针对多种形式做统一的整合和优化，没有根据场景归纳分类及定义说明。导致一种场景下可能有多种不同的形式，在使用的时候可能还是不够统一，通用性不强。所以决定统一整理优化一版。在优化之前首先我们要弄清楚做组件、规范的意义是什么？整个流程是怎样的？根据这些问题我们展开分析思考，自己把这些脉络问题称为“4W1H”：

1、规范的定义和范围（WHAT）

2、什么是组件化思维

3、为什么要做规范（WHY）

4、规范什么时候做（WHEN）

5、规范由谁来做（WHO）

6、规范怎么做（HOW）

7、规范包含的内容

1、规范的定义和范围-WHAT

规范：

字面意思，规：尺规；范：模具。这两者分别是对物、料的约束器具，合用为“规范”，拓展成为对思维和行为的约束力量。按照既定标准、规则的要求进行操作，使某一行为或活动达到或超越规定的标准。（来自百度百科）

相对应我对设计规范的理解是：设计规范是对设计工作的一种制约标准、是一种设计原则依据，传递品牌感和价值感，具有良好的统一性、通用性和可延展性。

2、什么是组件化思维

1）什么是组件？

传统含义为：在电子或机械设备中组装在一起形成一个功能单元的一组元件（构件或元件的零件组合）

在设计中的含义为：页面是由不同的功能模块组合而成，而功能模块是由不同的组件所构成，组件是由不同的元素组成，元素（件）是构成页面的最小单位。

下面以乐高为例，以不同的零件（元素）组合成组件，由不同的组件拼成不同的物件（功能模块），由不同的物件组合成成品（页面/产品）

乐高模式

2）组件化思维

组件是规范中的一部分。

组件：是经过设计元素解藕，具有标准范围和可服务场景的基本模块，“组”是设计元素的组合方式（对应组件），“件”是由不同的元件组成（对应单个控件）

组件化设计模式：是把产品需求场景、视觉表达模块化，每个组件以复用为目的，使其具备独立的完整解决方案，通过标准的规范组合方式来构建整个设计方案，从而提升设计效能。

页面组成

3、为什么要做规范-WHY

在做任何事情之前，我们都应该明确 “为什么要做这件事？”，做项目需求时也一样，做之前都应弄清楚为什么要做？需求背景是什么？想要达到什么样的目的？等等...

整理规范也是一样，做之前先要弄清楚为什么要做规范？只有清楚了做一件事的价值和意义后才能有助于方案的落地与实施，大致总结了三个做规范的理由：

1、多个设计师协作，页面风格不统一、交互方式不统一、样式混乱

2、多个前端开发人员参与同一产品项目的开发，同样的样式，各写一套，根据自己喜好的写法来，导致大量的代码沉余。

3、随着公司需求的日益的扩展，设计师和开发同学很大一部分时间和精力耗费在重复的模块样式设计和开发中，效率低且无价值。

1）规范的意义和作用：

保证平台统一性

统一性是交互设计的一个基本原则，在一个长期迭代、多人合作的项目中，不同的设计师会负责不同的模块，每个人都有自己的设计方法及设计思维、同时也有自己的设计喜好和风格倾向。这就导致会相同的元素和相同的功能模块做出不同的设计方案，对于用户来说容易造成困扰，也不利于品牌整体形象的建设，所以制定统一的规范，来约束设计行为，能有效帮助设计师们做出具有统一性的产品。

不同的产品模块，统一的设计形式和交互规则在用户心里能建立起有效的心智模型，从而能让用户更有效率的完成产品任务。

提升团队工作效率

对于同一个元素，设计师需要设计一次形式，前端开发同学需要开发一次，每个不同的设计师遇到这个元素时都要重新设计一遍，不同的前端开发同学都需要开发一次，日复一日，会产生大量重复性的工作。

如果组件规范化后，同一个元素、同一个组件、同一个功能模块只需要设计一次，开发一次，设计师组件规范共享，有需要的直接取用源文件的设计样式。开发同学根据设计样式和规范定义为公共组件，不同开发同学在遇到相同的模块时直接调用公共组件代码。这样就不需要重复视觉设计和开发了，极大的提升效率的同时，也避免了因此产生的代码沉余问题。

统一设计思维，避免迭代中走样

为其他参与到产品设计的设计师或新加入的设计师提供设计方向的参考及指导，能使之快速的了解整体产品风格和思路，以最小成本快速产出。

便于产品的优化、升级

某一阶段后，基于某些主动或被动的原因，需要整体或局部优化时，可基于之前提取出的元素模块进行重新思考整理，使之更便于细节的打磨和体验的升级。

规范的意义和作用

4、规范什么时候做-WHEN

从产品生命周期来设定最佳时机：

探索期

产品初创期，产品模型试错阶段，是典型的业务导向阶段，虽说最理想的情况是在开发前就把设计准则、风格、规范都定义清楚，但在实际项目中很少能有条件这样做。小步快跑，产品在不断试错的同时设计部分也可能是在不断试错，所以这个阶段不适合做规范。

——————除非产品初创时期就有了明确的产品风格定位，这有两种可能性：1、设计主导者对产品风格有着独特的见解和趋势的把控。2、参考、借鉴某些已经成熟的相似业务模式的主流产品，快速完成整体设计。

成长期

这个阶段业务模型组件稳定下来，产品定位和品牌形象都比较确定了，产品进入快速成长阶段；需要多人参与到设计或开发中，统一性和效率问题逐渐显现出来，这个时候就需要定义和整理设计规范了。

成熟期

产品成长到一定阶段，用户数量和增长率逐步放缓，进入平稳阶段。这个阶段产品诉求是精细化运营、降低成本、追求利益最大化，同时也是需要优化用户体验的阶段。

衰退期（本文不讨论）

产品生命周期

5、规范有谁来做？-WHO

一般由较资深的设计师来主导、把控整体进度和效果、其他设计师参与

由于一般都在优先支持日常产品需求的情况下抽时间来做规范相关的整理，避免无限期拖延，应做好模块划分和时间计划，模块责任化，当作一个项目来做，尽量每周固定时间做复盘和讨论，期间有疑问货其他的问题及时发现和沟通解决。作为主导者应把控整体项目进度和质量，必要时进行跨部门沟通。

后续需要跟前端开发同学对接、立项，把组件代码化、线上化。

————后续可以单独把该模块拉出进行详细叨叨。

6、规范怎么做-HOW

1）、整理规范内容及分类：

做之前先明确要整理哪些内容，这些内容的分类是怎样的，下图是之前做web端（移动端类似）后台系统规范时列出的内容及分类（初始的时列出的额内容可能不全，没有关系，先把基础的分类和内容定义好，后续发现有遗漏的内容再迭代即可）

web规范内容

2）、确定优先级顺序

一整套规范包含的内容非常的多，所以内容和分类整理好后，还需要确定没块内容的优先级，从局部到整体，一步一步迭代。要注意可实现性、通用性和可延展性。

整理顺序

3）、完善及迭代

设计规范做完后要确保还原度，推动落地，不断收集遗漏的部分补充进规范中，发现问题并不断优化。需要持续的维护及更新规范文档。

产品一直在迭代，或增加新的业务场景，或改版，都需要不断迭代设计；这时候就需要对旧的规范进行模块完善、更新优化；不友好的、通用性不强的也需要阶段性的进行优化调整。

7、单个规范的制作流程

制作流程：

1）、收集场景

以弹框为例，弹框可能出现的地方多，类型也很多；在没有规范之间，不同的产品经理加上不同的业务场景下，应用中可能会出现各种各样的对话框。加上每个设计师对设计的不同理解，做出的样式也是千差万别；所以第一步，就是把产品中所有出现过的对话框都收集出来。

2）、归纳分类

场景手机完后，就要对收集出来的对话框按照使用场景进行分类，归纳分类的作用在于：可以把众多的场景收拢成几个典型的种类，只对典型种类进行定义和详细描述就可以很好的给使用者起到指导作用；同时归类之后减少了规范对象的种类，更好的保证产品中的一致性。

3）、给出定义

分类确定好后就可以开始给出定义了，首先给出整个规范对象的定义，例如对话框是什么？在什么场景下使用等说明。除了整体的定义外，每个类型也需要有明确的定义说明，这样才能有效的帮助使用者理解每种类型的差别和使用方式、才能明确什么场景下该使用什么类型等。

4）、优化方案

分类和定义都确定后，需要对各种类型进行优化输出最终的规则；对于一些细节规则可以跟进实际使用场景，有歧义或不同意见的地方把问题列出，结合使用场景及通用性进行讨论，最后敲定最终方案。

单个规范制作流程

单个规范包含内容：

1）设计原则

设计理念或设计所依据的准则，如：按钮的设计原则是考虑各种使用状态和场景的同时，做到及时给予用户使用反馈）

2）不同状态展示

是规范中最重要的部分，通过这种类型及交互状态的展示，直观的表达使用方式

3）使用场景

各种形式在什么样的业务场景下使用，及加以描述说明

4）示例说明

结合使用场景给出具体示例，更能让使用者直观的明确使用方式

总结：

在做事情之前，我们只有弄清楚了问题、掌握做事情的方法、明确目标和意义、设定实施计划，继而展开执行。这样才能更有节奏的落地实施，结果也就更符合预期。而不是上来就盲目的一顿操作，走一步算一步。思考和整体规划更有利于项目的实施和结果的达成。

————篇幅有点长，感谢用心看完，希望能对你有些许的帮助！