如何写一份全面、易读的交互说明文档

《如何写一份全面、易读的交互说明文档》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、交互说明文档，是交互设计师的输出物中必不可少的一项，它关系着设计方案能否最大程度的被实现。交互新人，大多会烦恼如何写交互文档，今天来聊聊这个话题。交互文档，写给谁看交互文档可以看做交互设计师输出的”产品”，它面向的”用户”是下游的同事——视觉设计师、测试工程师、开发工程师。他们会根据文档中的线框图、交互细节说明等等，来输出视觉设计稿、写测试用例、用代码实现产品设计方案，并以此为依据完成验收测试等工作。交互文档，写什么内容最初写交互文档时，很多人会有疑惑该写些什么内容。我的看法是，开发同事在写代码时需要考虑的与界面显示逻辑、用户操作

2、相关的内容，几乎都要在交互文档中体现，建议越全面越好。如果有遗漏的内容，开发可能会找你讨论，也可能懒得费时间沟通直接按照自己的理解去实现。最终，验收测试的效果不如意，你也不能全赖开发。所以尽量将交互文档写的全面些，别消费开发同事对你的信赖值。那么，到底交互文档中，需要写哪些内容呢？1、页面流程（界面之间）页面流程图，可以表达产品的整体结构，帮助同事了解界面之间的关系。在撰写交互文档时，也可以以任务、子任务为模块来详细介绍界面如何跳转、何时跳转。2、内容布局（界面内）正在加载状态、加载完成有内容的状态、加载完成无内容的空状态、失败状

3、态（比如网络异常/权限未开启）、不同角色的用户看到的内容是否一样、不同状态的文案图标变化内容的加载方式，何时加载、何时显示、何时刷新其他…3、交互操作与反馈（界面内）根据用户与界面之间发生的交互操作，提供相应的反馈，可能是提示内容，也可能是界面内或界面之间的跳转。刚入门的交互新人，喜欢把重心放在界面之间的跳转，而遗漏了界面内的内容布局和交互操作。对此，我的小技巧是，先整体看界面全局，再review界面上的每一个元素，思考各种不同场景下这些元素是否变化、如何变化。以登录界面为例，看看怎么写交互细节说明下图，是一个简单的登录界面，我们

4、试着先整体后部分的方式，看看这个界面的交互说明需要考虑哪些方面。1、登录界面的跳转流程什么情况下，从哪些界面可以进入登录界面登录成功后进入哪个界面取消登录后回到哪里界面转场方式，比如从下向上进入界面，从上往下离开界面2、账号输入框字段格式要求，字段长度、字段类别（汉子、字母、数字、手机号）是否有默认提示文案，如果上次登录过是否显示上次的账号光标是否置入此输入框，键盘是否显示，键盘用哪种视图何时检测用户填写的是否正确，填写正确的提示，填写错误的提示，反馈提示何时显示、何时消失输入框中的内容是否支持一键清除3、密码输入框字段格式要求何

5、时检测格式是否符合光标置入后显示键盘的哪种视图输入框中的内容是否支持一键清除是否支持密码可见、如何切换可见状态4、登录按钮按钮是否有可用不可用之分，何时可用状态、何时不可用状态点击按钮之后提示正在登录的方式登录成功如何提示、跳转进入哪个界面有哪几种登录失败的场景（比如账号未注册、网络异常等），不同失败的情况下如何提示多次登录失败提示方式是否变化5、注册按钮点击进入哪个界面界面的转场方式是怎样的6、关闭按钮点击进入哪个界面界面的转场方式是怎样的以上只是抛砖引玉，给大家打开思路。虽然只是几个输入框，但其细节比大多数界面都要复杂。你可以

6、找一款优秀的APP，去研究它如何设计这些细节，是否还有我没有提到的点，研究透了下次自己设计才能做到更加全面。当然，交互细节说明，只是方案的表述，每一个小点都有好几种设计方案。如何权衡选择体验更优的方案，才最是考验交互设计师的能力。你可以对比研究几款优秀产品，看它们在细节设计有何不同，分析其中的缘由，想想是否有更好的方案，学无止尽。如何提升交互文档的浏览体验交互设计师的目标是提升产品的体验，我们输出的文档本身也应该有上佳的浏览体验。为了达到这个目标，我也在不断优化文档的撰写方式和排版。下面聊聊我尝试过的几种方式。方式1：一页纸表示所

7、有的线框图，配上箭头+简单的文字说明网上流传着很多这种风格的图，最初觉得这样的图很有范儿，以为这就是他们输出的全部交互文档，所以按照这种模式产出。等到自己做的多了会发现这类图大多只表达了某个界面的正常状态，并没有详细的交互说明来体现界面的内容布局和交互操作反馈。方式2：一页一个界面，每个界面建一个交互说明文件夹，分功能模块写交互说明（Web产品）工具:AxureWeb产品的特点是，层级复杂，每个界面比较大而且内容很丰富。通常会组织好页面层级，再画每个界面的原型，待几轮讨论过后界面布局和内容基本确定之后，再为每个界面撰写各自的交互说

8、明。考虑到每个界面中的内容模块和功能点不少，我没有在确定好的界面上直接标注交互说明，而是将这个界面划分为几个功能模块，并给每个功能模块新建一个页面用来写交互说明。如下图，分别是Axure的文档目录（左）、某个功能模块的交互说明（右）方式3：一页显示