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

阿西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

相关推荐

  • 2018年04月07招聘岗位

    诚聘:通辽澳鼎医疗器械公司诚聘:工作人员要求:40岁到50岁之间的女性,能长期工作的,有爱心,有孝心,家庭没有负担的,高中以上文化程度,语言表达能力好待遇:中午有工作午餐,每个周日休息,节假日休息,基本工资1800元,满勤奖200元,年底奖金不少于12000元。联系人:闫经理。联系电话,15247572846,15374967717不能长期工作的勿扰!招聘服务员工资底薪2500加提成收银员2700元加提成招聘电话:8663888,157...

    2018-04-08
  • Axure RP 8软件安装视频教程

    Axure RP 8下载地址:链接:https://pan.baidu.com/s/1smi2vvf密码:l2oj安装中有问题请咨询私人微信:152374906801、双击打开此文件2、点击next3、选择i  agree然后点击next4、点击bowse更改存储位置建议不要放在C盘然后点击next5、点击next6、点击next7、等待安装8、取消勾选Run Axure RP 8,然后点击Finish9、打开软件的安装目录把复制的la...

    2018-03-04
  • 实例解析「交互设计七大定律」在设计中的应用(下篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计。上篇内容已经介绍了「交互设计七大定律」的前五个,接下来将把剩下两个定律为大家做个实例分析。六、复杂性守恒定律/泰思勒定律(Tesler’s Law )1、复杂度守恒定律/泰思勒定律(Tesler’s Law )简介:复杂度守...

    2018-03-19
  • 从单线走向双线,第三代用户体验即将到来?

    双十一在即,加之今年的新零售狂潮,零售业从线上到线下可以说纷纷摩拳擦掌。京东天猫剑指双十一已是老生常谈,值得注意的是,今年的双十一迎来了更多样化的全民购物盛事,比如飞凡推出的“2017飞凡狂逛节”。据了解,与京东天猫等电商大促有所区别的是,“2017飞凡狂逛节”重点是线下逛,与众多剁手党网上拼杀对比,着实令人耳目一新。新零售改革加速,用户体验核心发生质变可喜的是,我们看到零售业巨头和创业者们都在深挖线下。比如今年爆红的无人便利店和无人货...

    2018-02-03
  • 交互设计:如何避免业务需求的遗漏

    笔者在春节期间在被七大姑八大姨问的比较多的一个问题有:你现在是做什么工作的啊?看着眼前的火锅实在不知道怎么解释,就问了他们一个问题“你觉得我们在春节期间怎么能吃上火锅?”他们的回答大概可以归类为:买材料 —— 火锅底料烧开 ——-放吃的 —— 完成而我的回答是:“如果今天的客人不敢吃辣,而你准备的是辣锅呢?”“如果你买的火锅料大家不是大家想要吃的呢?”“如果客人太多,而锅太小呢?”我目前的工作就是这个,让客人在各种状况下都能享受到这顿火...

    2018-03-06
  • 交互设计工作流程6步走

    点击信息与交互设计关注我们!欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cn经常有人会问交互设计到底是做什么的?交互在工作中的流程是什么样子的?那么今天就来讲讲交互设计在工作项目中需要做哪些工作。这里结合笔者本身的个人经历,将交互工作流程总结为以下6点:1、发现问题这里的发现问题,主要是找到一些体验不合理或者未达到预期效果的地方。发现问题的方式有很多,在实际项目工作中,可能大部分的问题反馈来源于客服或者产品需求,这里交互更...

    2018-01-30
  • 交互系统和设计目标

    交互设计:是针对用户与产品之间的“交互行为”来进行设计。可以理解为对交互系统的设计。系统的概念系统可以类比为自然间的生态系统、人体的生物循环系统、公司也是一个系统。他主要有一下几个基本概念:1、系统是一个有机的整体,各个元素之间不可分割,相互作用构成系统。2、这个系统定具备明确的功能,可以用来完成某项任务或支持某些行为。3、系统的功能是由所有的要素共同支持的。4、系统的功能应是稳定的,在各种使用场景下,都能提供功能。5、系统的功能应具备...

    微信热点 2018-02-11
  • Pinpil 交互设计作品欣赏

    Pinpil交互设计作品欣赏

    2018-03-24
  • 纽约视觉艺术学院SVA交互设计硕士毕业展 | 点赞按钮背后的学问

    SVA的交互设计专业汇集享有国际盛誉的设计师及其当今各大领域的专业人士,学生背景来自不同行业,有交互、数字媒体、纯艺、产品、平面、家居、建筑、计算机、社会学等等,学生之间能互补知识,拓展思路。要你设计一个点赞按钮,你会怎么设计?交互设计是什么?不知道的话,你可以回顾「谷歌UX交互设计师丨郑嘉」的分享会:用逻辑支持设计决定丨Google 设计师 郑嘉带你认识UX,她认为交互设计思维是用逻辑支持你的设计决定。SVA交互设计看点读交互的学生,...

    2018-05-04
  • 没去过赌场,别谈用户体验

    订 [图片] 阅20———— Jun. ————A大叔说的 第09篇 文章既然最终决策是“人”,就要思考人性什么是好的产品?罗辑思维演讲时提过一个观点:能占用用户时间的产品就是好产品。如果把这个概念加以延伸,应该可以这么说:消耗了用户很多时间,但用户不自知,一段时间未使用就会再次

    微信热点 2018-04-08