交互设计文档如何写,才给程序员以美得享受?

阿西UED授权发布作者公众号艾欧交互设计ID:aioued文章最后报名线上线下活动:【HBAT创新设计峰会:design+下的生存之道】“写交互设计文档(DRD)目的在于:便于与前端、测试以及开发工程师沟通”交互设计文档重要么?重要!但不是项目必需具备的内容,为什么还要学习呢?其实对于初学者来说,交互设计文档能够很好的梳理产品的逻辑关系、基本的设计规范等问题,让你真正透彻的认识一个产品所有可能性。基本上,在大公司都会写交互设计文档的,便...

交互设计文档如何写,才给程序员以美得享受?

阿西UED授权发布

作者公众号艾欧交互设计ID:aioued

文章最后报名线上线下活动:

【HBAT创新设计峰会:design+下的生存之道】


“写交互设计文档(DRD)目的在于:

便于与前端、测试以及开发工程师沟通”


交互设计文档重要么?重要!但不是项目必需具备的内容,为什么还要学习呢?其实对于初学者来说,交互设计文档能够很好的梳理产品的逻辑关系、基本的设计规范等问题,让你真正透彻的认识一个产品所有可能性。基本上,在大公司都会写交互设计文档的,便于团队协作沟通,有问题好追溯。对于DRD来说,还是根据团队需求来看待,整理DRD还是要耗费一点时间的,如果团队沟通默契,直接输出视觉稿就能开发,这是最高效的形式,如果需要,还是得好好书写DRD的哈。


什么是交互设计文档?

        我们先来统一一下概念以及名词,以免后续因为说法不够一统造成误解: 
交互设计文档一般是指:交互设计说明文档(交互设计师产出的规范文档),又称DRD(Design Requirements Document),工作中一般称之为"交互设计文档"

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

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

答案是:可以不写,那么写与不写的区别究竟在哪里? 


我们从两个方面分析一下:

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

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

  • 产品没有交互设计环节

  • 团队没有交互设计师角色

  • 交互设计没有系统化规范化

  • 开发边界不需要控制

  • 产品没有动效或交互细节

  • 有经验丰富的产品经理

  • 产品没有复杂的人机交互逻辑

  • 产品只有一个产品经理或负责任角色主要负责

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

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

  • 产品有清晰的交互设计流程

  • 产品团队中有专职的交互设计师

  • 团队已有系统化的和规范化的作业流程

  • 开发实现交互设计时需要定义边界(验收标准)

  • 产品有比较复杂的、丰富的动效

  • 产品有较为复杂的人机交互逻辑

  • 产品有多个产品经理或部门协作

        

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


看个小例子:

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

产品需求的描述是这样的

需求说明:实现封面图片上,点击图片之后翻转一圈

(文字描述交互与需求) 


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

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


  • UI设计出图是这样的


    交互设计文档如何写,才给程序员以美得享受?

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

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

  • 动态demo! 

交互设计文档如何写,才给程序员以美得享受?


    输出HTML文件预览

交互设计文档如何写,才给程序员以美得享受?

        

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


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


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

交互设计文档由谁来写?

        谁来写这文档本来不是问题,显然谁是交互设计师谁提供这个说明文档,但是,因为一些别的原因导致这是一个问题了。 


        比如:有些公司没有交互设计师这个职位,所以不论岗位划分如何,如果你的团队中有人负责交互设计这个角色的工作,那么这个文档就是属于这个角色对应的人员来提供。


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

交互设计文档要给谁看?

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

交互设计文档更新机制

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


更新记录如下图: 

交互设计文档如何写,才给程序员以美得享受?

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

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

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

    

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


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

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


交互设计文档如何写,才给程序员以美得享受?


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

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


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

  1. 目录 

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

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

    交互设计文档如何写,才给程序员以美得享受?

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


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

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

    交互设计文档如何写,才给程序员以美得享受?

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

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

  4. 页面展开图+逻辑+文字

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

    交互设计文档如何写,才给程序员以美得享受?

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

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

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

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

交互设计文档的责任边界

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

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

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

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

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

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

  6. 交互事件的状态需要用截图形式展示出来,不建议使用大量文字描述,因为很多人不看小字而是直接看图

交互设计文档示例

更详细的实例以及教程都在《交互设计那些事儿》这本书里给出了,大家需要的可以去了解一下

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

长摁下图二维码报名线上线下活动:

【HBAT创新设计峰会:design+下的生存之道】

交互设计文档如何写,才给程序员以美得享受?

——End——

万千设计师众邀你干货啦~

添加微信sezign01

申请讲师,备注:讲师

原创投稿,备注:投稿

打开阅读原文访问让你丑哭的设计夹网站

更多书籍和软件等各位看官免费下载

交互设计文档如何写,才给程序员以美得享受?

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/34986/

(0)
交互精选交互精选
上一篇 2018-02-01
下一篇 2018-02-01

