这几年一直从事产品相关的工作。从我自己的经历和与同行的交流中，我发现“交互体验”、“交互规范”和“用户体验”是经常被谈论的话题，但目前大量的公司仍然很少关注交互规范。基于我个人对该公司产品的经验，本文总结了一个背景产品交互规范。

前言

毕业后一直从事互联网产品，这几年自己做了很多产品(2C二手电商和医美，环境监测，智能地产，2B智能地产)。当你自己做产品的时候，因为你是一个白手起家的产品，你也是产品的负责人，所以你在产品规格方面也形成了文档(虽然没有那么详细，但是足够了)，所以无论后期加入多少人，或者增加多少产品线，产品交互和UI风格基本一致。

今年换了一个平台，这次不是从零开始做产品。用了之后发现整个产品有四五种交互模式，不仅增加了我学习的成本，而且接触到客户后也产生了各种投诉。直到那时，我才真正意识到交互规范对于一个产品的重要性。

简单介绍一下我们的一些集成系统。我们系统的用户是房产局和房产局监管的开发企业、租赁机构和物业服务企业。系统非常复杂，设计了很多业务线，一个业务线对应一个系统。系统涉及的很多业务线都需要很多产品人员的参与，因为没有指导性的交互规范，每个人习惯的交互模式也不一样，导致整个集成系统的交互模式很多。

什么:交互规范是什么？

以下是个人愚见:

每个产品都应该有自己的一套交互规范。交互规范是通过定义产品的顶层框架、基本交互指令(成功操作、删除提示灯)、通用组件和特殊组件的设计范围限制，来指导产品在交互中保持统一。未来无论有多少条产品线，有多少人参与产品，都需要按照这套交互规范进行设计开发，以达到产品交互的统一。

为什么:目的和意义

这几年一直从事产品相关的工作。从我自己的经历和与同行的交流中，我发现“交互体验”、“交互规范”和“用户体验”是经常被谈论的话题，但目前大量的公司仍然很少关注交互规范。

结合自己的亲身经历，公司的产品在没有交互规范的情况下，共有以下效果:

1.被吐槽是不专业的

我们公司是做G端智能地产业务的，业务发展很快，在全国很多城市都有业务往来，所以会接触到很多客户，经常会被吐槽产品的不专业要求所改变。一开始，我们理解不专业的想法，认为我们的产品在商业上不专业。经过多次沟通，发现产品界面不一致，业务上不专业。同类型的列表操作栏有的在左边，有的在右边，有的是按钮，有的是文本按钮等等。当时就迫不及待的找了一条缝，把它变成了土。

2.学习成本增加

用过苹果系统和win系统的人应该在这方面有很深的体会，这两个系统都有自己的一套交互规范。

举几个例子:

Win系统在窗口右上角“关闭”、“最大化”、“最小化”打开的窗口，而Apple系统在左上角。

默认情况下，win系统以相反的方式翻转窗口内容的页面(现在可以以自己的方式进行自定义和配置)。

以上两种常见的操作模式，相信对使用过这两种系统的人影响深远，尤其是从一个系统切换到另一个系统时，非常容易误操作，比如关窗。

想要操作好自己的电脑，只需要花一定的时间学习，会因为不习惯操作模式而抱怨不好用。

3.导致较差的用户体验

用户体验(简称UE/UX)是用户在使用产品过程中建立的一种纯粹的主观感受。

在习惯位置找不到按钮，会让用户失望；由于使用习惯导致的误操作会让用户变得不自信；找不到返回路径会使用户“迷失”；当这些情绪积累到一定程度时，用户会觉得你的产品体验很差，所以不再使用你的产品。

4.互动规范的意义

规范的含义:

提高效率；保障质量；统一体验。

标准化可以帮助个人、团队乃至整个企业提高效率，保证产品质量和输出质量，保证用户体验的统一。

一个资深的产品设计师设计一个详细完整的登录流程可能需要十几个小时，一个新的产品设计师在没有未知文档的帮助下可能需要几天才能完成。同时，登录过程中涉及的各种账号的防刷机制、自动完成、异常验证等细节也很难考虑。借助交互规范，新设计师可以在短时间内产生一套高质量的登录流程。

WHO:谁更适合制定交互规范？

至少必须满足以下条件:

交互规范当然是交互设计师是最适合的角色，其次是懂交互的产品经理。他们了解产品的用户、产品用户画像；最好是从零开始全程参与产品研发的交互设计师或者产品经理，他们理解产品的定位、产品解决的痛点、产品愿景。没有全程参与，至少也应该是最懂自家产品的那些人；有交互设计经验的人，产品交互规范不是随随便便的一篇文档，那是一篇能够指导和定义未来产品交互模式的文档，最好是有制定过交互规范的经验的人。

