如何输出一份合格的交互设计文档?

做一件事之前一定要先想清楚做这件事的目的,为什么要做这件事,只有这样,才能万变不离其宗,不会变成为了做事而做事,这很可怕。拿交互设计文档来看,为什么要写交互设计文档,这是开始写之前要想清楚的。


做一件事之前一定要先想清楚做这件事的目的,为什么要做这件事,只有这样,才能万变不离其宗,不会变成为了做事而做事,这很可怕。拿交互设计文档来看,为什么要写交互设计文档,这是开始写之前要想清楚的。

如何输出一份合格的交互设计文档?

为什么要输出《交互设计文档》

产品进行需求分析,得出需求文档,交互设计师要将抽象的需求转化为具象的线框图。这其间涉及到信息架构设计、导航设计、流程设计等分析,最后才能够输出较为合理的线框图。交互设计文档(缩写DRD)就是要将这些分析过程用图视化的形式展示出来,让团队成员明白产品设计成这样的原因是什么?增加交互设计的说服力。

同时一份详尽的交互设计文档,将很多产品细节都用图视和文字的形式固定下来,起到了规范的作用,有助于团队成员的沟通,降低沟通成本。

交互设计文档都有谁在看?

产品:交互文档可以理解成是将需求文档图视化的一个过程,所做的产品原型有没有满足用户需求,达到公司的商业目的,交互设计师要和产品反复沟通,确保达成用户和公司的目标。

UI设计师:UI设计是将灰不溜秋的线框图转化为美美的视觉稿的人,他必须知道有多少个页面要设计,这些页面之间的跳转逻辑是怎样的,遇到特殊情况(数据加载、异常流程、网络异常等等)如何设计,这就是交互设计文档对UI设计师的意义。

开发人员:不管是iOS、Android、H5等前端开发人员,还是后端开发人员,需要从交互文档里知道,产品要实现多少功能?如何去实现?涉及到多少页面?这些页面又是通过什么去跳转的?碰到异常流程怎么处理?…将这些问题理清后变成代码语言,从而将产品实现出来。

测试人员:我们知道,产品必须经过系统测试才能上线,而进行系统测试之前,测试人员要进行测试用例的梳理,测试用例必须得覆盖所有的功能甚至是action,才能做到上线无bug,或者是少bug状态。测试人员整理测试用例表的时候就会参考交互设计文档。

交互设计文档都包括哪些东西?

知道了谁会看DRD以及DRD的意义。现在来说说DRD都包含哪些东西。

如何输出一份合格的交互设计文档?

DRD的目录

这是我整理DRD的一个目录,包含九大部分:文档封面;设计背景;信息架构;整体业务流程;任务流程图;页面流;功能列表;交互规范说明;线框图。

①文档封面

把交互设计文档看成一本书,文档封面就是这本书的封面,封面就得包括书名,作者,出版时间等关于书的基本信息。同样的,DRD的文档封面包括:项目名称;版本号;时间;交互人员;内容。1.0版本的内容多为创建一个新的APP或者ERP,迭代版本的内容则是重构某个功能的页面,增加/删除某个功能等等。

如何输出一份合格的交互设计文档?

文档封面

②设计背景

交代清楚产品定位;具体的设计内容;设计的目标是什么,让观众通过设计背景模块了解这次交互设计的一些基本情况。

③信息架构

产品分为几个模块,每个模块下包含多少信息和标签,一般会用思维导图的形式画出信息架构图。推荐一个Mac OS下的思维导图软件IThoughtsX,一款简约易用的导图软件。

④整体业务流程图

整个业务模式涉及到多少主体?每个主体要负责哪些模块?这些业务的流程是怎么样的?业务流程图中的主体不光可以是买方、卖方等人,还可以是各个机构或者是APP、ERP等产品形式。

由于公司的业务流程涉及保密信息,所以从网上找了个购物的业务流程。一般业务流程会用泳道图的形式来表示。

如何输出一份合格的交互设计文档?

购物支付的业务流程

⑤任务流程图

梳理完产品的信息架构和业务模式,接下来就要将产品分解为多个任务,一般一个产品只有一个主干任务,其他则是支干任务(微信的主干任务是即时聊天,朋友圈、摇一摇、购物、设置等都属于支干任务)。

每个任务用一个流程图表示,太过简单的任务可以不需要画流程图(像设置里的任务,一般只涉及到两三步操作)。

⑥页面流

一个任务流程图,继续具体化,就要输出该任务下的页面流了,不同任务之间的页面会存在重叠,这样就可以将所有任务流程汇总,形成整个产品的页面流。页面流不需要将每个页面的内容都详细的画出,只要画出每个页面涉及到的行动点(按钮)。

关于三种流程的设计可以查看《产品的三种流程图,你都知道吗?》

⑦功能列表

跟我司测试人员沟通之后,发现在交互上列出整个产品涉及到的功能点很有意义,测试可以通过这个去梳理测试用例,开发也能根据功能列表去比对发现哪些功能实现了,哪些功能没有实现。

⑧交互规范说明

对于一些特殊的交互状态,包括产品会共用的控件我都会放在这个目录下。

  • 单位:规范产品中涉及到的所有单位,例如历程用“公里”,时间用“2016年11月14日”的形式,金额用“元”或“¥”等等。
  • 网络异常处理:网络异常时、网络切换时(从WiFi状态到蜂窝状态)、网络中断等情况下的交互设计。
  • dialog和toast:各种临时框和toast的样式和文案的规范说明等。
  • 数据加载:进入新页面的时候,数据如何加载,用什么样式提示用户页面正在加载,需不需要异步加载来提高用户体验等等。
  • 版本控制:强制升级时产品怎么处理?非强制升级时产品怎么处理?升级的弹框和文案是怎样的?一般在版本1.0下会和产品、技术确定产品的升级方案。

