如何写好一份交互设计文档?

小楼推荐 小楼一夜听春语 12956℃ 0评论

原标题:如何写1份出色的交互设计文档,给程序员以美的享受?

什么是交互设计文档?

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

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

看个小例子:

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

产品需求的描述是这样的

需求说明:在封面图片上点击图片之后翻转一圈。(文字描述交互与需求)

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

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

UI设计出图是这样的。

image1

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

• V3.0 交互原型加演示DEMO

动态demo。

image2

输出HTML文件预览。

image3

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

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

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

交互设计文档要给谁看?

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

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

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

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

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

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

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

image4

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

交互设计说明书的要点:

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

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

image5

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

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

2. 页面展开图+逻辑+文字。

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

image6

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

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

交互设计文档的责任边界

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

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

1. 给程序看,使用独立的章节写明交互逻辑、页面流转。

2. 给视觉看,使用独立的章节写明所有的页面展开、公用页面交互等。

3. 给测试看,加好注释与说明。

4. 交互需要按照功能逻辑一个个排着序写,这样更容易理解。

5. 交互事件的状态需要用截图形式展示出来,不建议使用大量文字描述,因为很多人不看小字而是直接看图。
更详细的实例以及教程都在阿西UED的《交互设计那些事儿》这本书里给出了,大家需要的可以去了解一下。

交互设计文档分为两个版本:一个是界面元素标注版,另一个是附带交互逻辑版,有兴趣的可以去京东、天猫、当当搜索 《交互设计那些事儿》以了解更多,具体案例在这本书的第八章。

image7

本文的作者:阿西UED,有需要交流的可以加他微信号(Hello_Wangsir)一起讨论。

image8

附上图书的连接:https://union-click.jd.com/jdc?d=bzItiq

 


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 如何写好一份交互设计文档?

喜欢 (26)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 防不胜防啊
    IMP662016-08-02 15:59 回复
  2. 交互还是用交互原型来体现比较好,更形象。交互原型应该是基于产品原型的二次加工。
    kk2016-08-06 15:27 回复
  3. 楼师,怎么在榜别人打广告啊
    风兮寒2016-12-17 11:49 回复