总结:其实对自己的产品比较了解，有交互设计经验的人，应该有能力制定交互规范。

何时:交互规范何时制定？

什么时候制定交互规范合适？不能太早。如果产品功能还没有定义，就会有原型，肯定不行；不能太晚，已经迭代了好几个版本了，还肯定不可能有规范。

什么时候合适？我根据同时参加人数分为两种情况:

首先，1~2名产品人员同时参与

如果原型设计涉及到产品人员或者交互设计师，个人建议先原型化，再细化交互规范。但是，我也在设计原型的同时细化了交互规范。我不适合这种工作方式，会分心。个人不推荐。

第二，三个以上的产品设计师参与

如果多个产品线的同一个产品人员同时参与，产品负责人需要在完成功能定义后，原型设计前，开会讨论重要的基本交互规范，形成初步的交互规范。这样做的好处是每个参与者在设计产品的时候都有另一个大方向，每个人都可以在这个大前提下玩。

然而，产品负责人也需要定期会面，以审查每条产品线的原型。一是确定大家是否跳出了最初的交互规范，二是从不同风格的原型设计中探讨最佳设计，三是从原型中提取较好的设计，添加到交互规范文档中。

注意:产品负责人审核原型的会议不仅仅是审核原型的交互模式是否一致，交互模式只是一个方面。至于原型评审会议的那些方面，这里就不讨论了，后面再说。

总结:交互规范什么时候制定？按照同时参与的人员，分为两种情况:一人参与时，先原型设计，再细化交互规范；多人同时参与，先定义初步的交互规范，然后在设计的同时优化交互规范。

如何:如何制定交互规范？

1.概观

设计说明：交互设计是很自由的事情，因此规范不会对细微之处作明确规定。该文档为通用性质，通用交互规范目的是保证整站的交互体验的一致性。并且保证一些体验较好的交互方式能在各个模块中得以使用，从而保证产品设计的一致性，提升整体产品质量。页面通用规范 ：针对页面交互信息的标准，包括：增删改查规范、页面标题、链接新窗口打开规范、图片信息。信息交互规范 ：交互流程中包含的信息交互方式，包括：预先提示信息、操作提示信息、结果信息提 示。通用组件规范 ：对于一些可在多页面中使用的通用组件进行规范，包括：按钮、导航、输入框、搜索、浮层、列表。读者对象：产品经理，产品开发人员，交互设计师，产品UI设计人员

2.顶吊框架

借鉴网易UEDC设计团队的设计规范；

图片来源“网易蜂巢互动文档”

网易UEDC设计团队对网页的框架层进行了如下梳理:底层、内容层、导航层、全屏操作层、插件层、模态弹出层(熟悉前端的同学应该知道，前端同学在写一个页面时会把页面分为三层:结构层、表示层、行为层，我们的设计主要围绕这三个方向，即页面框架、页面风格、交互动作设计)。

设置好基本框架后，所有的控制组件都会构建在这个框架中，就像房子的框架一样。这样做的好处不仅方便设计人员对系统的清晰理解，而且在与前端开发沟通时也非常高效。比如做模态弹出的时候，如果你和开发者沟通不好，开发者把弹出写在全屏操作的位置，那么就可能有问题。

3.页面信息规范

以以前做过的交互规范为例:

(1)添加

提交失败后必须保存用户已经输入的内容，以便再次提交。提交时需对主要标识字段进行重复值、空值 （空格）判断。新增内容提交失败后，须保留用户修改的内容，以便再次修改提交。新增内容提交成功返回到主页面时，主页需刷新。

(2)修改

当修改单个或多个记录时:

如界面存在复选按钮，勾选多条记录进行修改时，每次只能对一条记录进行修改，默认修改内容:为第一条的提示信息；修改后加载的内容应为实际内容，而不再为默认值；修改完成后须回到原记录所在位置，且刷新显示修改后的值；修改内容提交失败后，须保留用户修改的内容，以便再次修改提交；在查询条件下修改后返回，如不满足查询条件则不显示；需对主标识字段进行重复值、空值（空格）判断。

(3)删除

删除一条或多条记录时，需要:

必须有确认删除的提示信息；删除成功后刷新，不显示删除的记录；删除成功后，返回到原记录所在页面，如果原记录所在页不存在时，则返回上一页;当被删除的记录与其他记录存在关联时，请示需求界面给予不允许删除、更明细提示等信息。

(4)询问

