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

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

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

为什么要写这篇文章?

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

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

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

什么是交互设计文档?

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

交互设计文档一般是指:交互设计说明文档(交互设计师产出的规范文档),又称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

相关推荐

  • 静态码限额后,微信支付还能兼顾合规和用户体验吗?

    【新朋友】点击标题下方蓝色字“经济晚报”关注【老朋友】点击右上角,转发或分享本页面内容4月1日,央行关于静态码扫码支付限额500元的新规开始正式实施了,从这天开始,大家通过静态二维码支付的时候每天限额是五百块。你感觉到了不方便吗?新规一出,很多小伙伴们都产生了疑问:以后我扫码支付消费是要被“管制”了吗?如果每天的限额用完却还有扫码支付的需求咋办?新规如何配合?微信支付上线新产品体验针对用户的这些疑问,微信支付和支付宝这两大移动支付巨头给...

    2018-04-07
  • 【译文】雨天里的交互细节

    最近出现了很多智能手机用的天气应用。但是在以前,这些应用其实都不是很必要的,我们只要知道早上出门带不带雨伞就好了,所以如果天气应用可以直观地告诉我们这一点就好了。就像妈妈一样,在你早上出门的时候帮你…

    2015-10-30
  • 设计风格养成|5个维度,说说设计师讲述设计风格的正确姿势

    找准方向与维度,从大方向去讲解你的设计风格,只要你执行了,那它就不是什么困难的事情了。

    2017-05-06
  • 2017用户体验行业调查报告

    更多精彩内容:IPO新机制 催生市场四大变化最全关于企业上市流程知识汇总!(强烈建议收藏)由IXDC主办的2017国际体验设计大会于2017年7月12-16日在国家会议中心举行,作为全球极具影响力的体验设计交流平台,吸引了3000多名从业者参加,大会通过主题演讲、工作坊等形式充分交流经验,共享体验设计盛宴。而作为一年一度的用户体验行业报告发布也是大会重要的组成部分,备受从业者们关注,报告每年通过全面详尽的调查分析,系统梳理整个行业脉络,...

    2018-02-14
  • 读书会第二期:《用户体验要素》(上)

    《用户体验要素》的作者Jesse James Garrett是美国用户体验咨询公司Adaptive Path的创始人之一,2005年他发表了《Ajax:A New Approach to Web Applications》这篇文章,标志着Ajax的诞生,因此他在又被称为“Ajax之父”。《用户体验要素》的中文版第1版比英文版整整晚了6年,英文版在2001年就出了,国内常见的是2010年出版的中文版第2版,书里的概念在互联网设计界广为流传...

    2018-04-12
  • 怎样绘制用户体验地图

    内容来自梁宁老师的《产品思维30讲》,这里是第17讲的笔记。怎么画用户体验地图1.完整的用户角色:需要对「第一只羊」有完整地了解。 (「第一只羊」的话题留在下次介绍)2.清晰的目标和预期:清晰描述用户的目标和预期,他为什么来到你的草地上?他要什么?比如,用户买钻孔机,但是他的目标不是拥有钻孔机,而是需要在墙上打个洞。比如吃饭,用户目标是吃饱?还是想要营造气氛?还是想获得一次交流机会?搞清楚用户的目标和预期到底是什么。3.服务触点:用户从...

    2018-04-01
  • 线上与线下零售体验设计分析

    本文作者将结合自己对线上与线下零售的实际体验,与你交流用户体验设计策略相同之处,提升融通思维的洞察力。本文行文思路如下:
    1、用户流量
    2、停留时间
    3、回访频次
    4、客单价
    5、盈利模式
    6、总结

    2017-04-29
  • 不懂这几个交互原则,你一定是假的UED设计师

    如果你对这个题目很陌生,那请赶紧登上这辆末班车,来不及解释了。在日常工作中,我们总是会遇到产品或者开发对你发问“这个按钮为什么要放在这里”,“这里显示的信息条目为什么只剩这几个”blablabla之类。不管是为了在对接流程中更加有理有据,也为了使自己的设计更人性更好用,了解这几条基本原则,也是非常必要的。除非有更好的选择,否则就遵从标准。交互设计之父 Alan Cooper最为人熟知的或许就是这句“除非有更好的选择,否则就遵从标准”了,...

    2018-03-15
  • 4种用户体验研究方法,提升最优化测试

    本文讲述的是户研究与A/B测试相结合,发现问题的真实原因,并进行有效的判断处理。“实验可以证实一个理论,但实验永远无法创造出一个理论。   ” —— 爱因斯坦

    2017-05-09
  • 02案例:用户体验和结婚教练

    用产品经理的视角来看人今天我想讲一个结婚教练的故事。她是我的一个朋友,现在做的工作就是指导30多岁下定决心要结婚的女生,如何能够在一年半之内搞定结婚。她的方法已经帮助了30多个30多岁的女生完成了结婚。这个结婚教练以前是干什么的呢?她以前是一个互联网公司的产品经理。她的这一套结婚的体系内容挺多的,这堂课我想把她最重要的一个环节拿出来分享。这个环节就是如何观察和判断一个人。因为结婚也好,创业找合伙人也罢,都是非常重要的长期关系。改变一个人...

    2018-04-04