如何写一份出色的交互设计文档,给程序员以美的享受?

交互设计文档分为两个版本:一个是界面元素标注版,另一个是附带交互逻辑版。那么,具体的写法和要求如何呢?

交互设计文档分为两个版本:一个是界面元素标注版,另一个是附带交互逻辑版。那么,具体的写法和要求如何呢?

为什么要写这篇文章?

写这篇文章之前,遇到过很多朋友问道:『交互设计的输出物是什么?』『交互设计师怎么与程序员协作?』、『交互设计师还需要出文档?』等等一些问题。

更多的人在寻找一个交互设计文档的写法教程,每一个人的回答都不相同,但是很多入门的交互设计师遇到这个问题时觉得很棘手,因为不清楚自己应该如何写一份符合自己产品业务逻辑或产品规范的设计说明文档。

这篇文章就是给这些有很多疑问的同学写的,可以解开一些疑问,但是指望这篇文章就写出高质量的文档显然不可行,所以看完这篇文章后可以从中提取一些思路,自己整理一个属于自己的设计文档规范写法的模板,长期积累下来,就可以形成自己的设计风格和规范。

什么是交互设计文档?

我们先来统一一下概念以及名词,以免后续因为说法不够一统造成误解。

交互设计文档一般是指:交互设计说明文档(交互设计师产出的规范文档),又称DRD(Design Requirements Document),工作中一般称之为"交互设计文档"。

为什么要写交互设计文档?

如果问不写交互设计文档可以吗?

答案是:可以不写,那么写与不写的区别究竟在哪里? 我们从两个方面分析一下。

1.可以不写交互设计文档的情况

下列情况是目前很多公司存在的情况,既没有专职交互设计师,也不出文档,但他们也在做产品,这些情况有可能不需要写交互设计文档。

  • 产品没有交互设计环节
  • 团队没有交互设计师角色
  • 交互设计没有系统化和规范化
  • 开发边界不需要控制
  • 产品没有动效或交互细节
  • 有经验丰富的产品经理
  • 产品没有复杂的人机交互逻辑
  • 产品只有一个产品经理或负责任的角色主要负责

2.要写交互设计文档的情况

下列条件具备后写交互设计文档更具意义:

  • 产品有清晰的交互设计流程
  • 产品团队中有专职的交互设计师
  • 团队已有系统化和规范化的作业流程
  • 开发实现交互设计时需要定义边界(验收标准)
  • 产品有比较复杂的、丰富的动效
  • 产品有较为复杂的人机交互逻辑
  • 产品有多个产品经理或部门协作

写交互设计文档的作用就很清楚了,如果要写这样一份文档最大的好处是,可以非常清楚地帮助程序员认知做出的产品是什么样子的。

看个小例子:

V1.0 没有交互说明文档的版本(可能由产品经理PRD代替)

产品需求的描述是这样的

需求说明:在封面图片上点击图片之后翻转一圈。

(文字描述交互与需求)

开发人员根据这句话脑补怎么翻转?360°?从左边还是从右边?转速怎么样?这些都需要找PM问清楚,如果遇见专业的PM还可以能讲清楚,但如果遇到经验不足的PM,就会说让开发人员你看着做一个就行…...。

V2.0 没有交互说明,但是有UI设计的版本

UI设计出图是这样的

1468250003-9349-image001

对于需求和期望达到的效果,静态可视化的说明要比纯文字更容易理解,需要给开发人员一个具象化的目标,否则程序员做出来的东西很容易与期望目标偏离,即想要的A而开发给的却是B。

V3.0 交互原型加演示DEMO

动态demo:

1468250003-1044-image002

输出HTML文件预览

1468250003-3593-image003-1

小结:编写交互文档是为了将更丰富的人机交互动作、事件准确地传达给开发人员,确保实现边界。

若只是语言或静态图片交付给开发、测试人员,那么他们很难构建一个产品形态,不好把控开发方向,另一方面,交互文档也是给参与项目的其他人快速了解项目的背景,不用到处询问设计细节。

其实写作交互设计文档最大的好处在企业管理层面上,产品的交互设计文档作为产品资料入档,后续人员变动后,新来的人可以快速掌握整个产品的核心设计。减少人员无谓的沟通,不过有一点,这个文档要及时更新,有变动要发出更新日志,不然还是少不了同事之间的语言沟通。

交互设计文档由谁来写?

