浅谈交互说明文档

01. 什么是交互说明文档

所谓交互说明文档即 是用来承载交互说明，并交付给视觉、前端、测试以及开发工程师参考的文档。

02. 为什么写交互说明文档

交互说明文档的一大作用是用于沟通、反馈和迭代。易懂的文档可以给交互设计师节约沟通成本，很多细节如果是口头约定，对接的同事一旦更换就会产生很多问题，比如理解有误差，信息遗漏，重复劳动等弊端。因为交互文档是要给别人看的，而不是把方案丢给产品就可以了，视觉设计需要你的文档来设计所有的样式，前端需要你的文档去做交互样式、各种反馈、限制，开发需要你的文档梳理页面之间的逻辑关系，制作交互动效等，所以做好交互文档不只是对项目负责也是为了更好的方便其他同事的工作。

03. 交互说明文档写什么

完整的项目简介、需求分析、新增修改纪录、信息架构、异常页面和异常情况的说明、线框图。

完整的项目简介：

完整的项目简介包含：项目的名称，版本号，产品经理，交互设计师，视觉设计师，开发，测试，团队名称，撰写时间等。

需求分析：

需求分析应该包含：根据用户目标产出功能需求和对需求分析理解。

新增修改纪录：

新增修改纪录应该包含：新增交互和修改纪录的来往版本说明。

信息架构：

信息架构就是产品所呈现的信息层次，它由哪些部分组成，之间的逻辑关系是什么，表达信息结构可以使用xmind，百度脑图等工具。

异常页面和异常情况：

常见的异常页面包含：数据为空的页面、操作失败的页面、拉取数据失败的页面、页面不存在的页面。

常见的异常情况包含：断网状态、服务器异常、操作失败、字符限制、网络切换（从wifi切换到移动数据）、权限限制，关键字段超行。

线框图

线框图是交互设计师的主要交互输出物，主要以黑白的字体，控件填满整个页面，线框图不追求华丽的表现，但要符合以下几点：

1.结构——如何安排整个页面的布局比较合理

2.内容——哪些内容会在页面显示

3.信息化层次——如何把想表达的信息详细简单的传递出去

4.功能——如何安排界面功能

5.行为——如何与用户交互，如何表现

需要注意的是在线框图中不要使用强烈的颜色，最好呈中性颜色，这样不会影响视觉设计师的发挥。

04. 如何写交互说明文档

选择有效率的工具：

    Sketch： 优点不用多说了，绘制线框图时在插件上和易用性上都已经征服了

                   设计师，而且使用sketch工作的视觉设计师更容易接手。

    Axure ： 在pc和mac上表现良好，经典的交互工具，适应于使用pc的团队。

    PDF：     更适合用于和客户或上下游沟通展示。

需要注意的有以下几点：

1）不是为了写文档而写文档，而是为了解决问题

2）适合于项目、合作方：大项目有大文档，小需求有灵巧的解决方案

3）工具不是问题，易传播，易标注，成目录即可

4）完美的文档无法取代面对面的沟通，评审会和讨论不会因为文档而减少

欢迎关注我的微信公众号：超口的炸锅，每周会分享关于设计或者有趣的文章。