第300期：【产品规范】产品规范制定详解

推荐理由：适合人群：设计师。阅读耗时：字数4343，约12.5分钟。设计产出的最后一个阶段也是最为重要的阶段就是产品规范，他是承上启下的作用，同时也是必不可少的环节，尤其是跨部门和跨项目，这就非常重要，透过一个小小的规范，就能窥见一个企业的服务能力。有需要产品跨越1.0版欢迎找我。

1. 如何理解交互规范

设计规范对 产品设计、研发开发、用户使用都有着重要的指导作用：

产品设计：保障产品内不同模块的设计一致性，同时提高不同设计师间的设计、协作效率

研发开发：通过定义的标准规范，提高流程、组件的复用率，提高整体开发效率

用户使用：让用户能够在产品全局感受到统一且完整的体验，降低使用成本和学习难度。

从用户体验要素来看，视觉主要是在表现层,框架层,进行规范的统一，主要包括：形、色、字、构、质、动 六个层面。

而交互角度相对抽象，主要针对于产品的结构层，框架层，入手，定义统一的交互规范，指导页面、流程搭建和组件使用规则。包括：全局原则、页面布局、通用流程、标准组件、文案规范。

2. 不同阶段应该定义哪些交互规范？

产品探索初期：

该阶段的产品核心目标是验证产品或商业模型,，业务需求都是小步快跑、频繁迭代。产品处于从0到1的野蛮生长状态，存在着“先满足功能，再优化体验”的情况。

搭建目的：通过定义原则，梳理关键页面和流程，搭建基本的规范框架。既让团队对产品有统一的设计价值观和认知判断；从页面到流程，又能对应设计参照标准。

搭建范围：全局原则，页面布局，通用流程

产品稳定发展期：

该阶段的产品基本形态已稳定，也形成了初步的模型结构。后续迭代是在现有结构的基础上，进行增加或优化功能。

搭建目的：通过回溯整理过往设计，沉淀优化成完整的交互规范。再根据规范统一产品体验，进一步优化流程和效率， 让整个产品体验达到相对稳定的状态。

搭建范围：全局原则，页面布局，通用流程，标准组件，文案规范。

3. 如何定义,交互规范

3.1 定义交互规范的原则

在定义交互规范时，有三点原则：

原则一：保持规范的业务性。设计规范既要贴合业务场景归纳完整，同时又要避免凭空定义脱离实际。故我们定义时要代入业务规划，尽量富有前瞻性，这样定义的规范不仅能覆盖当前需要，同时后续也能更好地迭代。

原则二：保持规范的专注性。有的放矢，明确内容优先级，避免盲目追求大而全和形式主义。对于优先级高的关键内容重点描述；优先级低的内容可简要描述，避免事无巨细降低效率。

原则三：保持规范的生长性。设计规范不是一成不变，而是跟随业务发展不断迭代完善的，所以需要阶段性的回顾规范。

在找到自己当前所属的产品阶段、明确要建立哪些设计规范后，具体应该如何进行落地执行呢？建议从以下4个步骤入手。

3.2 第一步：定义规范分类

一个完整的交互规范分为：全局原则,页面布局,通用流程,标准组件,文案规范,五个维度，但每个维度具体含有哪些内容，都是不一样的。

通用的做法有两种：

方式一：整理业务场景下不同的页面、流程等，并进行抽象合并。全局原则,页面框架,和通用流程,具有强业务导向，可以采用此方式。
方式二：参考行业通用规范的定义，先罗列完整，再根据产品实际业务需要进行增删改。

标准组件,文案规范,已经在行业内有了不少科学的目录和沉淀，可以采用此方式，例如下图组件的梳理。

3.3 第二步：确定分工排期

有了具体内容作为依据，便可以根据此进行排期分工。

分工原则：推荐按规范分类进行分工，一个大的分类由一人负责，保证专注性。同时团队交互最好都能参与，保证后续对规范更好的沿用。

