如何撰写高效的交互说明？

定义：

交互说明是针对原型图内容元素的补充解释文字（包含交互逻辑描述、反馈状态描述等）

交互设计说明书由交互设计师完成编辑、修订、发布的

主要阅读对象：产品人员、设计人员、研发人员、测试人员等，他们都是交互设计文档的使用主角。

不同角色的关注点：

产品经理

主要关注：交互逻辑、功能架构、交互事件、界面页面流转与内容布局等。这里的产品经理代表产品经理及以上管理层。

注意要点： 为项目梳理清楚逻辑关系，文档按照逻辑关系和功能架构分支等设置目录讲清楚项目、功能、组件、页面流转关系。

UI设计师

主要关注：说明文档的具体页面数量，因为这决定 UI 设计师出多少效果图。另外，要看你的原型设计给 UI 设计师留了多少发挥空间，不要过于高保真。以及页面元素是否统一规范便于提炼出典型页面和设计规范。

注意要点： 清晰合理的页面功能布局，注意交互组件复用，页面不同状态描述清晰。

研发人员

主要关注：非常关心细节实现，关心有多 少个功能、多少个功能新特性、多少个页面元素组件、多少个交互动效等， 但他不关心方案里一个输入框里是用彩色还是黑白，因为他是具体功能的实现者。

注意要点： 明确表示出关于功能设计、页面逻辑、组件交互等信息的细节，例如：一个页面刷新，要分为触发刷新事件、刷新加载中、刷新成功提示、刷新失败提示。其中失败提示又要分多种情况：网络不佳、程序异常等。如果你没有提出明确需求，责任就会在需求方，而不是研发部门。

测试人员

主要关注：测试是依靠需求说明书和交互设计说明书，进行测试用例与测试脚本的编写，在交互设计说明文档里需要说明白每一个功能的交互动作与事件，测试是抓细节的，所以需要配一些说明性文字解释交互设计的思路与实现路径，这样测试人员就可根据设计思路设计出测试用例。当然，测试用例分多种类型，这里指的是功能测试与逻辑测试，一些性能测试等需要依靠程序使用的软件、数据库等技术性的接口文档来定。

注意要点： 功能点、业务逻辑、界面元素、交互过程分解步骤。

上面解释了各角色使用交互设计说明文档的场景及他们期待的真实需求，我们需要清楚地了解这些内容，才能有针对性地撰写交互设计说明。

在交互设计过程中，上述四个角色会不断有所交集。所以，一旦编辑文档，就需要对这几个角色有针对性地解释和阅读优化。

清晰准确的交互说明，可以起到哪些作用：

1.减少交互设计师与产品上下游人员的沟通成本

2.提升协作效率

3.避免项目返工延期

交互说明撰写准则：

只写最重要的：

只针对有逻辑规则、异常状态、特殊交互、分支流程、关键节点等进行说明。

对于一些常识性、无异常点的地方不用堆积文字描述...

交互说明毕竟是要给人看的，堆积的文字谁看得下去？？只会带来额外的阅读压力和极高的理解成本，交互设计师修改起来也麻烦。

按模块来展示说明：

01.设计内容组件：对于重复性强、出现频率高的内容，设置一个模板内容及说明即可。

对于重复出现的地方，直接代替过去就行，可大幅度减少交互设计师的工作量，开发也方便理解。

02.分页面/位置来展示：当整体交互原型页面较多时，不要全都铺在同一个页面进行展示说明，会显得页面臃肿、浏览费力。可尝试：单独展示某个模块、分支流程、场景等下的交互稿。小而聚集，内容更精简、理解更方便。

03.若各模块/分支流程/场景中的交互稿存在一定的关联性，可以先做一张总体性的「概览图」，再去单独展示。让开发知道整体方案之间的关系、又能了解各个细分方案里的交互说明。

复杂说明单独展示：

交互稿里总会有一些比较复杂、难以文字来说明的想法，像是一些动效、状态等。

对于这一些比较复杂的说明，可抽离出来进行对比、详细描述，针对局部进行状态效果描述，不必重复复制全量页面。

像一些按钮或功能存在多种状态时，也可用“表格/列表”的方式进行展示。

交互说明的排版布局要有助于阅读：

针对不同体量及复杂度的项目，交互说明一定存在多种排版布局方式。但要注意以下几点：

01.就近原则：交互说明尽量靠近所描述的原型图（或具体功能点）采用数字标号对应描述。特殊情况下交互说明离页面数字标注点较远时，可用虚线连接引导阅读动线。

02.纵向展示：同页面不同状态/模块及交互说明尽量纵向延伸展示，这样更便于鼠标滚动查看。不要横向平铺太长。

03.减少重复：对于相同的页面框架/功能菜单仅部分模块/状态不同，可画一张全要素主页面示意，其余针对不同模块/状态拆解后，单独对比展示，并补充交互说明。突出差异点，减少重复性元素的干扰。

04.主次分明：交互说明样式整体需要区别于原型图页面元素，可一眼区分。同时，对于交互说明也需要区分主要解释和次要描述，让不同查看者抓住重点。

不同的排版布局方式各有利弊，所以具体采用哪种布局方式要根据所做项目的情况，以及开发人员的阅读习惯而定。

交互说明组件化：

类似于设计的控件库，我们在项目中写交互说明写多了就会发现，既然元素可以调用控件库快捷使用，那么该元素的交互说明也可以归类入库，在需要的时候直接拿出来根据具体情况调整使用。这样做的目的：使用时快捷调用，修改时快捷修改。

有更改及时告知：

若交互原型做了调整（包含交互说明），一定要告知团队成员！！并写明修改位置（在哪个页面）。

否则产品、前端、后台、测试等同事的相关想法、工作会停留在上个交互稿里。不要因为信息没对齐而造成了不良影响。就算改了一处小东西，也尽量和同步一下。

交互说明的三种样式：

1.同一页面内不同模块描述

当同一页面内存在多种状态时，可画一张全要素主页面示意，其余针对不同模块/状态拆解后，单独对比展示并补充交互说明

2.页面功能点逻辑规则描述

对于页面中的元素和功能点描述可采用数字标号对应的形式，若面功能点较多且存在关联时，可分组标号做统一说明

3.页面内细节简短标注描述

用于描述页面内功能点及元素的简短说明（20个字内）大段说明文字不建议用此方式（易干扰页面）…

以上内容如果给你带来帮助，请点赞！