还在为写「交互文档」发愁吗？

知行合一，知道如何思考怎么获得实操性，如何去思考，很重要。

 

第一章    交互文档基础概念

一.、什么是「交互文档」？

• 交互文档也称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：只要和数量相关，第一反应是最大值、最小值、无数据状态（这些也称为极限状态）

• ?：6个「分页点」？只能有6个吗？最多几个？最少几个？最大最小值时分别如何显示？（最大最小值）
• ?：所有商品都有视频吗？没有视频的商品应该如何显示？（考虑无数据状态）
• ?：所有商品都有图片吗？如果没有图片只有视频应该如何显示？（根据上一个问题发散思考，依然是考虑无数据状态）
• ?：商品「只能有」一个视频吗？如果有多个视频怎么显示？（考虑了无数据状态，就要反过来思考如果有多个数据怎么办）
• ?：视频只能显示在第一个吗？（之前在描述中说过 视频显示在第一个，那我们应该逆向思考，如果不在第一个怎么显示？这个关键思路是「如果不」）

通过这些思考，我们确定了页面「默认状态」的「样式」规则，把这些规则都写在交互文档中，页面的样式说明，最好直接把图画出来，这样更直观（如图）

3. 页面操作说明

把你能看到的操作全都列出来：

• 可以点返回按钮，返回到上一页
• 可以点播放按钮，播放视频
• 可以左右划动，切换下一张图

 

4. 好，接下来就是关键的了

• 点返回按钮，返回到上一页时：
  • 点击返回按钮，页面返回到上一页。
  • 这是大部分人能想到的交互规则，我们现在要学习交互设计师的思考方式，在写规则之前，把每一个功能的「状态」都列出来，然后交叉分析。
• 视频功能会有：视频播放状态、视频暂停状态、视频未播放状态、视频播放结束状态、视频全屏播放状态。我们把这些状态全都列出来，然后分析在不同状态下，点击返回按钮会出现什么情况。
• 视频正在播放时，返回上一页不会怎么样，但是如果再回到当前页会怎么样？视频还会继续播放吗？
• 视频暂停时、视频未播放时、视频播放结束时，返回上一页再回到当前页，分别会怎样？
• 视频全屏播放时，点击返回按钮会怎样？
• 你有没有发现，当你把「状态」拆解的越细致，你能发现的交互规则就越多，这个案例的返回按钮只有一个状态，因此比较简单，如果你正在做的设计有很多状态，就要把他们都列出来，然后进行交叉分析。
• 点播放按钮，播放视频时：
  • 这又是另一种思考方式了，我们在思考设计规则的时候，要把每一步操作「接下来」发生的情况清晰描述出来，你会发现更多问题：
• 描述：点击播放按钮，视频会开始播放（大部分人只写到这里，我们要继续往下描述），播放时会需要用到「进度条」，有了进度条还需要有视频时间进度，播放的过程中还需要有暂停按钮，还有可能需要全屏播放。
• 
• 这时你又发现了更多要写的东西，把这些都画出来放在交互文档里。
• 不仅要画出来，你还要给这些新出现的功能补充交互说明：点击全屏按会出现什么效果？点击进度条会出现什么效果？点击暂停按钮会出现什么效果？
• 写的方法也很讲究，比如进度条的交互，一般人会写：「拖动进度条可调整视频进度」。这种写法是非常不专业、不严谨的，写的时候你要考虑很多问题：
• 什么情况下可以进行拖动？（手指按下未松开时）
• 需要怎样操作才能进行拖动？（左右滑动才行，上下滑动则不行）
• 拖动时会产生什么效果？（视频会随着拖动产生变化，当然你也可以设计成松开手指后调整视频进度）
• 拖动时会对其他功能产生什么影响？（视频的时间会产生变化）
• 样式上有什么变化？（只要发生了交互，就一定要考虑交互样式，这里我就不描述样式细节了，按照你自己的想法来写就行）
• 交叉分析：视频暂停时、结束时，拖动进度条会有什么效果？
• 最后你在写「进度条」的交互说明时，就要写成：
  • 点击进度条并且手指未松开时，左右滑动屏幕可调整视频进度，视频随着进度条实时产生变化；
  • 拖动过程中，若未松开手指，视频保持「暂停」状态，松开手指后，视频跳转到相应的时间继续播放；
  • 拖动过程中，视频的数字时间会在屏幕中心显示，显示总时间与当前时间，数字最小单位为「秒」（只要有样式上的交互，就必须把图画出来）
  • 如果当前视频是暂停状态，拖动进度条并松开手指时，视频继续播放
