如何写一份通俗易懂的交互说明文档？

一、前言

用户体验部在大型的互联网公司里面都是核心部门，交互设计师们都对接着各自的产品经理及项目，因业务不同，每个项目都有着各自的节奏和进展，势必也导致交互输出文档的粗细度不同。

二、交互文档核心作用：

· 传达产品的开发需求

· 保证各部门的沟通有根据

· 保证产品质量控制有具体的标准

三、交互文档重要性：

作为一名交互设计师，我们的重点工作职责是起到承上启下的作用。交互文档可以看做是交互设计师输出的”产品”，比如对接上游的产品经理和项目经理，跟他们讨论过产品规划及需求后，他们会根据交互设计师输出的交互文档来评审设计方案是否满足用户需求，以及在开发实施过程中的可行性；对接下游的其他同事——视觉设计师、测试工程师、开发工程师。他们会根据交互文档中的线框图、交互细节说明等来输出视觉设计稿、用代码实现交互设计方案，并以此为依据完成落地实现等工作。所以交互设计师最重要的输出物就是交互文档，它是对接上下游的重要纽带。

四、交互文档写哪些内容？

最初写交互文档时，很多人比较头疼我该如何入手？写什么东西？从什么地方开始写等等!那这里我的看法是，开发在写代码时需要考虑的与界面显示逻辑、用户操作相关的内容，几乎都要在交互文档中体现，建议越全面越好。

如果其中你有遗漏的内容，那么开发可能会找你谈谈了，还有种可能就是开发为降低沟通成本懒得diao你，直接按照自己的理解去做了！那么最后的最后，验收测试的效果完全大变样，这时你也不能全赖开发一个人身上。所以前期尽量将交互文档说明要写的全面些，别消费开发同事对你的信赖值。

那么，到底交互文档中哪些内容需要写进去呢？

4.1、完整的项目简介

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

4.2、需求分析

需求分析应该包含：功能需求和对需求分析理解

4.3、信息架构

信息架构就是产品所呈现的信息层次，它由哪些部分组成，之间的逻辑关系是什么，表达信息结构可以使用mindmanager，xmind，百度脑图等工具。由于注册流程属于小需求的优化，可以不放信息架构，所以这里不做图片展示。

4.4、界面流程

界面流程图，可以表达产品的整体结构，帮助同事了解界面之间的关系。在撰写交互文档时，也可以以任务、子任务为模块来详细介绍界面如何跳转、何时跳转。

4.5、交互设计的方案阐述

以注册为例，先理解注册的作用再谈功能交互设计的方案阐述；

账户注册的作用主要有三点：

（1）唯一性：用户户注册之后，用户拥有特属的个人中心，拥有自己独特的软件使用特性以此其他用户做区分

（2）可管理性：用户注册之后，公司可以根据注册信息，账户信息，方便信息推送，当用户很久不来的时候还可以发邮件          或者短信刷一下存在感，挽留用户。

（3）同步性：当用户使用别的移动端时，只需要登录注册的账户即可得到所有的同步数据

注册的四种常见设计方案：

（1）无需注册登录界面。所有用户均可使用，无个人中心和千人千面的概念（这类的app一般功能较简单）。比如iOS系统自带的工具类APP，像经常使用的闹钟、天气、计算器等，以及一些简单的第三方工具类的APP：电池先生，道德经app，榫卯等；

（2）只用手机号注册。这是我们目前目前使用较多的一种注册登录方式。用手机号码注册APP，通过短信的方式验证，常见的例如理财类app和社交类app；

（3）使用邮箱或者手机号注册的即可完成；

（4）使用邮箱或者手机号注册以及支持第三方账户登录。

4.5、内容布局

· 正在加载状态、加载完成有内容的状态、加载完成无内容的空状态、失败状态（比如网络异常/权限未开启）、不同角色的用户看到的内容是否一样、不同状态的文案图标变化

· 内容的加载方式，何时加载、何时显示、何时刷新

· 其他 …

4.6、交互操作与反馈

根据用户与界面之间发生的交互操作，提供相应的反馈，可能是提示内容，也可能是界面内或界面之间的跳转。

刚入门的交互新人，喜欢把重心放在界面之间的跳转，而遗漏了界面内的内容布局和交互操作。对此有个小技巧可以先从整体看界面全局，再review界面上的每一个元素，思考各种不同场景下这些元素是否变化、如何变化。

以登录举例，看看怎么写交互细节说明

4.6.1、登录界面的跳转流程

· 在什么情况下，可以进入登录界面

· 登录后首先进的是哪个界面

· 如果取消登录后回到哪个界面

· 以及界面转场方式，比如从下往上进入，还是从上往下离开界面

4.6.2、账号输入框

· 字段格式要求，字段长度、字段类别（汉子、字母、数字、手机号）

· 是否有默认提示文案，如果上次登录过是否显示上次的账号

· 光标是否置入此输入框，键盘是否显示，键盘用哪种视图

· 何时检测用户填写的是否正确，填写正确的提示，填写错误的提示，反馈提示何时显示、何时消失

· 输入框中的内容是否支持一键清除

4.6.3、密码输入框

· 字段格式要求

· 何时检测格式是否符合

· 光标置入后显示键盘的哪种视图

· 输入框中的内容是否支持一键清除

· 是否支持密码可见、如何切换可见状态

4.6.4、登录按钮

· 按钮是否有可用不可用之分，何时可用状态、何时不可用状态

· 点击按钮之后提示正在登录的方式

· 登录成功如何提示、跳转进入哪个界面

· 有哪几种登录失败的场景（比如账号未注册、网络异常等），不同失败的情况下如何提示

· 多次登录失败提示方式是否变化

4.6.5、注册按钮

· 点击进入哪个界面

· 界面的转场方式是怎样的

4.6.6、关闭按钮

· 点击进入哪个界面

· 界面的转场方式是怎样的

五、综上所述再给出几点建议

1.一个页面一个任务：每一页能展示的内容是有限的，如果同一页中堆积太多的线框图会造成问题

2.每个任务都有起点，一个任务应该从起点一直到该任务的结束整条路径。

3.同一页面的不同状态最好在一个页面展示（不要忽略极端情况）。

4.页面布局规范，准确传递设计方案。

5.尽量黑白灰，避免原型图对视觉设计师产生干扰。

六、撰写交互设计出文档使用工具

1、如果是大项目或者团队协作的话，推荐使用Axure。Axure可以进行协作比较方便。

2、对于逻辑比较复杂的大需求，推荐使用Axure，Axure含有站点地图，可以清晰体现出交互的页面层级关系。同时可以很好的完成各个场景的跳转。

3、对于网页端交互而言，推荐使用Axure。pc端界面大，平铺很多界面展示效果较差。

4、如果是小需求，推荐使用Sketch，sketch画交互效率高

5、如果是制作交互动效demo，推荐使用flinto，protopie，princile。如果做交互提案推荐使用Keynote。

后记：交互输出文档里面最重要的是做设计时的多方面思考。就像文章中里面的注登录，其实还有很多可以思考的，只是抛砖引玉，给大家提一个文档梳理的思路。虽然只是几个输入框，但其中的细节比我们到时看到的界面复杂的多，因为思考的是界面内的交互逻辑。感兴趣你可以找一款优秀的APP，从中仔细去研究它如何设计这些细节问题的，研究透彻了下次在设计才能做到更加全面。

文章转载于作者壹念视觉

有兴趣的小伙伴可以关注我们日后的干货分享哦！当然，你想了解更多关于设计的知识，可以填写下方的表单，有利于咨询老师更快的找到你哦！我们下次见~