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

阿西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年的用户体验设计趋势和方法

    这是由一位美国作者站在美国的视角写的文章。即便抛开个人因素不谈,国内外的发展进度并不完全同步。例如情感化反馈这一块也许国内稍稍落后一点、但是移动支付和AR却要快一些,有些方面即便步调差不多,举出的例子却不一样。不过看看别人的总结也挺有意思,至少可以了解一下国际风向。2017年即将结束,是时候向前展望,预测在接下来的十二个月里,信息体验设计会如何。我将在本文概述的,除了2017年里见证到的巨大的变化之外,还有值得关注的趋势,以确保能够赶于...

    2018-03-29
  • 不好意思,简历有了它,你就领跑于820万毕业生

    又临近一年毕业季找工作成为了应届生们的头等大事但今年的就业形势依旧不容乐观来自教育部的数据2018年全国高校毕业生预计上升至820万人再创近10年毕业生人数新高▲教育部官网截图▲中商产业研究院数据显示:2010-2017年的毕业生人数按照2%-5%的同比增长率逐年增长,近7年间累计毕业生人数达到5706万人。年年都是“史上zui难就业季”并且每年的毕业生人数始终呈增长态势800多万的应届毕业生让“你竟是一个大学生”变成“你只是一个大学生...

    2018-03-27
  • SKETCH | 周鸿祎自述:我的价值观

    在这本书的开头,我想讲讲影响我价值观的电影和书。说到价值观,有的人可能要笑了:都什么年代了,还讲价值观?虽然这本书的书名是《我的互联网方法论》,但这并不是按图索骥的说明书,你如果认为读完本书,就会做产品了,就能向互联网转型了,对不起,真的是做不到。赵括把兵书读了千百遍,在纸上推演了千百遍,到了实际的战场上,还是一个输。因为无论是做互联网产品,还是传统企业向互联网转型,能不能做得成,是看你能不能创新。而能不能创新,除了你的技能、阅历、领导...

    2018-04-26
  • UNStudio:健康城市,基于未来的设计

    📌 编辑 |Cassi.W编者按:城市公共环境作为人们共同的“家”,需要群策群力共同营造。城市公共基础设施作为“城市家居”是人们日常生活舒适感、安全感的主要保证。第二届“衲田杯”可持续设计国际竞赛正在火热报名中,你的脑洞是否还够用?“新技术引领下的智慧城市家居”有很多可能性,需要大家去探索、去研究、去发现。本期我们将走近UNStudio事务所的智慧城市实践,为你的方案增添一点灵感!- UNStudio -Ben van Berkel本·...

    2018-03-17
  • 成都UI-UE交互设计免费试听课了解一下!

    周一见!周一见!周一见!没错下周一!成都UI-UE交互设计免费试听课开课啦!与其宅在家里浪费时间不如来体验一下UI设计前五天免费试学4月16日--4月20号机会有限,先到先到得哦!UI-UE交互设计是什么?UI-UE交互设计就是指对产品的人机交互、操作逻辑、界面美观的整体设计!为什么要学习UI-UE?人才需求旺盛,成IT行业职位新宠人才缺口大,行业势头发展迅猛虽然UI这么好,但是不仅对人才的需求大,要求也越来越高,所以,培训,是提高水平...

    2018-04-17
  • 从用户体验的角度谈多数RPG战斗系统中的缺陷

    在为RPG创建战斗系统时,多数开发者首先会考虑到这个问题:“游戏中的各个角色会有哪些优势和弱点”。四大元素系统基本的战斗系统之一是,带有水、火、风、土的“四大元素系统”——水比火厉害,火比风厉害等等。这一系统适用于元素不多的游戏,因为玩家几乎立刻就会明白哪些元素能对敌人造成更大伤害。在现实生活中,不同元素的相互作用是众所周知的,因此开发者可以在不提供大量教程的情况下使用这些现实生活中的元素。但如果将这个系统进行延伸的话,就会导致交叉优势...

    2018-04-17
  • 案例分析|一次消灭产品文档的实践探索

    作者:Dougee全文共 2120 字 5 图,阅读需要 5 分钟———— / BEGIN / ————在刚入职眼前这一份工作的时候,CTO就对产品组提出了新的要求:以后不用再另外输出产品文档,直接在原型上标注就可以了,而且以后要输出动态原型。先介绍一下我本人的情况:产品经验2年,对于Axure的交互设计有一定实践经验,但从来没有想过把动态的原型与产品说明结合来表达需求。对于CTO的决定,我想了一下,大概是出于以下三点原因:太多文件数量...

    2018-03-27
  • 集创堂交互设计课程(零基础)详解

    零基础课程5月2日开课,咨询请加微信:yyy8010557经过将近一年的反复打磨,集创堂交互设计课程(零基础)终于出炉了!从内容上来说,这套课程采取了基础设计能力+交互设计思维+项目实战+设计软件学习全方位培养的模式,学员毕业后直接具备实际工作能力;从师资上来说,除了集创堂纯色、潇潇、青木三大导师外,网易云课堂的Nina、拥有六年教学经验的蜡笔强力入驻,课程直接对标网易云课堂;从时间上来说,长达七个月的浸入式学习,听课+作业+实战+讨论...

    2018-04-17
  • 【文创•职通车】2018校园招聘信息

    序号001未而思伯文化传媒(杭州)有限公司2007 年成立至今,经历了十年的发展,从最初的单一媒介投放板块到如今的以视频内容创作,品牌营销传播为两大核心板块。十年媒体资源、渠道积累,坚持立足浙江为中心,面向江浙沪,以传统媒体+新媒体的渠道传播组合方式。(向上滑动启阅)一、 总监助理( 1 名)职位描述:1、本科以上学历,具有良好的协调沟通能力,良好的文字功底;2、完成总监交代的任务,负责项目的对接协调统筹工作;3、负责总监的工作日程安排...

    2018-03-20
  • 产品经理|交互设计专场

    产品经理走上交互之路3月31日深圳线下分享会2018PMTalk春节后带来的第一场深圳线下产品经理活动,一场以交互设计主题的产品经理线下深圳交流会,PMTalk产品经理社区将带头又一次与大家见面!01一场值得产品经理学习成长的分享会本次分享会,在经历Pmtalk发起人几位小伙伴利用业余时间,在深圳成立这个产品组织后,我们将首次也推出PMTalk社区会员、产品经理合作周边等服务!具体的就在倒计时7天更新!本次沙龙我们邀请的深圳产品大咖(持...

    2018-03-15