1、交互文档的输出 1、完整的项目简介包含：项 目的名称，产品经理，交互 设计师，视觉设计师，开 发，测试，团队名称，撰写 时间等。 2、需求分析 需求分析应该包含：功能需 求和对需求分析理解，如下 图所示 3、新增修改纪录 新增修改纪录应该包含：新 增交互和修改纪录的来往版 本说明，如下图所示 第 1 页，共 11 页 交互文档的输出 4、信息架构 信息架构就是产品所呈现 的信息层次，它由哪些部 分组成，之间的逻辑关系 是什么，表达信息结构可 以使用mindmanager， xmind，百度脑图等工具。 5、交互设计的方案阐述 以注册为例，先理解注册 的作用再谈功能交互设计 的方案阐述； 账户注
2、册的作用主要有三 点： 唯一性：用户户注册之 后，用户拥有特属的个人 中心，拥有自己独特的软 件使用特性以此其他用户 做区分 可管理性：用户注册之 后，公司可以根据注册信 第 2 页，共 11 页 交互文档的输出 息，账户信息，方便信息 推送，当用户很久不来的 时候还可以发邮件 或者短 信刷一下存在感，挽留用 户。 同步性：当用户使用别的 移动端时，只需要登录注 册的账户即可得到所有的 同步数据 注册的四种常见设计方 案： 无需注册登录界面。所有 用户均可使用，无个人中 心和千人千面的概念（这 类的app一般功能较简 单）。比如iOS系统自带的 工具类APP，像经常使用 的闹钟、天气、计算器
3、等，以及一些简单的第三 方工具类的APP：电池先 生，道德经app，榫卯等； 只用手机号注册。这是我 们目前目前使用较多的一 种注册登录方式。用手机 号码注册APP，通过短信 的方式验证，常见的例如 理财类app和社交类app； 使用邮箱或者手机号注册 的即可完成； 使用邮箱或者手机号注册 以及支持第三方账户登 录。 第 3 页，共 11 页 交互文档的输出 针对以上的分析，然后结 合自己的产品业务情况和 市场定位找到一个最后适 合自己产品的设计方案即 可。 6、页面交互流程图 （包含页面布局，手势 第 4 页，共 11 页 交互文档的输出 操作，反馈效果，元素 的规则定义） （1）页面布局
4、从页面的布局可以看出产 品的整体结构，帮助同事 了解界面的功能展示和元 素布局。页面布局即对界 面信息的设计。 （2）手势操作 通过可交互元素去触发， 这个过程需要手势操作， 常见手势操作有 单击，双 击，左滑，右滑，长按， 拖拽，滑动，下击，抬 起，夹捏等。 （3）反馈效果 根据用户与界面之间发生 的交互操作，产生的反馈 效果，反馈效果按照页面 关系的维度可以分为两 类：一类是在当前页面的 反馈效果如点击输入框键 盘调出光标闪烁，点击同 第 5 页，共 11 页 交互文档的输出 步按钮，在当前页面出现 浮层动画等等。另一类是 跳转到下一个页面的反馈 效果。 （4）页面跳转 将产品分解为多个任
5、务， 一般一个产品都有若干个 主干任务，其他则是支干 任务（微信的主干任务是 即时聊天，朋友圈、摇一 摇、购物、设置等都属于 支干任务）。在页面流程 图上面，清楚的标注处通 过怎么的操作跳转到哪个 界面。一般进入下一级界 面是从右往左滑入，返回 上一级界面通常是从左往 右滑入 。对于特殊的跳转 效果要特殊说明。 （5）元素的规则定义 对于原型图里面的关键 字段等元素都要详细说 明，例如列表里面时间 的定义规则。列表的排 第 6 页，共 11 页 交互文档的输出 列逻辑，元素的展示逻 辑，元素的极限情况 （6）其他细节 例如：正在加载状态、加 载完成有内容的状态、加 载完成无内容的空状态、 失败
6、状态（比如网络异常/ 权限未开启）、不同角色 的用户看到的内容是否一 样、不同状态的文案图标 变化。内容的加载方式， 何时加载、何时显示、何 时刷新。 第 7 页，共 11 页 交互文档的输出 7、异常页面和异常情 况的说明 做交互原型时，先考虑正 常情况，当正常情况全部 做完了，接下来就可以开 始画所有的异常页面和异 常情况了 常见的异常页面包含：数 据为空的页面、操作失败 的页面、拉取数据失败的 页面、页面不存在的页面 第 8 页，共 11 页 交互文档的输出 常见的异常情况包含：断 网状态、服务器异常、操 作失败、字符限制、网络 切换（从wifi 切换到移动数 据）、权限限制，关键字 段
7、超行 综上所述再给出几点建 议： 1. 一个页面一个任务： 每一页能展示的内容 是有限的，如果同一 页中堆积太多的线框 图会造成问题 2. 每个任务都有起点， 一个任务应该从起点 一直到该任务的结束 整条路径。 3. 同一页面的不同状态 最好在一个页面展示 （不要忽略极端情 况）。 4. 页面布局规范，准确 传递设计方案。 5. 尽量黑白灰，避免原 型图对视觉设计师产 生干扰。 第 9 页，共 11 页 交互文档的输出 撰写交互设计出文档 使用工具 1. 如果是大项目或者团 队协作的话，推荐使 用Axure。Axure可以 进行协作比较方便。 2. 对于逻辑比较复杂的 大需求，推荐使用 Axure，Axure含有站 点地图，可以清晰体 现出交互的页面层级 关系。同时可以很好 的完成各个场景的跳 转。 3. 对于网页端交互而 言，推荐使用 Axure。pc端界面 大，平铺很多界面展 示效果较差。 4. 如果是小需求，推荐 使用Sketch，sketch 画交互效率高 5. 如果是制作交互动效 demo，推荐使用 flinto，protopie， princile。如果做交互 第 10 页，共 11 页 交互文档的输出 提案推荐使用 Keynote。 第 11 页，共 11 页