谁来写这个文档本来不是问题,显然谁是交互设计师谁提供这个说明文档,但是,因为一些别的原因导致这成了一个问题。
比如:有些公司没有交互设计师这个职位,所以不论岗位划分如何,如果你的团队中有人负责交互设计这个角色的工作,那么这个文档就是属于这个角色对应的人员来提供。

也有可能交互设计的工作被划分给了UI设计师,所以越来越多的UI设计师改了自己的Title为:UI/UE 设计师

交互设计文档要给谁看?

根据项目组角色来定需要提供给:PM、开发人员、测试人员、需求人员、业务方人员等。

交互设计文档更新机制

有任何一处变动需要更新到说明文档中,就需要通过团队的沟通渠道发送通知,我们公司是SVN服务器,设计师更新了设计文件版本或说明书版本后会同步到SVN服务器后生成最新地址与日志记录后发送邮件抄送相关项目团队人员。

更新记录如下图:

1468250005-1256-image004-2

交互设计文档要写什么内容?

我不想说一大堆高深的理论,那么下面的内容我会按照实际流程帮助大家梳理出怎么制作文档。

很多同学在新建一份空白文档后不知道具体写什么内容,如前面所说,对于一份交互设计说明书,你只需要把原型截图或原型直接画成一个文档即可。

其实交互文档就是页面文档,所有的软件页面、状态都分离出页面进行展现,然后加入页面流程和交互动作说明文字、箭头指示线条等。

关键点逻辑结构、页面跳转、交互状态的文字说明,统一交互体验动作,确保页面组件的一致性。 

小例子: 交互设计说明文档截图

1468250003-5718-image005-1

这是一个包含交互界面动作、逻辑步骤、页面流转、文案与注释的实例,图中的交互动作说明是将所有出现的静态化界面的内容写在文档里进行展示。如果你想直接展示动态交互,可以使用原型设计工具设计好交互原型之后再截图编辑文档,交付文档时配合着原型(导出HTML)演示,这样会更有效率。

交互设计说明书的文档结构:

版本信息一般包括版本、日期、参与人、变更内容简要、备注信息。

目录

这个无须多说,平时我们看的书基本都有目录,不过记住目录要合理分级以分清主次。

Log更新记录页

这个页面是用来描述某次更新的信息简介与页码导航等。 下图为交互设计说明文档的更新记录页的示例:交互设计说明书的更新日志 。

交互设计说明书的更新日志

1468250004-9453-image007-1

交互行为逻辑图+文字说明

下图某一个应用商店的更新应用交互逻辑+文字说明图例。

1468250005-4472-image008

交互设计说明书中的交互逻辑页面流程

从上图中可以看出,这个说明文档是把应用更新功能拿出来当一页,包括它的架构、交互、流程、逻辑、交互事件及文字解释说明。 这个过程是针对产品经理和程序人员而言的,因为他们需要看明白交互流程逻辑。

页面展开图+逻辑+文字

下图是页面、元件、文案、逻辑、页面状态的展示:

1468250006-7192-image009-1

交互设计说明书的页面元素

这个部分是针对视觉而言的,需要将所有的页面都展开解释一遍,共用部分可以单独标记。

其他单独的交互动作详细解释介绍

此部分是对不在流程里的单独的或独立的交互的补充书写的。

交互设计文档的责任边界

一般情况下,如有需求变更或流程更改,就需要同步更新交互设计说明书并发送给相关同事,同时要抄送给对应项目的测试与产品人员,此文档加上PRD也是最后的验收依据,所以中途变更需要记录log。

给交互设计师们总结一下:

  1. 给程序看,使用独立的章节写明交互逻辑、页面流转
  2. 给视觉看,使用独立的章节写明所有的页面展开、公用页面交互等
  3. 给测试看,加好注释与说明
  4. 交互需要按照功能逻辑一个个排着序写,这样更容易理解
  5. 交互事件的状态需要用截图形式展示出来,不建议使用大量文字描述,因为很多人不看小字而是直接看图

 

作者:阿西UED,微信号:Hello_Wangsir。

内容节选自《交互设计那些事儿》,有兴趣的可以去京东、天猫、当当搜索 《交互设计那些事儿》以了解更多,具体案例在这本书的第八章。

1468250065-2379-VcRoHJN1RK3sgkK7qicqIWKhKpKA1468250064-4003-6S0fia8hf6cogZhjGMCkFnzeCmuQ

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

