第一章 交互文档基础概念
一.、什么是「交互文档」？
交互文档也称DRD，是用来告诉别人「页面设计细节」的一个说明文档。
包括页面跳转逻辑、页面交互逻辑、页面显示状态等细节的说明。
二、为什么要写交互文档？
交互设计师的工作就是完善细节设计，那你设计的这些细节应该如何告诉开发呢？口述当然是不行的了，第一是记不住，第二是会理解错误，第三就是最重要的一点，没有历史记录。
现在办公用的聊天软件非常多，但是所有企业依然使用邮件的方式沟通，这正是因为邮件可以作为沟通证据保存下来，没有沟通记录就等于没说，交互文档也是一个道理，你要把你做的所有细节都写下来，给其他人发邮件，告诉对方要做什么、要怎么做。
三、交互文档给谁看？
给产品经理看：交互逻辑、交互方式，需要与产品经理确认。产品经理是把控整个产品的一个角色，任何事情他都需要做到心里有数，包括交互设计。
给UI设计师看：交互设计会包含很多状态、很多细节、很多页面，UI设计师要确保每一个状态、每一个页面都画出来，这样在开发的时候才不会漏掉东西。
给开发人员看：代码逻辑和我们普通说话的逻辑不同，说话的时候可以是点击这里跳转页面，而程序员需要知道点击什么位置，使用什么方式跳转到哪一个页面，中途需要判断哪些规则，如果中途失败怎么办…因此交互文档就更重要了。
给测试人员看：测试岗位也称QA，属于研发部门旗下的一个岗位（很多小公司没有这个岗位），你需要把你所有的设计细节都告诉他，然后他去测试一遍最终效果与你设计的是否完全一致（不包括UI）。
第二章 交互文档结构
一、交互文档的结构
一个完整的交互文档包含了：
1.项目背景：
现在看到的这个文档，是需要经过团队很多岗位一起讨论才能执行的（重点是讨论，也称为需求评审），很多公司的产品经理都是拍脑门儿想的需求，这会导致整个团队往错误的方向走，因此介绍需求背景十分重要，让大家统一目标，之后在讨论中大家才能提出更好的意见；
同时，产品经理也应该告诉大家，这次是做完整的优化，还是快速迭代的方式，接下来的计划是怎么样的，周期是多长..（这是产品经理需要做的事情）；
除此之外，项目背景还为将来翻看历史留下记录，半年后你再看这个需求，当时做了什么、为什么做、都有谁参与，一下就很清晰了。
2.需求列表
需求列表指的是你接下来要做哪些「功能点」，用简单的文字描述，在哪个环节要做什么事情，包含哪些页面、哪些系统。
3.更新记录
刚才说过，这个文档是拿来给大家讨论的，只要讨论就会有修改，因此每一次修改的记录都应该写在这里面，不仅仅是会议记录，更重要的是你为什么要做成现在这样，当你的领导问你为什么不用另一种更好的方案时，你可以拿出更新记录说：我们当时也用过这个方案，但是技术提出这个方案开发周期太长，所以我们选择了一个临时方案。
4.信息架构图 / 业务流程图
这两个是产品经理在设计初期要画好的，不需要我们做什么。
以上「大多是」产品经理要做的事情，下面才是交互设计师要做的重点内容：
5.设计方案
这里写的就是交互细节，页面如何跳转、页面包含哪些元素，有哪些规则、哪些状态等，全都要在这里写清楚；
通常都会在每个页面左上角写上页面名称，或者写这是哪个页面的什么状态；
页面中每一个按钮的点击效果以及点击后出现的页面、样式，都要展示出来；
要把规则写在下面，什么时候能点、点了以后显示什么等..
第三章 交互文档的格式
一、在写交互文档之前，我们先来统一一下文档的内部叫法：
二、不要把所有交互放在一个页面
写交互之前，根据「功能点」把所有要画的页面分好页面，一个页面只讲一个需求。
如果一个页面中有2个功能点，把他们分开来讲，除非这两个功能有交集，分开很难说清楚。
比如下图中，在「商品详情」页需要做2个功能，一个是增加商品轮播图，一个是商品库存的判断逻辑，这两个完全不相关的功能就要拆开2个页面单独讲。
三、同一个页面的不同状态，尽量在一个页面中展示
界面除了跳转、弹窗逻辑，各种极端情况的界面也「要」放在同一个页面中展示，不要再新建一个「页面」
图中的「其他状态」，包含了无库存时如何显示、商品已下架时如何显示，当然像其他页面无网络、错误提示等，都放在同一个页面中展示。
四、界面交互说明
4.1：上面都是结构，而从这开始就是交互文档的核心内容了，页面中通常都会用数字标注哪些地方需要做交互说明（如图），然后在旁边写上相对应的交互说明（有些是在下面，有些是在右边，一般都会根据界面空间摆放位置）
我不是很推荐标数字的方式，因为数字会盖住部分页面，而且点击范围比较模糊，我常用画方块 + 线条标注（如下图），这样既能明确点击范围，也能很快的找到相对应的内容。
4.2：在做界面说明的时候，还可以做到一件事情，就是给说明加分类（如下图）
有时候UI会对你的设计进行改造，比如图中红色框中的广告位，如果你只是画了这么一个方块，UI没办法理解你的意图，可能会画出一个比这个大很多的广告位（真的会这样）。
所以你要在规则说明下方单独列出一行跟UI讲，这个广告位的高度建议不超过100PX，要展示在第一屏，同时还要能看到「最近浏览」。
同理，如果你有什么需要开发注意的、需要测试注意的，最好都单独列一行写出来，这样的交互文档逻辑清晰、范围全面。
4.3：规则要写哪些方面？
操作方面：
点击区域：哪些区域可点击，标注出来，并说明点击范围是多少（这时候使用方块区域就比数字好很多）
点击效果：点击以后会发生什么事情？是跳转页面，还是弹出窗口？
操作变化：比如购物车里的商品，当商品取消勾选时，立即购买按钮是不可点击的
动效变化：不管是简单的切换页面、弹窗方式，还是复杂的动态效果，都需要描述出来
操作手势：比如长按、左划、右划、两个手指缩放，三个手指滑动…
页面状态：
默认状态：比如很常见的《我已阅读规章制度》需要先勾选才能继续操作，那在默认状态下，他是自动勾上的吗？
极限状态：比如一段文字，最多输入几个字、最少几个字，如果达到极限状态会出现什么交互效果？
操作错误：当用户出现操作错误时，应该如何提示？
加载失败：比如淘宝首页的某一张图片显示失败了，这时应该如何显示呢？
空状态提示：当没有数据时应该如何显示？比如搜索无结果
第一次进入页面时：第一次打开网站，需要显示哪些内容？每个内容分别是什么状态？
第二次进入页面时：用户退出再进来，是否保留上一次的操作？是否受到上一次操作的影响？
其他：
按Home键退出再回来：比如正在看视频时，切换到微信跟别人说两句话再切回来，视频继续播放还是暂停？
无网络/网速慢：你要考虑在每一个环节中，如果出现了网络问题应该怎么处理，特别是在支付的过程中
使用4G网络时：当你的内容比较消耗流量时，一定要考虑用户使用4G网络的情况
清除缓存时：要考虑本地有哪些缓存，清除后又什么影响
删了软件重新安装：同上
其实交互文档的结构、格式都是次要的，只要有一套模板就足够了。
真正有值钱的，是你在写文档的时候能写出多少东西，能不能想到很多交互细节。
第四章 设计案例
接下来会按照实际工作中工作方法给带大家做一遍需求。
以下是一个电商产品，产品经理提出一个需求：
当用户查看「商品详情」时，除了能看到商品的图片，还要能看到视频，所以我们要做一个上传视频的功能。
在正式开始之前，我希望你先自己花「半分钟」想一下，如果你去写这个页面的交互规则，你会写什么呢？
【商品支持视频上传，在商品详情页可以查看视频】
这就是大部分人在交互文档里写的内容，所以觉得交互文档写不写都一样，然而接下来我会告诉你，真正的交互设计师应该如何思考。
一、设计成什么样子？
写交互文档之前，我们先确定页面要「画」成什么样子，我们先按照正常逻辑思考，现在没有视频，如果有了视频，应该怎么显示呢？这个时候你就可以去参考一些竞品了，比如淘宝、小米 等APP，他们是这样显示的：
这个环节不需要太很纠结，抄也好、自己设计也好，只要合理就行，我选用的是下图这样的展现形式：
二、页面规则
1. 页面样式规则：
页面样式确定了，我们就开始设计规则，思路是这样的：假设你现在「第一次」进入页面，你能看到哪些与视频相关的元素？（一定要从第一次进入页面开始分析）
把你能看到的东西「详细」描述出来（你描述的越详细，接下来能发现的规则就越多）：
现在写的这些都是对页面内容进行描述，要体现在交互文档里，然后对细节进行补充：
2. 对每一个问题逆向思考，或者发散思考：
轮播图中有6个「分页点」，其中一个是视频，视频显示在第一个
Tips：只要和数量相关，第一反应是最大值、最小值、无数据状态（这些也称为极限状态）