按条件查询时，要求:

每次查询后保留当前查询条件；通过查询条件筛选出的结果，通过结果进入到详情页，再返回时需保留筛选条件以及筛选结果。注：这一点很容易漏掉；当查询条件较多时，必须设置“重置”按钮提供使用；当未查询到任何记录时，需给予未查找到相关记录的提示信息，后台页面在未查询到结果时较少使用推荐查询结果；除了用户明确要求不需要外，需提供模糊查询及组合查询功能。

(5)页面标题规范

应该用于页面的标题，这些页面规定了整个产品中各个级别的不同功能。

标题需要加粗，不同级别的标题需要加粗，UI设计师需要明确定义不同标题的字体大小和形式规范。

(6)链接新的窗口规范

用于调整页面链接是用新窗口打开还是用这个窗口打开。

本窗口打开 查询结果、上下翻页、内容保存、详情页面等操作在本窗口打开；新窗口打开 图片预览页面、视频预览采用新窗口打开；关闭预览即可同时关闭该窗口。

(7)页面图片信息的规范

用于调整页面图片信息是否显示alt、title值和BLANK链接。
目前背景图片分为按钮图片和基于内容的图片。

按钮图片:

Alt：交互使用的按钮图片（不带文字）：如编辑、添加、警告等，图片ALT必须为交互操作的名称；Title：按钮图片不增加Title值。

内容图片:

Alt：服务器中保存该图片，在图片无法显示的时候可显示代替图片（默认图片）；各详情页面中该图片预览框中显示替代图片；各列表的图片预览框中不显示替代图片。Title：鼠标过去显示的文字后台各详情页面指针指向该图片时显示文字；后台各列表页面指针指向该图片时显示文字。BLANK链接：后台各详情页面点击该图片无效，不激活BLAN链接；后台各列表页面点击列表中的图片则在新窗口打开商品详情页面。

(8)列表排序

这份名单符合实际。后台管理产品列表与2C产品不同，需要个性化推荐。大部分的后台产品都是按照某个时间的顺序或者逆序排序的。当然也不排除其他的排序条件，比如有特殊指令的数据需要顶。

4.信息交互规范

(1)提前信息提示

所有的交互都应该提供更高级的信息提示，让用户知道该做什么，会有什么后果，该填什么。

一般分为内容提交、谨慎操作、差异化规则。

内容提交类：每个输入项、条件选选项（包括时间选择）均需要给出提示信息。该提示信息可放置在输入框内或者控件尾部（如密码要多少多少位。搜索框提示用户输入什么内容等。）谨慎类操作：针对不可修改、重要操作选择等操作属于谨慎类操作，均需给出提示信息。如审核是否通过操作、退款申请操作、价格输入等。差异化规则：如果某一项操作与用户操作习惯相悖需要给出提示信息，比如渠道想添加某个商品但是该商品的供应商资料不完善没通过审核，需要提给出提出和帮助链接。

(2)操作信息提示

任何操作发生时，无论成功与否，都需要信息提示，如操作提交、数据输入等。有三类:确认提示、错误提示、阅读提示、及时提示、提交后提示。

确认提示 ：修改设置、删除数据等操作时需要弹出提示框，用户需要选择后方可执行，比如：品控审核某商品点击通过按钮之后，弹出提示框品控人员需选择是或否，方可完成操作。读取提示 ：涉及到大量信息读取缓慢的时候应该进行提示，比如：进入后台查看商品列表时，由于网络、数据量大等原导致载入缓慢，应该显示读取提示信息，以避免用户过度重复点击操作。错误提示：当用户的操作不符合规则、输入数据不符合规则需要给出操作提示，比如：输入数值不符系统规定，则进行提示。错误提示分为：即时提示、提交后提示。即时提示：需手动输入（或选择的项目）可以进行即时提示，当输入焦点移除之后不管输入框内是否有内容即可进行判断如果有误即显示提示，比如：在添加商品过程中输入商品价格，价格如果超过系统设定当输入焦点移除之后则进行判断并进行错误提示。注：上线时间不做判断当选择完下线时间之后即可判断如有错即可进行提示，服务开始结束时间也可如此。 可及时判断的项目包括：输入框、日期选择。提交后提示：对于未作任何输入操作和选择的项目不做及时判断，只能当提交表单之后才做判断并进行错误提示。比如：商品是否可退未必选，但是没有系统默认选项，操作人员未做选择点击了提交定稿按钮，这时才会显示是否可退的错误提示信息。对于提交后判断的项目包括：图片是否上传、单选/多选、下来菜单选择。

(3)结果信息提示