⑨线框图

经过了上面重重分析,终于可以放开手画线框图了。线框图一般包括三个部分:每个页面的内容和排布;各个页面之间的跳转逻辑;一些交互说明。

用什么工具写DRD?

思维永远比工具重要,你可以用InDesign、可以用PPT或者keynote、也可以用Axure等。

我一般用Axure整理和输出文档,交互评审完之后会将整个文档通过HTML的形式分享出去,给团队的各个成员查看。用浏览器就能打开,而且还会在浏览器左侧形成目录,浏览起来很方便。

如何输出一份合格的交互设计文档?

用Axure导出的网页形式

一千个交互设计师就有一千个交互设计文档,根据不同的项目和公司不同的工作流程,按需设计自己的交互设计文档。虽然交互设计文档不要求做的很美观,但至少要做到规范和整齐。

 

本文由 @邹志楠(微信公众号:UE修养) 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/26791/

(0)
CatherineCatherine
上一篇 2017-05-15 17:47
下一篇 2017-05-15 19:40

相关推荐

  • 反应(Reaction):生活中并不是所有的事情都那么“赞”

    我在Facebook跟我所关心的朋友们分享各种各样的事情——从完成60天瑜伽练习的庆祝状态到悼念失亲之殇。从我的故事中也连接了一群相似的人,有相似的故事要分享。有时候我们只是想借助一个简单的方式去告诉分享者我们真的很喜欢他们的故事,或是当看到他们的生活发生挫折,简单地表达一下同情。

    2017-05-26
  • 最浓缩的概念:什么是用户体验,用户体验设计怎么做?

    如约而至,这是体验三篇文章中的最后一篇。本篇我会说明一下何为UE,及UED的本质是什么。其实,我相信很多人其实能感觉到体验是什么,但是一直没能用一句话来表达出准确的意思。那,在说明之前先说什么是User Experience Desgin(UED),为什么大多称之为UXD呢?

    2017-05-25
  • 在交互稿中,应重视「键盘类型」的标注

    在交互稿的标注中,我们经常会忽略键盘的说明,这是不对的。键盘在用户的交互过程中起到了非常重要的作用,尤其在多个输入框的场景下。

    2017-05-13
  • 圆享——交互设计(1)

    · 品牌形象 · 艺术活动 · 平面设计 ·· 视频多媒体 · 交互设计 ·· Branding · Events · Graphic ·· Vedio · Interaction ·ANIMA iki《ANIMA iki》 获得过第五届“流明奖项”(Lumen Prize),一个巨大的发光悬浮球体。创造沉浸式、有魅力的体验,通过运动、纹理、灯光和声音来探索艺术装置本身与其周边的关系。该球体能够发光,是整个房间里唯一的光源,吸引着游客进...

    2018-04-25
  • 用户体验才是核心竞争力 英雄互娱《一起来冒险》趣味至上

    (点击上方“GameLook”↑↑↑↑↑↑,订阅微信)近几年来,随着手游用户增长速度趋于平稳,手游数量的增多,人口红利的优势已经消失殆尽,如何曝光率成为困扰所有开发商的共同难题。在买量成本水涨船高的情况下,靠忠实玩家形成的用户口碑形成病毒传播则成了很多游戏的“制胜法宝”。经过了几年的发展之后,玩家们越来越懂游戏,千篇一律的复刻已经无法提起人们的兴趣,人们有了自己对于游戏的追求,这也是市场上越来越多细分品类游戏成功的主要原因,比如《纪念碑...

    2018-01-30
  • 【整理】交互设计七大标准

    1交互设计七大标准(1) 菲茨定律(Fitts'Law)2交互设计七大标准(2) 希克法则(Hick’s Law)3交互设计七大标准(3) 神奇数字 7±2 法则4交互设计七大标准(4) The Law Of Proximity 接近法则5交互设计七大标准(5) 复杂性守恒定律6交互设计七大标准(6) 防错原则7交互设计七大标准(7) 奥卡姆剃刀定律(简单有效原理)请关注公众号“UX设计艺术中心”,学习更多转载此文,请署名原作者及来自微...

    2018-03-15
  • 用Axure水平菜单做导航菜单原型

    哈喽,"梯子"们好,这么多天都没有更新过Axure的教程了,理由如果是"沉迷吃鸡,无心做教程"未免也太勉强了,额......这个理由好像并不勉强啊,其实就是休息了一段时间。 好了,下面就来介绍一下这几天收集的比较多的"A技",额......Axure的技巧在浏览网页的时候,我们会经常性的点击或者鼠标悬停在"总有一款适合你"的顶部选项,这个就是顶部导航菜单。有的"梯子"就直接从元件库中拖拽一个"矩形"或者"文本标签"直接使用,如下图:其实...

    2018-03-16
  • app交互设计:手势流

    在智能交互中,手势已成为新的“点击”。现在每次打开手机里的app、游戏时,都需要用到点击、拖、拉等动作。单看点击的话,设计师与开发者只需要考虑用户点击屏幕哪里体验更好。但是手势不同,手势操作还需考虑什么动…

    2015-11-17
  • 四步解说,搞定吸引人的移动端详情页设计

    本文依然是关于详情页设计,涉及到了排版/构图/色彩/氛围点缀/字体等多个方面。以下是我总结了可以让你的详情页脱颖而出的四个系列的套路,兴许对你们有用!enjoy~

    2017-08-04
  • 卡片短信:如何把交互设计做成一门生意?

        点击信息与交互设计关注我们! 欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cn最近使用安卓手机走查竞品,发现安卓的短信大变样,变成了卡片式短信,经过深入了解发现,卡片式短信的背后…

    2017-08-01