排期原则：定义规范,和输出需求,两者经常要并行处理，此时提高效率，控制投入产出比就很重要了。

有3个思路可以综合参考：

并行的思路：在定义完全局原则,后，剩下的页面、流程、组件、文案都可考虑并行定义，彼此之间没有明确的依赖项。

迭代的思路：近期有迭代的版本，

复用的思路：某些典型页面、典型流程、典型组件涉及面广，许多需求的设计都将借鉴参考，亦可优先抽象定义。

3.4 第三步：统一撰写原则

设计规范是由不同的设计师一起合作完成，所以我们尽量在一开始，就需要统一规范的撰写和展现形式。以此提高后续合并的效率，同时又能保证其阅读体验，让其它使用者能够更好遵循。定义了几个关键原则：

目录完整：高效检索，快速让使用者找到需要的内容；

原则清晰：抽象的内容往往含有许多概念和原则，需要让使用者先理解再参考，才能保证后续使用正确、举一反三；

多图少字：没有人喜欢看字，图片更容易吸收；

搭配案例：让使用者更好的代入场景，理解和使用规范；

3.5 第四步：定义具体规范

前面铺垫了许多流程性的内容，就像我们日常输出设计需求一样，大家或多或少在工作中都有遇到过。依然分成5个环节一一讲解。

3.5.1 全局原则

目标：明确影响整站各个模块、各个页面设计的原则和规范，指导我们后续各种规范的定义和设计。

而全局原则也分两种：设计原则和业务原则两种

设计原则：每个完整的设计规范都需要包含的内容。看似相对务虚的东西，实则影响后续整个设计方向。

业务原则：源自实际业务本身产生的问题，行业内没有标准定义。需要具体问题具体分析，推导出具体目标，最后再统一制定规范解决业务问题。

全局原则：没有维度高低之分，例如可能全局涉及到的右键菜单,也能被定义成全局原则。只要能够实际解决你业务的需要，能够覆盖整站各个部分，都可以纳为全局原则。

3.5.2 页面框架

目标：梳理整站所有关键页面，整理抽象成相对固定的 框架布局&功能分区 让后续设计新页面时能遵循规律、找到参考。

页面框架的搭建一般由四个步骤组成：

第一步，收集页面：根据早期定义的规范分类，收集展示所有相同层级的页面。这些在定义规范分类时，应该已收集完成。

第二步，框架布局：提取共性，搭建框架和布局，明确页面大的区域划分和结构。

第三步，功能分区：基于框架布局，细化区域内具体的业务功能属性。这部分是页面框架内最接地气最具指导性的内容，同时也是最难定义的。

第四步，加入案例：将刚刚定义的布局框架与功能分区，与实际案例完整结合，便于后续理解和沿用。

3.5.3 通用流程

目标：梳理整站所有流程，对那些可复用的流程进行整理、抽象、封装。让后续设计师和研发能够直接沿用。

可复用的流程：在多个场景下，不改变其原有业务逻辑的情况下能够既插既用。往往一个通用流程中，不同的步骤亦可以打散，重新拼装成不同的流程，以适配具体的场景使用。

对于设计师要做的，就是识别具体的通用流程有哪些，并将其给步骤化,串联起来。当有新的需求来的时候，判断能直接复用，还是需要重新组装，亦或是新增步骤。

3.5.4 标准组件

目标：将产品内使用过的组件整理成标准组件，统一定义规则，让后续设计和研发时能直接调取组件，提高设计和研发效率。其实行业中已经有很多通用组件，可以快速调用。故基于这个背景，结合“需求设计流程”和“组件整理流程”，有两种高效定义标准组件的方式：

方式一：调用行业通用组件

第一步，业务设计确定基本逻辑；

第二步，挑选行业通用组件，增加业务规则；

第三步，视觉根据全局视觉原则，设计新的样式；

第四步，将交互规则、视觉样式合并，统一成标准组件。基础规则直接引用行业组件已定义的内容，场景规则按需补充；
方式二：业务定制组件

