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

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

相关推荐

  • PS、AI、Sketch 用着太费劲?这些插件本宝宝力荐!

    虽然 Mac 和 Windows 平台有许多特别棒的软件或工具,但 PS、AI 和 Sketch 仍然是设计师的标配。有时候看到一个特别棒的效果花了很久才折腾出来,殊不知一些插件能够轻松完成,这里小编推荐一些特别实用、效率翻倍的插件给大家,让设计工作事半功倍!GuideGuideGuideGuide 是小编用过的最棒的参考线拓展工具!没有之一!再也不用从标尺一条一条拉参考线还要担心位置不精确,只要输入需要的数值就可以自动生成对应的参考线...

    2018-03-03
  • 最新软件安装包目录【18年4月】

    悦台新媒体欢迎关注我们图文美编部关注软件导航电脑办公室内/外设计平面设计机械设计影视动画建筑设计地理信息网页设计屏幕录像编程类电子绘图数据库数据统计理科工具软件目录【电脑办公】电脑系统(U盘安装)PE制作WIN7WIN8WIN10XP电脑系统(直接安装)WIN7WIN8WIN10Officeoffice2003office2007office2010office2013office2016Projectproject2007projec...

    2018-04-09
  • 美国|四大艺术院校交互设计解析,不要等毕业后才发现读了个假的专业

    今天的主题是交互设计,有同学希望了解美国开设此类专业的院校,并获取各个院校的教学内容侧重方面的信息。于是,康石石选择了美国四所具有代表性的院校为同学们进行介绍:艺术中心设计学院(ACCD)卡内基梅隆大学(CMU)纽约视觉艺术学院(SVA)普瑞特设计学院(Pratt)一、艺术中心设计学院(Art Center College of Design)交互设计:本科ACCD交互设计专业只开设本科阶段课程,学习时长8个学期。尖端的课程设置,旨在培...

    2018-05-07
  • Adobe放大招!Sketch有的功能都上了!

    (本文内容来源知友:不知语冰,感谢~)关于 Photoshop的UI-DNA工具很久就有传闻了!昨天据MICU了解,这个强大的工具终于开放测试啦~~虽然说很多设计师比较推荐sketch,可是这回了不得!sketch有的功能,PS都能实现了!也许有很多同学还不太了解 UI-DNA 是个什么样的工具,说白了,就是 Photoshop 上拥有更强大的属性编辑功能。现在来说说UI-DNA都有神马强大的功能。打开Photoshop 中的UI-DN...

    2018-03-02
  • 《用户体验要素》 读书笔记 (3)第四章 范围层

    范围层主要解决功能规格和内容需求只有明确定义出来,你和你的团队才知道你正们在做什么同时你才知道你不需要做什么1. 范围层定义1)范围层需要同时做两件事情:规定过程(日程安排和里程碑);生产产品。2)范围层的功能和内容要明确的定义出来:只有明确定义出来,你和你的团队才知道你们正在做什么,团队中的不同角色才能有共同的参照标准;同时你才知道你们不需要做什么,同时你才知道你不需要做什么,因为这个过程中会不断出现新的需求,要结合你的规划、新需求与...

    2018-04-09
  • 【用户体验】健康家居生活就选择稚爱儿童水漆

    我心目中的家不需要非常大,只要整洁温馨就好。快过年了,身边很多邻居都在忙着给房子装修,白天楼上楼下总是叮叮咚咚地响个不停;我想到自己家里潮湿斑驳的墙面,心里总是有个疙瘩。不止一次想给自己家翻翻新——二十几年的老房子,墙面容易潮湿发霉,自打上次我结婚家里刷了一次墙,到现在有2年多时间了,墙面很多地方起了小泡泡:有的地方开始掉灰:严重的地方还长出了黑色的霉菌,真的是惨不忍睹:不但有碍美观,而且我宝宝刚刚学会走路老是扶着墙,一不小心就摸到发霉...

    2018-02-07
  • 【招商零售】海底捞VS胖东来:用户体验背后的成功基因

    点击上方“聪聪说零售”可订阅哦!招商证券零售组:许荣聪、邹恒超近期的“老鼠门”事件再将海底捞推向风口浪尖,食品安全问题再次引发关注,但与一般公关危机不同的是,本次事件发生后没有出现一边倒的对海底捞的口诛笔伐,反而海底捞及时坦率的回应得到不少消费者的理解和支持。海底捞能坦然面对此次

    微信热点 2018-05-02
  • 2018年交互设计和用户体验设计趋势合集

    来源:沪江用户体验中心&Nick Babich,翻译丨优设陈子木设计和体验从未像现在这么重要。在过去的10年当中,设计不断适应着用户的新需求,发生了翻天覆地的变化。虽然我们不大可能预测太远的未来,但是我们仍然可以对明年的设计趋势有一个基本的猜测。今天的文章,我们将会探讨2018年影响用户体验设计领域走向的10个关键性的设计趋势,这些趋势甚至可能会持续几年。1、专注内容的体验设计近年来,设计师越来越倾向于采用极简和扁平化的设计,这种设计策...

    2018-02-06
  • VR交互设计

    大家好!洋仔我又来了,上篇文章群爷详细的介绍了什么是VR以及VR需要的条件,不知道大家对于VR有没有一个深刻的了解呢?此图为转载图片为了完成这篇总结性的文章,你们的洋仔我又是看了好多篇文章,因为VR这个需要有各种各样的设备支持,所以呢,我也是去尝试了几个VR类的游戏,上周去了医博展,正好群爷也是展方,趁着这个机会,让群爷又带我体验了一把AR和VR在医疗方面的用途。那VR的交互设计到底是怎样的呢?(VR切水果)此图为转载图片首先,VR交互...

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

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

    2018-02-03