某项操作成功完成后，需要显示反馈的结果信息提示，比如没有找到符合条件的商品，需要显示信息提示。

提示分为:保存结果提示、查询结果提示、添加结果提示。

保存结果提示， 当进行商品添加/修改此类涉及到数据保存的操作，不管是否成功均需给出提示。查询结果提示 ，任何信息列表、查询结果，当对应信息结果的时候需要给出有无结果状态提示，不得使用空白信息。添加结果提示， 当涉及到填写评审未通过原因这类的内容添加操作。保存之后可直接显示结果页面。

5.交互式组件

页面布局:

后台管理产品多数采用全屏布局并设计不同尺寸的适配页面；多数采用T型布局，顶部模块导航+侧边栏模块菜单导航+内容页签；支持全局分类搜素。

导航:

顶部导航：顶部导航一般是按照业务模块划分，例如：OA子系统、交易系统、监测预警、统计报表等；侧边菜单栏：业务模块下的子菜单。一般为两级菜单，超过两级菜单当考虑在内容页增加子导航（例如：阿里云管理模块）。注：这些都不是绝对，可根据具体情况进行设计；内容页签栏：需设计关闭全部页签、关闭其他全部页签（注：这是多页签布局最容易遗漏的点）；面包屑导航：后台产品层级没那么深，同时采用多页签设计之后面包屑导航的方式用的就不是很多。面包屑导航多数时应用再层级较深的产品页面，C端WEB产品用的较多；tab标签：当详情页内容过多且多类信息时需要用TAB导航；步骤导航：例如企业注册时因为企业需要填报的信息过多，需要分类分步骤填报。

基本组件:

搜索：关键字模糊匹配搜索；加载：容易漏掉局部加载的情况；按钮分为三大类：一类是各页面中的功能操作按钮，比如确定、取消按钮；一类是数据表格下方的翻页按钮；一类是文字按钮：后台产品中文字按钮多应用与列表操作栏；内容详情页中的链接；文字按钮多为蓝色链接色；功能操作按钮 ：UI设计时容易漏掉不可点击状态、选中状态、鼠标悬停状态、默认状态；功能按钮分为主按钮和次按钮，需以颜色加以区分； 文本：同一页面内单行文本输入框长宽尺寸必须统一，比如商品添加页面中的商品原价、商品现价两个输入框的尺寸就必须要统一；多行文本输入框长宽尺寸可根据允许最大输入字符数来做决定。比如商品添加中的商品长标题输入框；所有页面内单行与多行文本输入框均有边框 ;所有页面内输入框中所输入的字符属性必须统一（字体，颜色，字号） ;所有页面内输入框的常见状态:默认状态，获取焦点，禁用状态，输入正确，输入错误;

提示组件类别:

web页面提供的功能中，很多情况需要系统发送一些必要的提示信息到页面显示给用户;浮层展现在页面的中间位置聚焦用户的视觉，需要对浮层外的区域进行暗显处理。这类浮层有三种结构：短暂提示（淡入淡出）、有后续操作（无原因说明）、有后续操作（有原因说明）这些信息的分类有： 警告信息 、禁止信息、 操作执行成功信息、 操作执行失败信息、 错误信息 、帮助信息、 提示信息

数据表示类:

表格、图表、手风琴、列表、饼图、环形图、扇形图、折线图、直方图和k线图

表单组件类:

单选框、复选框、滑动开关、输入检查规则、文件上传、图片上传、图片查看、日期选择器、级联选择器等。

特殊组件:

根据当前产品业务需求设计的一些特殊类型的组件

上面的交互组件都来自前面的案例:https://r0aglk.axshare.com

多少

制作一套完整的交互规范需要不断的优化，这肯定需要一定的人力和时间，但是相对于整个产品的设计开发来说，需要投入这些人力和时间。

知名产品的设计规格

海外的

1.IOs-apple(苹果)人机界面指南精英

官网:设计——苹果开发者

2.材料设计-谷歌(Google)

官网:简介——材料设计

中文翻译:材料设计–材料设计的中文版本

材料成分

官网:https://material.io/components

3.流畅设计系统-微软

官网:流畅设计系统

微软设计(包括流畅设计、包容性设计等。)

官网:微软设计

4.脸书设计-脸书(脸书)

官网:脸书设计——我们在想什么？

土产

5.蚂蚁设计——蚂蚁金服

官网:一种用户界面设计语言

蚂蚁运动——蚂蚁金服

官网:蚂蚁运动——一种反应式动态设计解决方案

6.蚂蚁设计移动-支付宝移动组件库

官网:一个移动设计规范