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

阿西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校园招聘信息

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

    2018-03-20
  • 两会唤醒全民关注用户体验

    聚焦2018年全国两会,共有13位人大代表和政协委员提倡在相关领域内发展与提升用户体验,范围遍布于新能源汽车、互联网、通信、教育科研、传媒、版权保护、交通运输与医药等数十个行业,引起了社会各界的广泛关注。两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。叶友达建议,从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。同时要加大对基于用户体验的设计创新的宣传力...

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

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

    2018-03-03
  • 交互设计精髓-阅读心得1

    学习交互设计,选择第一本读的书是《交互设计精髓 About face 4》,因为这本书在交互设计领域名气很大该书一共分为3个部分,一共有21章。最近刚刚读完第一部分,有所感悟,在此记下,与尔分享之。交互设计就是站在用户的角度看问题永远为别人着想,心中装着别人,站在用户的角度看问题....读罢本书,这是关于交互设计在心中停留的第一印象。由于交互所设计的是产品与用户接触相处的整个行为过程,所以用户的感受首当其冲成为检验设计的重中之重。可是我...

    2018-04-28
  • 印尼APP用户体验调查报告

    随着智能手机功能的不断优化,用户对设备的体验要求也逐渐提高,用户的满意程度不再仅仅由服务质量来衡量。移动市场的竞争逐渐加剧,简单易操作的移动应用程序更能获得许多用户的青睐。市场玩家需从用户的角度去优化用户体验。用户体验一直是一个非常主观的问题,每个人都有自己的偏好。年龄、受教育水平、设备类型等因素都会影响到用户体验。近期一篇关于用户手机app使用体验调查报告透露了印尼用户的一些使用行为习惯,详细如下:(注册偏好)大部分受访者在注册一个应...

    2018-04-12
  • 选择爱情与用户体验

    用计算机思维的视角来看爱情和用户体验。一、做结婚教练的互联网产品经理最近发现一个心理咨询师现在转型做了一个结婚教练。她是我的一个心理咨询师朋友,现在做的工作就是指导30多岁下定决心要结婚的女生,如何能够在一年半之内搞定结婚。她的方法已经帮助了30多个30多岁的女生完成了结婚。那么这个结婚教练以前是干什么的呢?她以前也是做过一个互联网公司的产品经理。她的这一套结婚的体系内容挺多的,这堂课我想把她最重要的一个环节拿出来分享。这个环节就是如何...

    2018-02-03
  • 澳洲留学 | 交互设计专业硕士大解析

    📢:1⃣️条信息,足以改变你的未来!欢迎关注本平台交互设计在中国是一个新兴的产业,但是随着中国电子系统对人们生活影响的逐渐扩大,中国交互设计师将面临一个很大的缺口。什么是交互设计专业?1.words 语言语言是互动的最基础部分。人与人之间的互动是通过语言来进行基本交流。人也通过语言与机器进行交流。这里的语言可以是文字形式、语音形式、或动作形式等。在美国,一个好的交互设计师,也是一个很好地copy writer,需要具备良好的语言沟通和文...

    2018-04-06
  • 交互设计|康石石浅谈如何创作一本打动考官的作品集

    近年交互设计大热,但交互设计是否如大家所见所想仅是网页及APP设计,申请交互设计艺术留学的同学们又该如何创作帮助自己跨入名校大门的作品集?今天,康石石为大家带来此文,分享交互设计作品集的创作方法(求职作品集可同理借鉴创作思维)。关于交互设计作品集创作,康石石首先向大家强调几点:1.交互设计不仅仅是网页和APP现代交互设计从某种程度上来说虽然和网页与平面设计的联系从发展的时间上看联系较为接近,然而交互设计并不是一个单纯研究电子产品用户界面...

    2018-02-03
  • 国内大公司的交互设计实习面试经验总结

    沈天宇 :看着拉钩、脉脉上关于互联网岗位的信息,找一个交互设计的岗位几乎要面对100个人的竞争。想想我面前站着100个人,我要赤手空拳的打败他们,这画面简直不敢想。所以一开始我完全不知道我到底能找到一个什么样的工作,大概有一种「大爷赏口饭吃」的姿态去找实习。毕竟,我们实验室也好几年没出过阿里的人了,我也感觉我没那么优秀。面对如此严峻的就业形势,恩,首先还是开始找实习吧。这是一个最坏的时代,(一点也不好。),而且也许以后会更坏。对于找工作...

    2018-02-01
  • 【干货】2018年APP交互设计趋势

    全感官体验人有五感,强化体验记忆的最有效方式就是五感相结合。看见、听见信息已成为体验常态,而更真切的感知信息是用户体验升级的客观诉求,全感官体验能更好的打造“身临其境的沉浸式”体验印象。2018年我们将会看到更多以虚拟+实体组合的全感官体验方式,用户在交互过程中获取更多维的与真实场景匹配的信息反馈(听觉、嗅觉、触觉等),加深对信息的理解和体验记忆。运用案例全感官体验目前在游戏领域有了较为广泛的探索。《星舰指挥官》一改沿用十几年的鼠标,键...

    2018-02-18