师们对接着各自的产品经理及项目，因业务不同，每个项目都有着各自的节奏和进展，势必也导致交互输出文档的粗细度不同。本文通过一个专业交互文档模版的例子，给大家讲述如何规范自己的交互文档?

　　比如对接上游的产品经理和项目经理，跟他们讨论过产品规划及需求后，他们会根据交互设计师输出的交互文档来评审设计方案是否满足用户需求，以及在开发实施过程中的可行性。

　　其次要对接下游的视觉设计师和开发工程师，他们会根据交互文档中的线框图、交互细节说明等，来输出视觉设计稿、用代码实现交互设计方案，并以此为依据完成落地实现等工作。所以交互设计师最重要的输出物就是交互文档，它是对接上下游的重要纽带。

　　专业的交互文档应该包含以下7点内容：完整的项目简介、需求分析、新增修改纪录、信息架构、交互设计的方案阐述、页面交互流程图(包含界面布局，操作手势，反馈效果，元素的规则定义)、异常页面和异常情况的说明。

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

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

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

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

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

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

　　从页面的布局可以看出产品的整体结构，帮助同事了解界面的功能展示和元素布局。页面布局即对界面信息的设计。

　　通过可交互元素去触发，这个过程需要手势操作，常见手势操作有 单击，双击，左滑，右滑，长按，拖拽，滑动，下击，抬起，夹捏等。

　　根据用户与界面之间发生的交互操作，产生的反馈效果，反馈效果按照页面关系的维度可以分为两类：一类是在当前页面的反馈效果如点击输入框键盘调出光标闪烁，点击同步按钮，在当前页面出现浮层动画等等。另一类是跳转到下一个页面的反馈效果。

　　将产品分解为多个任务，一般每个产品都有若干个主干任务，其他则是支干任务(微信的主干任务是即时聊天，朋友圈、摇一摇、购物、设置等都属于支干任务)。在页面流程图上面，清楚的标注出通过怎样的操作跳转到哪个界面。一般进入下一级界面是从右往左滑入，返回上一级界面通常是从左往右滑入 。对于特殊的跳转效果要特殊说明。

　　对于原型图里面的关键字段等元素都要详细说明，例如列表里面时间的定义规则。列表的排列逻辑，元素的展示逻辑，元素的极限情况

　　例如：正在加载状态、加载完成有内容的状态、加载完成无内容的空状态、失败状态(比如网络异常/权限未开启)、不同角色的用户看到的内容是否一样、不同状态的文案图标变化。内容的加载方式，何时加载、何时显示、何时刷新。

　　做交互原型时，先考虑正常情况，当正常情况全部做完了，接下来就可以开始画所有的异常页面和异常情况了。

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

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

　　交互输出文档里面最重要的是做设计时多方面思考。就像文章里面的注册，其实还有很多可以思考的，例如四种注册的方案各自优缺点，都可以细致的去分析。当设计师养成把所有的都考虑清楚，然后权衡取舍。就可以做出一份高质量无逻辑问题的交互设计文档了。

　　网站在前期的时候都是很难上排名的吗，那么是因为你的网站基础优化都没做好，怎么可能会有排名呢，首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...

　　随着情人节的结束，2月份的设计圈干货大合集悄然更新。新的工具新的资源，依然是以往的分量，依然是相同的味道。和过去的合集相似，免费的素材、工具、服务占据了列表中9成的...

　　每个网站都是由不同功能不同类型的页面构成的，当用户打开错误链接的时候，网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时，还应当引导用户继续浏...

　　今天来给大家讲讲如何用Axure实现上下滚动效果。 如何实现上下滚动效果： 让内容在显示区域滚动; 内容面板没有接触到顶部时，让内容面板移动至顶部; 内容面板接触到顶部，没有接...

　　你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你，快来看看我最新发现的工具包吧!有了他们，这些功能你只需要直接用，或者用一点时间把他们优化的比作者创造时更...

　　@Mockplus原型设计 ：许多人可能认为搜索框不需要设计，毕竟这只是两个简单的元素。然而，在内容繁杂的网站中，搜索框通常是最常用的设计元素。当用户遇到相对复杂的网站时，他们...

　　本文以微信首页为例，用三个维度系统地解析一个产品的交互设计的方方面面。 首先我们来做个互动，请各位看官打开自己的微信，然后看到你的微信首页： 然后仔细观察看到了什么...

　　刻板印象有好有坏。在合适的场景、时间、项目中，去最大化它的积极作用，尽量避免它的消极作用，才能真正的平衡设计、工作，甚至生活。 一直在看奇葩说，听到很多次的一个词叫...

　　在做表单设计时，究竟该选用哪种控件，只要是根据情况而定的，无论哪种选择都有其优缺点，这就要结合选项数目、空间大小等因素，选择一种形式，可以最大程度的方便用户使用。...

　　本设计指南适用于UI界面中交互微动效，涵盖入场、出场动效，过渡动效和加载动效，在时间和缓动曲线的选择上提供了一些通用的设计建议，帮助设计师理清动效设计思路，提高设计...