网易UEDC 朱子健、蒋蕊遥 ：好的交互规范可以非常不错的帮忙企业、团队提升产出，保证客户体验。
规范和秩序存在于生活的很多方面。不了解大伙有没察看过，稍微有点规模的咖啡加盟店，一般至少会有3位员工，分别负责收银点单，制作咖啡，打扫。他们各司其职，高效配合，以保证迅速满足顾客的需要。规范操作让其井井有条且高效运作，从平时工作规范到设计规范，都能起到相同的功用。
规范的效益 = 提升效率 （内容覆盖率 适用性 用人数） + 保障水平 + 统一体验
规范可以帮助个人、团队与整个企业提升效率和产出水平，保障客户体验统一。
举一个《网易手机端交互规范》中登录步骤的例子。一名资深设计师设计一套详细完整的登录步骤需要16小时，假如没针对性指导或有关规范，设计新人非常难考虑周全登录步骤中涉及的防刷机制、自动补全与各种账号的异常校验等细节。但用交互规范后，设计新人产出一套优质的登录步骤仅需4小时，提升效率约75%，同时更保证了产出水平。
当然以上仅针对设计师个人角度的效率提高。从整个企业而言，针对规范涉及的所有组件模块，设计师与上下游同学的每次用都能解放重复工作，产生价值。
有不少出色的例子：谷歌、Apple、Microsoft这类引领全球设计风尚的公司，设计规范已经上升为设计语言，指导旗下所有商品的设计。国内做的出色的案例，譬如Ant Design，Element等，像这种的商品已经达成了端到端的体验一致，把交互、前端和视觉的事情一并解决了，是值得学习的典范。这类出色的设计规范都包括以下几个特征：
灵活 Flexible可拓展 Expansive系统的 Systematic标准的 Standard规范系统看上去复杂，但将它大任务分成一个个小任务，会发现其实更不是那样困难。以下会告诉大伙怎么样制作交互规范，主要包括以下内容：
制作机会规范步骤设计办法商品初期，从0|1阶段。
框架层级
在这个阶段，所有些模块都是新的，所以要定最基础的框架层级，如下所示：
△ 图片来源《网易蜂巢交互文档》
这是大家对web页面的层级梳理，有底层、内容层、导航层、全屏操作层、插件层和模态弹窗层。搭好基础框架后，所有些控件组件都会在这个框架内搭建，好比房屋的框架。如此做有哪些好处除去便捷设计师自己去明确的理解系统，在与前端开发交流的时候也十分高效。譬如在做模态弹窗时，假如没和开发交流好，开发同学将弹窗写在了全屏操作的地方，那样就大概出现问题。
栅格系统和常用分辨率
不论是Web端还是手机端，在早期要确定好常用屏幕的分辨率，屏幕尺寸的兼容性。
基础交互控件
前期商品搭建速度非常快，但都是基础功能，所以在交互组件的选择上可以和商品同步。如，刷新、Hover样式、时间显示、输入框、对话框和基础元件库等。如下所示：
商品稳定，成熟阶段
当商品渐渐稳定，进步到2.0版本时，大家交互组件库也同样伴随商品一步步的进化。基础交互控件会变成复合型组件和业务型组件，数目也会愈加多。此时需要对各类型型的控件进行分类，譬如基础类、导航类、选择类等等。为了所有查询交互文档的人查询便捷，大家需要输出《xx商品交互规范本档》之类的指导型文档。
一旦大家决定制作规范，就要把规范当成一个商品去做。去梳理一套高效合理、可复用的制作步骤，去剖析产出哪种「规范商品」才能产生最大的价值。
总的来讲，可以在以下主步骤的基础上，综合考虑规范效益模型的几个影响原因，落实规范制作的设计策略，从而使规范价值最大化。
明确目的
第一要确立用户目的和设计目的，在一条相对完整的商品线上，找出可以和交互设计规范有接触的角色。
如下图所示，列出来的角色都大概是大家的目的用户。譬如当交互人力不足时，运营同学可以通过交互规范中的组件简单的搭建出页面，或者前端同学在写页面时遇见某个通用组件不明确，直接去查询交互规范就可以解决问题。交互规范就是为这类「利益有关者」筹备的「设计说明书」。
不一样的角色对于交互规范有不一样的用场景，可以参考规范目前的迭代越来越丰富。理想的状况下可以进行较全方位的覆盖。
交互设计师：打开「交互模板」新建一份设计稿，设计过程中用「组件库」搭建一些自概念的设计策略；制作过程中发现规范中已有些模板，对照「线上规范」或「纸质规范手册」查阅；对于规范中已有些相似模块，从「交互稿源文件」中复制一份到我们的设计稿进行修改；对于一模一样的模块，直接标明线上模块。 因此，要覆盖交互设计师的用法场景，可以产出交互模板、组件库、可用的源文件、线上和纸质手册等商品，考虑到不同团队用的工具不同，可以做Axure、和Sketch两套格式的规范。
视觉设计师、商品、运营等：用相同的办法去梳理这类角色的用法场景，主要包括规范源文件、线上和纸质规范。
前端等：线上和纸质规范、规范源码。
对设计目的心中有数之后，就能开始规划具体推行了。
规范内容
规范具体包括什么内容，目录要如何设计，每项内容要交给什么设计师去实行需要在项目的开始就确定好。
确定规范内容主要分为两个步骤：
依据商品阶段初步判断需要主要产出哪一种类的规范，基础型、复合型还是业务型。在初步规划的基础上明确具体制作什么组件和模块的规范。明确具体组件时，大家可以通过统计有关已有商品的通用模块；问卷或访谈设计师需要等；头脑风暴办法来采集素材作为规范的内容池。每次迭代按价值和复杂度的平衡，从内容池中筛选一部分模块进行规范制作。
设计语言
为了输出的统一性，规范应该有我们的基本原则，并围绕原则进行制作。有点校训、宣言、口号的感觉。以下是举两个案例，可供参考。
△ 《网易移动交互规范》
Aesthetic Integrity 整体美学、Consistency 一致性、Direct Manipulation 直接操作、Feedback反馈、metaphors 隐喻 、User Control 用户控制。──《iOS Design Principles》
规范的规范
大家在做规范，那在设计规范时候更应该有我们的规范。每位设计师都有我们的设计风格，但大家在做同一件事情，需要统一交互文档内的所有内容形式，在文档排版部分，需要统一标题字体、内容字体、段落分部、步骤链接；在交互说明部分，需要包括组件场景、交互步骤、用户行为、交互样式、界面元素和样式。下图参考：
团队协作
假如团队内有多个交互设计师去做设计规范，产出物水平和统一性就至关要紧。水平可以通过加入审核环节达到目的，统一性则要依靠协同以确保每个设计师的信息与手中资料同步。
目前的交互原型软件都是有在线协同功能，设置在一个服务器中就能。协同时应该注意，要保留每一次的修改记录和设计联系方法，修改完毕最好要告知其他设计师，若是多个控件组件大改，则需要公告到所有人。如下图参考：
持续迭代
在设计任何商品都不可能一次就完美，在设计交互规范时也需要根据优先级排期。基础的、必要的放在第一期，复合型、复杂的向后放，伴随商品的渐渐健全，大家的交互规范也会愈加完整。
迭代的时候可以从三个方面入手：
每一个模块自己的优化。在之前的版本投入用后可以找用户采集用反馈，模块是不是有用，是不是通用，可以提升多少效率，能否做到直接用等等，针对反馈建议进行模块优化。丰富模块。将更多内容池中的组件模块规范化。更多应用场景。经过一系列迭代后交互规范可能进入维护阶段，更新频次减少。这个时候就需要将它「商品化」，可能是一本白皮书《交互设计规范》，可能是和视觉样式、前端代码封装组合的前端设计指南，将我们的设计规范扩散到更多范围。推广用
规范要真正有人用才能体现价值，从规范的效益模型中也能看出，对于团队和企业来讲，用规范的人数是与规范带来的效益是成直接正比的。用的人越多，越可以削弱制作规范的边际本钱。 推广时（主如果企业内推广，企业外推广就更复杂了）可以包括但不只限于以下办法：
媒体途径：宣讲会、公司常识平台、团队公众号、海报展架、EDM、手册。行政途径：通过每个团队负责人进行推广。个人途径：规范用过程中的口碑宣传，特别对于刚进团队和企业的新人最为有效。资源互换：与其他规范，如视觉设计规范、前端规范等绑定推广，与有关团队内部的互相推广。前面说了基本的设计步骤，本章会介绍组件的设计。 在这里套用一个不算过时的办法论Atomic Design 原子设计。定义非常简单，就是将复杂的组合拆解成最小的单元素，再将这类元素重新组合，变成新的分子。原子设计的五个阶段分别是：
原子：为网页构成的基本元素。比如标签、输入，或是一个按钮，也可以为抽象的定义，比如字体、色调等；与大家相对应的是基础元件。分子：由原子构成的简单UI组件。比如，一个表单标签，搜索框和按钮一同塑造了一个搜索表单分子；与大家相对应的是基础组合控件。组织：由原子及分子组成的相对复杂的UI构成物；与大家相对应的是复合组件。模版：将以上元素进行排版，显示设计的底层内容结构；与大家相对应的是模式，各类功能模块。页面：将实质内容（图片、文章等）套件在特定模板，页面是模板的具体实例；最后是整体的页面。基础元组件
以按钮为例，在描述按钮状况时候根据默认状况、触发（激活态）、操作反馈、异常状况禁用和显示错误、其他样式。
复合组件通用组件
由元组件构成的复合型组件，通用标准，可以在商品业务内的大多数场景下用。比如，含有多种内容的模态弹窗。以下图弹窗为例，是页面层级的最上层，可能包括多个元控件，单行文本，多行文本，单选，复选等等。
复合组件业务组件（场景组件）
伴随商品的功能变得愈加复杂和特殊或需要定制的业务需要，就产生了「业务专用组件」这些型，即通用组件在业务场景下的变形。如下图例，一个下拉控件的进化史：刚开始只不过普通的下拉选择控，下拉项增多后直接就添加了搜索功能。业务需要同时支持多选，就又添加了多选功能。
模式
此项英文叫Pattern，暂且将它翻译成「模式」，就是将各种元素进行排版，显示设计内容结构，比如导航系统，登录注册模块等。
上面介绍了交互规范的主要设计步骤和设计办法。但做出来只不过一个刚最初，推广，运营，维护，迭代等等全是事儿。可能设计师花了非常大力气做出来，但最后实行用依旧不理想。结合自己参与的商品设计和后期实行，总结有以下几个坑：
每一个设计师在工作中都有我们的办法习惯，假如坚持了很长时间，忽然被新的方法代替，会非常不适应。规范的维护本钱较高，需要设计师花不少精力去跟进。规范设计本身有问题，可能是某个控件的说明有异议，致使别的人不认可。团队整体交流不到位，致使实行不到位。需要内部自上而下的推进。应付以上问题，可以通过以下方法去解决：
第一交互规范切入的机会要把控好，若是商品初期，设计师刚产生对本商品的「认知」，用度会更高。新人设计师在缺少经验的时候也十分想用现有些规范。第二设计团队认知高度统一，群策群力，第一要保证内部认同，不可以单个设计师「自嗨」。每一条新增或修改都要没异议。最后设计规范要与前端视觉一块封装才能发挥它的终极价值，争取资源做到最好。
最后要强调的是，规范是基础，并不可以概括所有场景，伴随商品业务的变化，规范需要迭代更新的，所以在设计组件时，需要尽可能通用和可拓展。设计师依旧需要从业务场景出发，在基础组件上进行调整和设计，不可以盲目「迷信」规范，即要以不变的基础应万变的场景。
再来回顾一下交互规范的设计步骤：
规范非常重要，可以帮助个人、团队与整个企业提升效率和产出水平，保障客户体验统一。出色规范具备灵活、可拓展、系统性、标准性等特征。把控规范设计并切入商品的机会和每个阶段需要做的事情。规范设计步骤、目的、设计内容、拟定规范的规定等注意要素。规范内容设计办法，运用「原子设计」的办法论去发散设计：基础通用元件、复合场景组件、模式等。对规范的深思，不止是设计出炉，能落地愈加要紧。设计规范是工具，提高效率是核心，同时也可以当做标尺，保证设计稿产出的水平和商品统一性。