第一步，进行正常的业务设计。交互根据需求搭建原型，视觉设计具体样式。

第二步，判断组件是否通用，是否可复用到其它场景。例如：分享对话框，不同的内容分享都能够用得到，像这种就是可抽象成标准组件的典型案例。

第三步，定义标准组件规范。简单的组件展示具体样式即可，团队内设计师基本认知一致，无需重新学习。而复杂的组件为保证后续的正确复用，建议包括以下内容：

更新日志：因为组件是变动最多的规范，需要明确具体的版本和改动点。

组件定义：简要介绍用途和使用规则。

组件结构：介绍组件构成、功能分区、分区定义，详细展示不同分区内具体信息和对应规则。

使用场景：详细区分多种场景下不同的使用方式，明确给予使用指导。

设计方案：备选，如果比较复杂的组件且涉及到流程中的关键环节，考虑复制一个完整的设计方案嵌入其中。

第四步，跟研发沟通，封装成标准组件。这一步是非常关键也是重要的一步。

3.5.5 文案规范

目标：将产品内各个场景内文案进行整理，帮助业务更准确表达意图，让设计师更好沿用，同时让用户感受到一致的产品风格。

文案就像“产品对用户说的话”，不同的人说话方式可能并不一样，没有绝对的对错。但清晰明了的语言表述，让用户更容易理解；符合产品气质的语气，能拉近产品与用户的距离；统一的文案描述，又能让用户在整站一致的语境下体验产品。

需要定义的内容，包括但不限于以下3个部分：

1. 语言：语言是指我们通过什么样的规则来组合文字，让它形成一种惯用的表达方式。单纯说规则可能太虚了，在实际定义规范时，还要如下图所示，加上实际案例示意避免误解。

2. 语气：语气是可以体现产品气质和风格，定义时要结合全局原则内的设计价值观，明确产品性格后才能更好的定义出符合产品的语气风格。同一种语境下不同风格的文案就有明显差异。如网络异常时：

• 俏皮的文案可能是：网络开小差，请稍等一下

• 而正经的文案可能是：网络异常，稍后重试

3. 书写规则：主要包括常用词汇的书写方式，例如日期简写方式,英文大小写方式,使用全角标点符号,等。以及易错的词汇短语示意。

4.具体使用指南：以上语言,语气,书写规则,3个部分，是构成全局文案的基础规范。如果有充足时间的团队，可以考虑再结合实际业务，分别定义不同场景和组件下具体的使用指南。

4.如何推进,交互规范

定义完交互规范，后续将考虑如何将其顺利的推进落地。本文罗列几个推进时重点需要注意的事项。

4.1 团队评审，达成一致

规范的定义不是一个人的事情，而是一个团队事情，它将关系到每个后续每个人的设计产出。所以在制定规范期间，应该定期在团队中进行设计评审。这不仅是评审设计好坏的过程，更是让团队达成一致、大家更深入了解如何使用规范的过程。

4.2 善用工具，沉淀规范

规范搭建的过程中，有很多痛点：组件库需要多人参与维护和创建，容易造成冲突内容丢失；同时沉淀规范文档时，需要图片逐一复制、粘贴到文档内，更新时又要重复一遍这样的操作。

首先组件库支持多人同时维护，差量更新；其次组件库上传后，可以自动生成/更新规范文档，避免反复编写文档，整体提效；最后当组件库有新版本时，会自动提醒团队内其他成员进行更新。

4.3 运用规范，指导设计

搭建规范的过程其实也是整体设计走查的过程，我们会发现有些设计可能有体验问题，或不符合规范。每当这个时候，我们就需要对这些设计进行标记。在规范定义完成之后，迭代排期优化线上的设计。

读后感

在设计规范中，往往最容易忽视的地方是文案的使用规则，多年的摸索发现这恰恰是最重要的，因为语言和文字表达是最直接有效的。另一个就是场景的描述，尤其是一些重要的组件，使用场景的描述有为重要。

Powered by Froala Editor