相关推荐

  • 中国手机行业患上焦虑症,良药便是“用户体验”!

    可以说,2017到2018年中国手机市场震荡不断。首先经历了乐视手机的倒台,接着HTC也逐渐淡出市场,而巨头之一的LG也选择了退出中国市场。除了传统行业老大苹果和三星的地位稳固外,国内众多厂商皆陷于焦灼之中,绞尽脑汁想要提升出货量排行。但可惜的是,众多厂商的动作却创新乏力,同质化严重的案例屡见不鲜。一个最明显的例子,iPhone发布“刘海屏”,许多厂商亦步亦趋,甚至模仿到了正面难辨的地步。中国手机厂商陷入鏖战,行业趋势多为盲目跟风,试图...

    2018-04-28
  • 基于交互体验下的包装视觉传达设计研究

    红河学院美术学院 文俊鸿摘要:包装视觉传达设计中交互体验的表现成为其设计重点,消费者与包装产品设计的关系更加紧密,让消费者在包装设计使用过程中感受到包装设计与消费者的情感交流互动,增强消费者视觉感官交互体验。采取理论研究和案例研究相结合的研究方法,对现代交互设计在包装视觉传达设计应用进行研究,让产品包装与消费者的联系更加紧密,让消费者的心理情感和视觉感官获得更具冲击力的体验,更为有效地实现包装设计与消费者的情感交流互动和传达。关键词:交...

    2018-01-30
  • 用户体验设计影响力,引起两会代表关注

    现今,用户体验设计已成为社会广泛关注的话题,在今年两会上,用户体验设计的影响力也引起了两会代表关注。设计创新与科技创新互为表里,需要协同发展;从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。叶友达委员在接受《人民政协报》采访时指出,据国家知识产权局发布的报告显示,2017年发明专利申请量138.2万件,同...

    2018-03-16
  • UI设计师最该考虑微交互的设计

    前言什么是微交互?微交互是用户在完成某个小任务时产生的交互体验。例如,解锁手机就是一个微交互,手机调成震动模式时会震一下也是一个微交互。为什么称为“微交互”呢?所谓的“微”其实就是指的产品的细节设计。微交互正在成为产品设计中越来越重要的部分。正如同Charles Eames曾经所说,“细节并不只是细节,它是构建起整个设计的基本元素。”你的UI和交互设计中的每一个元素都是至关重要的,一个又一个细节设计让你的产品最终脱颖而出,而真正让人难忘...

    2018-04-20
  • CTB50成员周红军| 从互联网用户体验谈交易银行创新发展思路

    诚邀各领域专家学者、从业者及机构投稿或荐稿与30余万行业精英分享与共同发展投/荐稿邮箱:tougao@sinotf.com中国交易银行50人论坛:客户在使用交易银行服务过程中所关注的用户体验,是竞争激烈的交易银行服务能否在市场上取得优势地位的决定性因素。文/安邦保险集团国际部总经理、中国交易银行50人论坛(CTB50)成员 周红军来源:中国交易银行50人论坛 学术成果汇编(2017)当下,随着互联网技术的迅猛发展,各行各业已经融入到“互...

    2018-03-31
  • 2019年交互设计方向考研辅导招生简章

    -----点“蓝 色 字 体”击----------关注我们-------获取最新信息-班型介绍:开设课程:交互设计长期周末VIP班(线下课程)交互设计长期周末VIP班(线上课程)上课时间:2018年3月中旬——2019年1月初(每周周末4课时)课时       :320课时(每课时1小时)招生人数:线下课程10人,线上课程10人(超数不招生)课程安排:一.课程总框架:Part 1▪交互知识学习Part 2▪考研专业课学习Part 3▪...

    2018-03-27
  • 阿里UED:优秀阿里设计师如何养成

    编者按:一个优秀的专业交互设计师该具备哪9个素质?一个完整的交互设计流程该经历哪12个阶段?今天阿里的交互设计师从零开始一一帮你解答这两个问题,非常适合新人入门哟。一直以来,交互设计师都是一个受到广泛质疑的岗位,很多人不了解交互设计师的价值,更直接的说,我们大多数的交互设计师没有表现出足够的、令人信服的专业度。大约五年前选择了这个职业,一路走来,质疑过、探讨过,也争辩过。和很多交互设计师一样,我也有过盲目自信和茫然失措,历经时间的鞭挞后...

    2018-03-09
  • 用户体验进一步提升!微信官方将优化小程序授权

    序多多小程序无需开发,轻松上手,小程序极速免费生成!十分完美的事物中在这个世界上是不存在的,每个事物需在近乎完美的道路上苛求自己,不断完善。小程序亦是如此,它是互联网时代进步的产物,被互联网大佬们追逐,被用户用完即走。但它也有被人诟病的地方,即会在用户首次启动时直接要求授权,甚至有的小程序会出现若用户不授权,小程序将会出现异常,或进入死循环的情况。相信很多用户都遇到过不授权便会出现死循环的小程序,最后只能退出微信重新进入,造成用户体验很...

    2018-04-21
  • Axure模板库(13)-直播

    最近直播app越来越火,我整理了一些直播app,做了几个模板,跟大家分享。原型文件在文章最后。1、首先临摹一个国外的。(1)首页第一个展示的是快速发布直播的入口,鼓励用户创作内容。第二个展示的是一系列标签。如果平台上内容类型比较多的话,可以像这样强调标签、分类。如果平台上都是美女主播,那分类的权重就可以小一点了。第三个展示的是直播列表。直播最重要的信息就是直播的画面,列表上可以放一张大图,或者更直接,展示一小段视频。(2)直播页面,展示...

    2018-03-04
  • 【优秀作业展示】交互设计基础(一)

    《交互设计基础》是学习交互设计的重要课程,在大三上学期开课。任课教师是工业设计系的华梅立老师,通过老师的认真指导和对该课程的学习,大家对交互设计有了进一步的了解,在老师的引导下,同学们对高铁取订票界面设计进行了深入的分析和再设计,并选取了感兴趣的小方向进一步拓展。接下来就看看学完本课程后同学们的优业。优秀学生作业第一期周亦辂产品设计1511高铁取订票界面设计色彩选取字体:冬青黑体字号:18、21、24、28、30、32、36风格:利用从...

    2018-04-04