唐老鸭

知行合一,知道怎样考虑怎样取得实操性,怎样去考虑,很重要。

 

榜首章    交互文档根底概念

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

  • 交互文档也称DRD,是用来告知他人「页面规划细节」的一个阐明文档。
  • 包括页面跳转逻辑、页面交互逻辑、页面显现状况等细节的阐明。

 

二、为什么要写交互文档?

  • 交互规划师的作业便是完善细节规划,那你规划的这些细节应该怎样告知开发呢?口述当然是不可的了,榜首是记不住,第二是会了解过错,第三便是最重要的一点,没有前史记载。
  • 现在办共用的谈天软件十分多,可是一切企业仍然运用邮件的办法交流,这正是由于邮件能够作为交流依据保存下来,没有交流记载就等于没说,交互文档也是一个道理,你要把你做的一切细节都写下来,给其他人发邮件,告知对方要做什么、要怎样做。

 

三、交互文档给谁看?

  • 给产品司理看:交互逻辑、交互办法,需求与产品司理承认。产品司理是把控整个产品的一个人物,任何工作他都需求做到心里有数,包括交互规划。
  • UI规划师看:交互规划会包括许多状况、许多细节、许多页面,UI规划师要保证每一个状况、每一个页面都画出来,这样在开发的时分才不会漏掉东西。
  • 给开发人员看:代码逻辑和咱们一般说话的逻辑不同,说话的时分能够是点击这儿跳转页面,而程序员需求知道点击什么方位,运用什么办法跳转到哪一个页面,半途需求判别哪些规矩,假如半途失利怎样办…因而交互文档就更重要了。
  • 给测验人员看:测验岗位也称QA,归于研发部门旗下的一个岗位(许多小公司没有这个岗位),你需求把你一切的规划细节都告知他,然后他去测验一遍终究作用与你规划的是否彻底一致(不包括UI)。

 

第二章    交互文档结构

一、交互文档的结构

一个完好的交互文档包括了:

1.项目布景:

  • 现在看到的这个文档,是需求经过团队许多岗位一同谈论才干履行的(要点是谈论,也称为需求评定),许多公司的产品司理都是拍脑门儿想的需求,这会导致整个团队往过错的方向走,因而介绍需求布景十分重要,让咱们一致方针,之后在谈论中咱们才干提出更好的定见;
  • 一起,产品司理也应该告知咱们,这次是做完好的优化,仍是快速迭代的办法,接下来的计划是怎样样的,周期是多长..(这是产品司理需求做的工作);
  • 除此之外,项目布景还为将来翻看前史留下记载,半年后你再看这个需求,其时做了什么、为什么做、都有谁参加,一下就很明晰了。

 

2.需求列表

  • 需求列表指的是你接下来要做哪些「功用点」,用简略的文字描绘,在哪个环节要做什么工作,包括哪些页面、哪些体系。

 

3.更新记载

  • 方才说过,这个文档是拿来给咱们谈论的,只需谈论就会有修正,因而每一次修正的记载都应该写在这儿面,不只仅是会议记载,更重要的是你为什么要做成现在这样,当你的领导问你为什么不必另一种更好的计划时,你能够拿出更新记载说:咱们其时也用过这个计划,可是技能提出这个计划开发周期太长,所以咱们挑选了一个暂时计划。

 

4.信息架构图 / 事务流程图

  • 这两个是产品司理在规划初期要画好的,不需求咱们做什么。

以上「大多是」产品司理要做的工作,下面才是交互规划师要做的要点内容:

 

5.规划计划

  • 这儿写的便是交互细节,页面怎样跳转、页面包括哪些元素,有哪些规矩、哪些状况等,全都要在这儿写清楚;
  • 一般都会在每个页面左上角写上页面称号,或许写这是哪个页面的什么状况;
  • 页面中每一个按钮的点击作用以及点击后呈现的页面、款式,都要展现出来;
  • 要把规矩写在下面,什么时分能点、点了今后显现什么等..

 

第三章    交互文档的格局

一、在写交互文档之前,咱们先来一致一下文档的内部叫法:

 