(0)
iouedioued
上一篇 2016-07-11 23:11
下一篇 2016-07-12

相关推荐

  • 交互模型的构建方法

    交互建模用来对应用当中的交互模式进行定义,它同时还诠释了这些交互模式是以怎样的方式被整合成为具有高度一致性的、容易被用户理解的交互模型的。我们曾经在第二章里对iOS交互环境的概念模型和空间模型进行了解析…

    2014-12-01
  • AR(增强现实)应用中的交互设计思考

    作者认为AR未来无论是在C端还是在B端都会存在广泛的应用场景,并能够在许多场景下颠覆用户的使用习惯,解决一些目前无法有效解决的用户需求!比如最近突然火起来的AR游戏《口袋怪物Go》就让大家见识了AR应用的潜力。本文主要和大家探讨一下作为交互设计师,在设计AR应用时需要思考的问题。

    2017-05-22
  • 华景招聘用户体验分析师啦!

    作为华景员工,除了能体验旅游之外,还能体验华景食堂的凉皮儿和拉面,包子和油条,腊牛肉和酱猪肘,狮子头和卤肉饭,肉夹馍和艇仔粥,老婆饼和豆沙酥,酸辣汤和叉烧饭,泰式河粉和肉酱意面,干煸四季豆和蒜蓉蒸茄子……华景集团招聘1. 用户体验部    用户体验分析师岗位职责:*负责产品的用户研究,分析用户的使用习惯、情感和体验需求*负责原型/产品用户体验评估工作,参与产品的交互界面的设计,分析影响产品用户体验的因素*定期开展用户测试,观察用户使用产...

    2018-05-04
  • 网易资深设计师:ToB产品的6条交互设计经验

    网易UEDC –李东岳:本文希望能够总结一些B端产品的设计经验,帮助大家更好的进行ToB产品的交互设计 工作。

    2017-09-26
  • 【干货】Axure产品原型在手机上运行的完整教程

      图1 模拟丁香园的高保真原型   在一般的开发工作之前,我们通常会设计产品原型,大部分为axure绘制的线框图作为产品的PRD文档,供UI和开发进行前期工作,但是有的时候客户、领导想在开发之前,看到产品的概貌…

    2014-11-26
  • 老子花了1761,你就给我这用户体验?!

    关注公众号回复关键词回复“模考”获得还原机考环境的口语模考回复“TPO”获得TPO模考软件回复“机经”获得托福历年真题回复“作文批改”获得趴趴助教亲自批改作文更多福利礼包领取请添加微信:papalovetoeflSpeaking-Direction来自趴趴托福00:0004:06托福虐我千百遍,我待托福入初恋托福,作为一个从早上八点半到中午十二点半多的长时间持久战,在考试过程中,同学们总会到一些奇奇怪怪的事情,有一些奇奇怪怪的经历比如说...

    2018-03-01
  • 清华美院交互设计考研相关问答

    分享考研资料集:你的问题我来答!一考研资料福利贴这是新蕾北京公众号第001篇资料帖今天分享的是清美交互设计考研相关资料汇总针对此专业考研相关问题我们一一作出解答01进入通道报考清华大学美术学院交互设计研究生,可以报考两个方向,一个是信息艺术系的交叉学科硕士的交互设计方向,另外一个是信息艺术设计系的信息艺术设计的普通硕士,但是他们的考试内容有较大差异,进校后都可以学习交互设计,导师组基本相同,由于近年来大部分招生名额倾向于交叉学科,本文重...

    2018-04-28
  • 交互设计中的项目跟进怎么进行?

    交互设计的常见流程可以划分为:需求分析、设计规划、设计实施、项目跟进、成果检验五个流程。很多人以为从无到有的过程才是最重要的环节,观点并没错,但我今天想说的是如何进行项目跟进。

    2017-05-30
  • 泛滥的移动产品设计模式

    如果你是一名移动产品设计师,你可能会同意这样的观点:参考借鉴别人的设计不算抄袭。这不仅是最佳的练习方法,也是一种设计模式,而且还符合业界主流的设计趋势,同时还能确保在用户熟悉的模式下来创建可用性的界…

    2016-10-18
  • 移动设计:体验、交互和创新之精髓

    移动优先的设计策略将使产品拥有高度任务驱动的体验。用户可以将注意力聚焦在需要完成关键任务上,而不会被传统桌面产品中过多的无关因素所干扰。

    2017-06-04