• 你会看到我在写交互文档时，把「主语」和「动词」写的很清楚，如果不这么写，开发小哥哥做出来的结果将会与你的想法有天壤之别；
• 这是多年经验踩出来的坑，普通人谁会写这么详细？还不是因为中途遇到了太多问题，最后只能强迫自己必须这样做吗。。所以我建议你也养成这样的习惯，尽量写的细一点，按下就是手指未离开，页面滑动是从左到右还是从上到下，一定要写清楚。

• 点击播放时：
  • 同样也是进行描述：点击播放时，视频会开始播放，只要播放视频就需要加载，加载就有可能很慢，加载慢就需要在交互状态里中显示Loading的页面，Loading的交互效果是什么样的呢？需要你自己去设计。
  • 在这基础之上继续描述：加载慢是不是因为网络连接失败？如果连接失败，我是不是要给用户显示「无网络」的页面？
  • 当你发现无法继续描述了，可以反向思考一下：刚才只考虑了网络不好的情况，如果网很好呢？比如用户使用的是4G，使用4G是要流量的，我是不是需要先提示用户「您正在使用4G」呢？
  • （以上环节又多出好几个页面状态，你需要把每个状态都画出来，并在交互文档中分别写清楚什么情况下会出现这个状态）
  • 最后想想交叉状态：如果视频播放结束了会怎么样呢？是循环播放还是暂停？
• 通过上面这些案例你会发现其中的规律，挖掘交互细节需要通过不断的描述细节、逆向思考、交叉分析（各种状态），希望各位同学把他培养成自己的惯性思维。

• 左右划动，切换下一张图时：
  • 划动切换图片已经没有其他可描述的了，因此我们直接进行其他分析，先进行交叉分析，把所有状态都考虑进来：
  • 如果视频正在播放，划动是否能切换图片？是否会与进度条产生冲突？
  • 如果视频正在播放，划到下一张再划回来的时候，视频会是暂停状态还是停止状态？还是继续播放？
  • 如果视频暂停时，划到下一张会怎么样？再划回来会怎么样？
  • 如果视频播放结束，划到下一张会怎么样？再划回来会怎么样？
  • 如果全屏状态下滑动，又会是怎样的交互效果呢？
  • 如果只有一个视频，没有其他图片，划动会不会有效果？

• 相信到这里你应该已经学会思考方式了，我再总结一下：
  • 先考虑默认状态，页面中都包含哪些元素，极限状态都会如何显示
  • 页面中都有哪些可点击操作的地方，把他们都列出来
  • 每一个区域都有哪些状态，把他们都列出来（通常都会画出来）
  • 把每一个操作和状态进行交叉分析，分别在不同情况下进行不同操作，会出现什么效果（效果也要画出来）
  • 尝试着描述细节，每一个操作都再多想一步，问问自己操作完以后会显示什么，分别有什么状态
  • 当你描述完细节，再尝试着逆向思考一遍，思维方式是问自己一遍：「如果不这样」会有什么问题
  • 最后你要把以上所有内容都写在交互文档里，写的时候要很讲究，主语、动词都要写出来

 

5. 这还没有完，我们继续补充

试想一下，除了正常的点击、滑动，在手机上还有哪些可操作的手势？

• 缩放
• 长按
• 上下滑动（目前我们只梳理了左右滑动）
• 三个手指滑动（分为上下/左右）
• …

 

6. 我们尝试着做一些延展：

