网易设计师：超全面的交互规范设计流程

网易UEDC – 朱子健、蒋蕊遥 ：良好的交互规范可以很好的帮企业、团队提高产出，保证用户体验。

一. 规范很重要

规范秩序存于活的方方面面。不知道家观察过，稍微点规模的咖啡连锁店，一般至少会3职员，分别负责收银点单，制作咖啡，打扫。他们各司其职，高效配合，以保证速满足客户的需求。规范操作让其井井条且高效运作，从日常作规范到设计规范，都能起到相效用。

二. 规范的效益

规范效益 = 提高效率 （内容覆盖率 × 适用性 × 使用数） + 保障质量 + 统体验

规范可以帮人、团队以及整企业提高效率产出质，保障用户体验统一。

举一个《易移端交互规范》中登录流程的例子。一名资深设计师设计一套详细整的登录流程需要16小时，如果没有针对性指导或相规范，设计人很难考虑周全登录流程中涉及的防刷机制、自补全及各种账号的异验等细节。但使交互规范后，设计人产一套质量的登录流程只需4小时，效率约75%，同时更保证了产质量。

当以上仅针对设计师个人角度的效率提升。从整个企业而言，针对规范涉及的所有组件模块，设计师以及上下游同学的每次使用能放重复工，产生价值。

三. 优秀的设计规范

有很优的例子：Google、Apple、Microsoft引领球设计风尚的司，设计规范已经上升为设计语言，指导旗下所有产品的设计。国内做的优的案例，比Ant Design，Element等，像类的产品已经现端到端的验一致，把互、前端和视的情一并决，是值得学习的典范。优的设计规范包含以下几个特点：

• 灵 Flexible
• 拓展 Expansive
• 系统的 Systematic
• 标准 Standard

四. 规范制作

规范系统看似复，但将其大任务分成一个个小任务，现其也不是么困难。以下告诉大家何互规范，主要包含以下内容：

• 制作时机
• 规范流程
• 计方法

1. 制作时机

产初期，从0-1阶。

框架层级

在这个阶，有的模都是的，要定最基础的框架层级，如示：

△ 图片来源《易蜂巢交互档》

是我们对web页面的级梳理，有底、内容、导航、屏操、插件和模态弹窗。搭基础框架，所有的控件组件在个框架内搭建，比房子的框架。样做的处除方便设计师自己去清晰的理系统，在与前端开流的时也分高效。比在做模态弹窗时，果没和开流，开同学将弹窗写在屏操的位置，么就有能出现问题。

栅系统和常用分辨率

不论是Web端还是移动端，在早期要确定常用屏幕的分辨率，屏幕尺寸的兼容。

基础互控件

前期产品搭建速度很快，但是基础功能，所以在互组件的选择上以和产品同步。，刷新、Hover样式、时间显示、输框、对框和基础元件库等。下所示：

产品稳定，成熟阶段

当产品逐渐稳定，发展2.0版本，交互组件库也同随着产品一步步的进化。基础交互控件会变成复型组件和业型组件，数量也会越来越多。此需要对各种类型的控件进行类，比如基础类、导航类、选择类等等。为了所有查交互文档的人查方便，需要输出《xx产品交互规范文档》之类的指导型文档。

2. 规范流程

一旦我们决定规范，就要把规范当成一个产品去做。去梳理一套高效合理、复用的流程，去分析产出什么样的「规范产品」才能产生最大的价值。

总的来说，可以在以下主流程的基础上，综考虑规范效益模型的个响因素，落实规范制作的计方案，从而使规范价值最大化。

明确目的

首先要确立用户目标和设计目标，在一条相对完整的产品上，找出以和互设计规范有接触的角。

如下图所示，列出来的角色都有可能是的目标用户。比如当交互人力不足，运营同学可以通过交互规范中的组件简的搭建出页面，或者前端同学在写页面遇某个通用组件不清晰，直去查交互规范就能解决问题。交互规范就是为这些「利益相关者」准备的「计说书」。

