原则|全局交互规范制定指南

浏览了许多关于“设计规范”的文章，发现很多都是在针对通用流程和视觉方面在整理，关于交互层面的内容比较少。基于此，作者结合最近项目中沉淀的实际案例，以及参考了不少行业通用的设计规范，总结了一篇关于搭建交互规范的流程、框架、要点。希望能够帮助大家更好的沉淀交互规范。

文章插图
一、如何「理解」交互规范说起设计规范，大家应该都不陌生，一个成熟的设计规范对产品设计、研发开发、用户使用都有着重要的指导作用：

产品设计：保障产品内不同模块的设计一致性，同时提高不同设计师间的设计、协作效率
研发开发：通过定义的标准规范，提高流程、组件的复用率，提高整体开发效率
用户使用：让用户能够在产品全局感受到统一且完整的体验，降低使用成本和学习难度

文章插图
而一个完整的设计规范一般分成「视觉」「交互」两个部分合并组成，在全局原则的指导下，侧重不同的维度和内容分别展开规范的定义，最后再合到一起形成一份完整的设计规范。

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

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

文章插图
整体维度呈“从抽象到具体的总分关系”，不仅对产品的各个维度都有具体的交互指导，而且不仅能保证长期使用，避免重复返工；同时也便于囊括后续的迭代内容。而这些内容，就是我们通常定义的交互规范，也是交互参与定义设计规范的发力点。
有了对于基本认识和搭建框架之后，我们来详细聊聊如何定义交互规范具体内容。
二、不同阶段应该定义哪些交互规范？产品有不同发展阶段，设计规范同样也有，不同阶段下的产品目标和规范需要覆盖的内容都不尽相同。我们要既要避免做多，保证投入产出比最大化；同时也要构建一个合理的规范迭代思路。
产品探索初期：
该阶段的产品核心目标是「验证产品或商业模型」，业务需求都是小步快跑、频繁迭代。产品处于从0到1的野蛮生长状态，存在着“先满足功能，再优化体验”的情况，导致该阶段的产品体验往往不太过关。
搭建目的：通过定义原则，梳理关键页面和流程，搭建基本的规范框架。既让团队对产品有统一的设计价值观和认知判断；从页面到流程，又能对应设计参照标准；同时业务可以在规定的框架下发展，不仅让产品体验的根基牢固，而且不会限制功能设计自由。
搭建范围：「全局原则」「页面布局」「通用流程」
产品稳定发展期：
该阶段的产品基本形态已稳定，也形成了初步的模型结构。后续迭代是在现有结构的基础上，进行增加或优化功能。虽然探索期定义了产品原则、布局和流程，但探索期产品的自由生长，会导致不少设计细节不一致，从而影响了产品整体的体验和效率。
搭建目的：通过回溯整理过往设计，沉淀优化成完整的交互规范。再根据规范统一产品体验，进一步优化流程和效率，让整个产品体验达到相对稳定的状态。
搭建范围：「全局原则」「页面布局」「通用流程」「标准组件」「文案规范」
三、如何「定义」交互规范1. 定义交互规范的原则与行业通用的设计规范（如TDesign、AntDesign）“大而全”“通用”的特质不同，一般团队内构建的设计规范都是源于某一个产品或业务，主要的特点是“专精”。专注于「业务」本身，主要是「团队内成员使用」，追求的是投入产出比最大化。
基于此背景，当我们在定义「交互规范」时，有三点原则：
原则一：保持规范的业务性。设计规范既要贴合业务场景归纳完整，同时又要避免凭空定义脱离实际。故我们定义时要代入业务规划，尽量富有前瞻性，这样定义的规范不仅能覆盖当前需要，同时后续也能更好地迭代。
原则二：保持规范的专注性。有的放矢，明确内容优先级，避免盲目追求大而全和形式主义。对于优先级高（覆盖面广、复用率高）的关键内容重点描述；优先级低（逻辑简单、认知一致）的内容可简要描述，避免事无巨细降低效率。