唐老鸭

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

 

第一章    交互文档基础概念

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

  • 交互文档也称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千块钱,并且是可以随时被开除、随时被替代的,而能写出这样文档的人是无价的,是别人无法替代的,即使要开除人,也不会选择你,所以要把重心放在「思考能力」上。

 

原文地址:交互设计训练营(公众号)

作者: Long

转载请注明:学UI网 » 还在为写「交互文档」发愁吗?

登录收藏
 
你可能喜欢的:
UI设计命名方式及常用控件分享UI设计命名方式及常用控件分享
网格的基础网格的基础
按钮规范系列 - 「按钮尺寸」的设计详解按钮规范系列 – 「按钮尺寸」的设计详解
干货 | 如何构建UI组件设计规范干货 | 如何构建UI组件设计规范
大厂产品告诉你:提升交互表现的8个技巧大厂产品告诉你:提升交互表现的8个技巧
‘信息引导’超全总结,让你的设计有理有据‘信息引导’超全总结,让你的设计有理有据
三个角度,带你了解签到三个角度,带你了解签到
绝无仅有!2019年最全的UI设计之输入字段剖析绝无仅有!2019年最全的UI设计之输入字段剖析
产品设计师要了解的数据指标产品设计师要了解的数据指标
完整的交互设计流程是怎样的?完整的交互设计流程是怎样的?