二、不要把一切交互放在一个页面

  • 写交互之前,依据「功用点」把一切要画的页面分好页面,一个页面只讲一个需求。

  • 假如一个页面中有2个功用点,把他们分隔来讲,除非这两个功用有交集,分隔很难说清楚。
  • 比方下图中,在「产品概况」页需求做2个功用,一个是添加产品轮播图,一个是产品库存的判别逻辑,这两个彻底不相关的功用就要拆开2个页面独自讲。

 

三、同一个页面的不同状况,尽量在一个页面中展现

  • 界面除了跳转、弹窗逻辑,各种极点状况的界面也「要」放在同一个页面中展现,不要再新建一个「页面」
  • 图中的「其他状况」,包括了无库存时怎样显现、产品已下架时怎样显现,当然像其他页面无网络、过错提示等,都放在同一个页面中展现。

四、界面交互阐明

4.1:上面都是结构,而从这开端便是交互文档的核心内容了,页面中一般都会用数字标示哪些当地需求做交互阐明(如图),然后在旁边写上相对应的交互阐明(有些是在下面,有些是在右边,一般都会依据界面空间摆放方位)

我不是很引荐标数字的办法,由于数字会盖住部分页面,而且点击规模比较含糊,我常用画方块 + 线条标示(如下图),这样既能明晰点击规模,也能很快的找到相对应的内容。

4.2:在做界面阐明的时分,还能够做到一件工作,便是给阐明加分类(如下图)

有时分UI会对你的规划进行改造,比方图中赤色框中的广告位,假如你仅仅画了这么一个方块,UI没办法了解你的目的,或许会画出一个比这个大许多的广告位(真的会这样)。

所以你要在规矩阐明下方独自列出一行跟UI讲,这个广告位的高度主张不超越100PX,要展现在榜首屏,一起还要能看到「最近阅览」。

同理,假如你有什么需求开发留意的、需求测验留意的,最好都独自列一行写出来,这样的交互文档逻辑明晰、规模全面。

 

4.3:规矩要写哪些方面?

操作方面:

  • 点击区域:哪些区域可点击,标示出来,并阐明点击规模是多少(这时分运用方块区域就比数字好许多)
  • 点击作用:点击今后会发作什么工作?是跳转页面,仍是弹出窗口?
  • 操作改变:比方购物车里的产品,当产品撤销勾选时,当即购买按钮是不可点击的
  • 动效改变:不论是简略的切换页面、弹窗办法,仍是杂乱的动态作用,都需求描绘出来
  • 操作手势:比方长按、左划、右划、两个手指缩放,三个手指滑动…

 

页面状况:

  • 默许状况:比方很常见的《我已阅览规章制度》需求先勾选才干持续操作,那在默许状况下,他是主动勾上的吗?
  • 极限状况:比方一段文字,最多输入几个字、最少几个字,假如到达极限状况会呈现什么交互作用?
  • 操作过错:当用户呈现操作过错时,应该怎样提示?
  • 加载失利:比方淘宝主页的某一张图片显现失利了,这时应该怎样显现呢?
  • 空状况提示:当没有数据时应该怎样显现?比方查找无成果
  • 榜首次进入页面时:榜首次翻开网站,需求显现哪些内容?每个内容别离是什么状况?
  • 第2次进入页面时:用户退出再进来,是否保存上一次的操作?是否受到上一次操作的影响?

 

其他:

  • 按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

转载请注明:明升m88.com网 » 还在为写「交互文档」忧愁吗?

登录保藏
 
你或许喜爱的:
2007-2019 · 手势交互简史2007-2019 · 手势交互简史
怎样输出明晰有用的规划计划怎样输出明晰有用的规划计划
你说我的产品欠好用? 产品可用性(Part1)你说我的产品欠好用? 产品可用性(Part1)
UI规划命名办法及常用控件共享UI规划命名办法及常用控件共享
网格的根底网格的根底
按钮标准系列 - 「按钮尺度」的规划详解按钮标准系列 – 「按钮尺度」的规划详解
干货 | 怎样构建UI组件规划标准干货 | 怎样构建UI组件规划标准
大厂产品告知你:提高交互体现的8个技巧大厂产品告知你:提高交互体现的8个技巧
‘信息引导’超全总结,让你的规划有理有据‘信息引导’超全总结,让你的规划有理有据
三个视点,带你了解报到三个视点,带你了解报到