不同的角色对于交互规范有不同的使用景，可以根据规范当前的迭代逐步丰。理想的状下可以进行较全面的覆盖。

交互设计师：打开「交互模板」新份设计稿，设计过程使用「组件库」搭些自定义设计案；制作过程发现规范已有模板，照「线上规范」或「纸质规范手册」查阅；于规范已有相似模块，从「交互稿文件」复制份到自己设计稿进改；于完全相模块，接标明线上模块。 此，要覆盖交互设计师使用场景，可以出交互模板、组件库、可使用文件、线上和纸质手册等品，考虑到不团队使用工具不样，可以做Axure、和Sketch两套格规范。

视觉设计师、品、运等：用相法去梳理这些色使用场景，主要含规范文件、线上和纸质规范。

端：线纸质规范、规范源码。

对设计目的心中有数之后，就可开始规划具体实施了。

规范容

规范具体包含哪些容，目录要怎么设计，每项容要交给哪个设计师执行需要在项目的开始就确定好。

确定规范内容主要分为两个步骤：

• 根据产阶初步判断需要要产哪一类的规范，基础、复合还是务。
• 在初步规划的基础上明确具哪组件和模块的规范。

明确具体组件时，我们可通过统计相已有产的通模；问卷或访谈设计师需求等；头脑暴方法来收集素材作为规范的容池。每次迭代按值和复杂的平衡，从容池中筛一分模进行规范制作。

设语言

了输出的统一性，规范应该自己的基本原则，并围绕原则行制作。点校训、宣言、口的感觉。以下举两案例，可供参考。

△ 《网易移动交互规范》

Aesthetic Integrity 整体学、Consistency 一致性、Direct Manipulation 直接操作、Feedback反馈、Metaphors 隐喻 、User Control 用户控制。──《iOS Design Principles》

规范规范

我们在做规范，那在设计规范时候更应该有自己规范。位设计师都有自己设计风格，我们在做件事情，需要统交互文档内所有内容形，在文档排版部分，需要统标题体、内容体、段落分部、流程链接；在交互说明部分，需要含组件场景、交互流程、用户为、交互样、界元素和样。下图参考：

团协

果团内有个互设计师去做设计规范，产出物质量和统一就至关重要。质量以通加审核节达到目的，统一则要依赖协同以确各个设计师的信息以及手中资料同步。

现在的交互型软件都是有在线协同功能，置在一个服器中就可以。协同需要注，要保留每一次的修改记录和计系方式，修改完毕最好要告知其计，如果是多个控件组件大改，则需要通知所有人。如下图参考：

持续迭代

在设计任何产品不能一次就完美，在设计互规范时也需要按照优先级排期。基础的、必要的放在一期，复合型、复的向放，随着产品的逐渐完善，我们的互规范也越来越完整。

迭代的候可以从三个方面入：

• 每个模块自身的优化。在之前的版投使用以找用户收集使用反馈，模块是否有用，是否通用，能够提高少效率，能不能做到直接使用等等，针对反馈意见进行模块优化。
• 丰模块。将更多内容池中的组件模块规范化。
• 更多应用场景。经过系列迭代后交互规范可能进入维护阶段，更新频降低。这时候需要将其「品化」，可能是本白皮书《交互设计规范》，可能是和视觉样、前端代码封装组合前端设计指南，将自己设计规范扩散到更多领域。

推使用

规范要正有人用才能现价值，从规范的效益模型中也能看出，对团和企业来讲，使用规范的人数是与规范带来的效益是成直接正比的。使用的人越，越能够削弱规范的边际成。 推时（主要是企业内推，企业外推就更复）以包含但不仅以下方法：

• 媒体渠道：宣讲会、公司知识论坛、团队公众号、海报展架、EDM、手册。
• 行政渠道：通各个团负责人进行推。
• 个人渠道：规范使用过程中的碑宣传，尤其对于刚进队和企业的新人最为有效。
• 资互换：与其他规范，如视觉设计规范、前端规范等绑定广，以及相关团队内部互相广。