• 缩放
  • 如果在视频上执行缩放操作，视频会产生影响吗？
  • 如果视频已经放大，返回上一页再回来会怎么样？（状态的交叉分析）
  • 如果有影响，划动到下一张再返回来会怎么样？（状态的交叉分析）
  • Tpis：你看，当你能想到的东西越多的时候，你要写的东西就越多，这里建议你把视频设计成不能缩放，当你发现这些问题以后，可以把「视频不能手动缩放」这个规则写在交互文档里。
• 长按
  • 长按视频区域会有什么效果？
  • 长按播放按钮会是什么效果？是一直切换播放/暂停的状态，还是不动呢？
  • 长按进度条不松开手会是什么效果？
  • Tips：以上同样是交叉分析，通常情况下，这些不是必须写的，因为程序员小哥哥不会特意去加这个操作。
• 上下滑动
  • 视频正在播放时上下滑动，在视频播放区域上下滑动，是整个页面滑动还是调整声音大小？
  • 如果整个页面向下滑动，屏幕上方会不会出现类似刷新的功能？（淘宝向下滑动会出现最近浏览）
  • 整个页面向上滑动时，若视频超出了屏幕，是暂停播放，还是在屏幕中显示一个悬浮窗口继续播放？

• 这里再重复强调一下写文档的细节吧，比如我在交互文档中写到：「上下滑动页面时，会调整视频的音量」
  • 这时候你要明白一件事情，程序员的思维就是执行命令的思维，他会给你做成这样：
  • 当你进入页面时，不管视频有没有播放，只要上下滑动，页面就会调整音量，或者当你播放视频时，不在播放视频的区域上下滑动，也会调整音量
  • 所以这时候你要在交互文档中很明确的写出来：「当视频正在播放时，在视频播放区域上下滑动，会调整视频的音量，其他区域不会」

 

7. 交互文档还没写完，接下来还要考虑一些特殊状态：

• 左右滑动图片时，如果滑动到一半不松手会怎么样？
• 如果视频正在播放，滑动到一半不松手，视频是否继续播放？
• 滑动视频进度条，如果一直滑动但是不松开手怎么办？
• Tips：重要的就是细节，把每一个步骤拆解成多个步骤，哪怕是一个点击，你都要拆解成 点击前、手指碰到屏幕时、手指离开屏幕时

 

8. 最后我们还要考虑「手机自带的按键」

• 如果视频正在播放时，按下了手机的Home键会怎么样呢？
• 如果视频正在播放时，按下了手机锁屏键，这时会怎么样呢？
• 按下Home键或者锁屏键，过一会再回来会怎么样呢？
• 如果按下音量键会怎么样呢？
• 如果音量太大，软件会不会给用户提示呢？

• 这里可以提一个案例，很多小游戏在玩的时候都会让你看一些30秒的广告，在播放广告的时候，如果你按下手机自带的Home键退出，这个广告是会自动暂停播放的，设计者已经想到了这种情况，强制你必须看完广告才行，这些特殊情况并不是可有可无，而是我们在正常工作中要考虑到的，这些都是要写在交互文档中的一部分内容。

 

其实写到这里已经足够了，等你遇到问题可以再补充，比如：

• 视频在未播放的状态下，封面应该显示什么内容？（像淘宝这样的电商，商家肯定希望视频的封面能自己控制）
• 进入页面时，视频是否需要自动播放？（小米商城的视频会自动播放，淘宝就不会）
• 播放视频时，声音是开启的还是关闭的？如果声音是开启的，默认音量是多大呢？
• 播放视频时，如果将手机横过来，视频会自动全屏吗？

在我的交互文档课里并没有教你如何画图，因为画图2天就能学会了，今天给大家讲的才是东西普通人1~2年都做不到，这也正是我教会你最值钱的地方。

新手一定要有这样的意识：交互文档不在于你画的多好，而在于你能提供什么样的内容，会「画」文档的人只值1千块钱，并且是可以随时被开除、随时被替代的，而能写出这样文档的人是无价的，是别人无法替代的，即使要开除人，也不会选择你，所以要把重心放在「思考能力」上。

 

原文地址：交互设计训练营（公众号）

作者：