3. 设计方法

前面说基的设计流程，章介绍组件的设计。 在里套用一个不时的方法论——Atomic Design 原子设计。概念很简单，就是将复的组合拆成最小的单元素，将元素重新组合，变成新的分子。原子设计的个阶段分别是：

• 原子：为页构成的基本元素。例如标签、输入，或是一个按钮，可为抽象的概念，例如字体、色调等；与我们相对应的是基础元件。
• 分子：由原子构成的简单UI组件。例，一个表单标签，搜索框和按钮共同打造一个搜索表单分子；与我们相对应的是基础组合控件。
• 组织：由及组成的相对复杂的UI构成物；相对应的是复组件。
• 模版：将以上元素进排版，显示设计底层内容结构；与我们相应是模，各类功能模块。
• 页面：将实际内（图片、文章）套件特模板，页面模板的具体实例；后整体的页面。

基础组件

以按钮为例，在描述按钮状候按照默认状、触发（激活）、操作反馈、异常状—禁用和报错、其式。

复合组件—通用组件

由元组件构成的复合型组件，通用标准，以在产品业务内的大部分场下使用。例，含有种内容的模态弹窗。以下图弹窗为例，属页面级的最上，能包含个元控件，单行文，行文，单选，复选等等。

复合组件—务组件（场景组件）

随着产的功变得越来越复杂和特殊或需要定制的务需求，就产生了「务专属组件」这一类，即通组件在务场景的变形。如图例，一个拉控件的进史：一开始只是普通的拉择控，拉项增多后直接就添了搜索功。务需要同时支持多，就又添了多功。

模式

此项英文叫Pattern，暂且将其翻译「模式」，就将各种元素行排版，显示设内结构，例如导航系统，登录注册模块。

五. 对交互规范的反思

上介绍了交互规范主要设计流程和设计法。做出来是个刚刚开始，广，运，维护，迭代等等全是事儿。可能设计师花了很大力做出来，最终执使用依然不理想。结合自己参与品设计和后期执，结有以下几个坑：

• 每个计在工作中都有的方法习惯，如果坚持了久，突然被新的方式代替，会不适应。
• 规范维护成本较高，需要设计师花很多精力去跟进。
• 规范设本身问题，可能某控件的明异议，导致其他人不认同。
• 团队整体沟通到位，导致执行到位。需要自上而的推。

应对以问题，可以通过以下方式去解决：

首先交互规范切入的时机要把控好，如果是产初期，设计师产生对本产的「认知」，使会更。人设计师在缺经验的时候十分愿意使现有的规范。次设计团队认知统一，群策群，首先要保证认可，单个设计师「自嗨」。每一条增或修改都要没有异议。最后设计规范要与前端视觉一起封才发挥它的终极值，争取资源做到最好。

最要强的是，规范是基础，并不能概括所有场，随着产品业务的变化，规范需要迭代更新的，所以在设计组件时，需要尽量通用和拓展。设计师依需要从业务场出，在基础组件上进行整和设计，不能盲目「迷信」规范，即要以不变的基础应万变的场。

六. 总结

来回顾一下互规范的设计流程：

• 规范很重要，可帮助个人、团队及整个企效率和产质量，保障户体验统一。优秀规范具有灵、可拓展、系统性、标准性等特点。
• 把控规范设计并切产品的时机和各个阶段需要做的情。
• 规范计流程、目标、计内容、制定规范的规定等注要点。
• 规范内容设计法，运用「原子设计」法论去发散设计：基础用元件、复合场景组件、模等。
• 对规范的反思，不仅仅设出炉，能落加重。

设计规范是工具，提升效率是核心，时也可以做标尺，保证设计稿出质量和品统性。

欢迎关注作者「网易UEDC」的微信公众：