如何写一份出色的交互设计文档,给程序员以美的享受?

交互设计文档分为两个版本:一个是界面元素标注版,另一个是附带交互逻辑版。那么,具体的写法和要求如何呢?

交互设计文档分为两个版本:一个是界面元素标注版,另一个是附带交互逻辑版。那么,具体的写法和要求如何呢?

为什么要写这篇文章?

写这篇文章之前,遇到过很多朋友问道:『交互设计的输出物是什么?』『交互设计师怎么与程序员协作?』、『交互设计师还需要出文档?』等等一些问题。

更多的人在寻找一个交互设计文档的写法教程,每一个人的回答都不相同,但是很多入门的交互设计师遇到这个问题时觉得很棘手,因为不清楚自己应该如何写一份符合自己产品业务逻辑或产品规范的设计说明文档。

这篇文章就是给这些有很多疑问的同学写的,可以解开一些疑问,但是指望这篇文章就写出高质量的文档显然不可行,所以看完这篇文章后可以从中提取一些思路,自己整理一个属于自己的设计文档规范写法的模板,长期积累下来,就可以形成自己的设计风格和规范。

什么是交互设计文档?

我们先来统一一下概念以及名词,以免后续因为说法不够一统造成误解。

交互设计文档一般是指:交互设计说明文档(交互设计师产出的规范文档),又称DRD(Design Requirements Document),工作中一般称之为"交互设计文档"。

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

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

答案是:可以不写,那么写与不写的区别究竟在哪里? 我们从两个方面分析一下。

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

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

  • 产品没有交互设计环节
  • 团队没有交互设计师角色
  • 交互设计没有系统化和规范化
  • 开发边界不需要控制
  • 产品没有动效或交互细节
  • 有经验丰富的产品经理
  • 产品没有复杂的人机交互逻辑
  • 产品只有一个产品经理或负责任的角色主要负责

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

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

  • 产品有清晰的交互设计流程
  • 产品团队中有专职的交互设计师
  • 团队已有系统化和规范化的作业流程
  • 开发实现交互设计时需要定义边界(验收标准)
  • 产品有比较复杂的、丰富的动效
  • 产品有较为复杂的人机交互逻辑
  • 产品有多个产品经理或部门协作

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

看个小例子:

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

产品需求的描述是这样的

需求说明:在封面图片上点击图片之后翻转一圈。

(文字描述交互与需求)

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

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

UI设计出图是这样的

1468250003-9349-image001

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

V3.0 交互原型加演示DEMO

动态demo:

1468250003-1044-image002

输出HTML文件预览

1468250003-3593-image003-1

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

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

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

交互设计文档由谁来写?

谁来写这个文档本来不是问题,显然谁是交互设计师谁提供这个说明文档,但是,因为一些别的原因导致这成了一个问题。
比如:有些公司没有交互设计师这个职位,所以不论岗位划分如何,如果你的团队中有人负责交互设计这个角色的工作,那么这个文档就是属于这个角色对应的人员来提供。

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

交互设计文档要给谁看?

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

交互设计文档更新机制

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

更新记录如下图:

1468250005-1256-image004-2

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

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

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

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

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

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

1468250003-5718-image005-1

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

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

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

目录

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

Log更新记录页

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

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

1468250004-9453-image007-1

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

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

1468250005-4472-image008

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

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

页面展开图+逻辑+文字

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

1468250006-7192-image009-1

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

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

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

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

交互设计文档的责任边界

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

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

  1. 给程序看,使用独立的章节写明交互逻辑、页面流转
  2. 给视觉看,使用独立的章节写明所有的页面展开、公用页面交互等
  3. 给测试看,加好注释与说明
  4. 交互需要按照功能逻辑一个个排着序写,这样更容易理解
  5. 交互事件的状态需要用截图形式展示出来,不建议使用大量文字描述,因为很多人不看小字而是直接看图

 

作者:阿西UED,微信号:Hello_Wangsir。

内容节选自《交互设计那些事儿》,有兴趣的可以去京东、天猫、当当搜索 《交互设计那些事儿》以了解更多,具体案例在这本书的第八章。

1468250065-2379-VcRoHJN1RK3sgkK7qicqIWKhKpKA1468250064-4003-6S0fia8hf6cogZhjGMCkFnzeCmuQ

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/16237/

(0)
iouedioued
上一篇 2016-07-11 23:11
下一篇 2016-07-12

相关推荐

  • 译文 | iOS 10 人机界面设计指南 (完结)

    iOS10发布了,苹果遵循了一切从简但又增加了一些提升用户体验的功能,比如向开发者开放了更多接口,设计者又如何跟随iOS的步伐做好产品设计呢?本文是系列文章的完结篇,enjoy~Note
    模板图片(template image)会丢弃图片本身的色彩,而采用图片视图使用的色调。请参阅UIImage中的UIImageRenderingModeAlwaysTemplate。TIP  对于多行或是多样式的文本输入,请使用文本视图。请参阅Text Views。

    2017-05-02
  • 【搞笑篇与交互无关】哈士奇究竟是怎样的“神犬”?

    哈士奇一辈子不认识主人,它们可能会觉得你有点特殊,但是它们也不会细琢磨,毕竟它们被智商局限的死死的。 养哈士奇永远不要撒手,它们也不是逃走,只是傻,要跑出去玩几个小时才会发现"矮马!我家呢? 求求你别再…

    2015-04-19
  • 只会简单的Axure操作?6周5次实战,让你做出能拿去面试的原型

    昨天跟一位自学Axure、产品工作半年的朋友聊天,蛮感慨的。她遇到的问题,也是蛮多自学Axure的朋友遇到的问题。你是否也有同样的问题?除了原型图不标准不美观,还深受效率低、交互弱的困扰你也有这位同学的困扰,想快速提升axure能力,做出标准原型、高保真原型?推荐起点学院&腾讯课堂联合打造给产品经理的Axure课程已有2000多位同学学习,学习效果显著Axure零基础也能学,学完画出规范原型产品思维和交互贯穿全程,学完告别画图经理如果你...

    2018-05-07
  • 网页设计中如何利用“黄金比例”?

    黄金比例 是一个数学比率,通常在自然界中都能发现它,用来建立平衡的构图。 它大约等于1.6180,也被称为“中庸之道”、“黄金分割”, 通常用希腊字母Ф表示这个值。

    2017-06-01
  • 极有可能被低估的三种有趣的网页设计趋势

    设计出不同凡响的网站是许多设计师一直追求的事情,所以大家着迷各种时尚的元素,漂亮的配色,流行的趋势,复古的样式,等等。经过时间验证的经典设计、固定的搭配是不错的选择,而逐步展露头角的新趋势,则能更好的满足这一需求。

    2017-05-26
  • 贼干的货 | 交互设计中的格式塔原理

    小编说格式塔心理学认为知觉不能被分解为更小的组成部分,知觉的基本单位就是知觉本身,格式塔心理学的信条就是:整体不同于部分之和。格式塔心理学强调结构的整体作用和产生知觉的组成成分之间的联系。当我由测试转行到交互设计师时,我确认自己擅长辨别产品的优劣,和识别产品的待改善点,尽管很多时候这些待改善点还缺少数据和用户的论证。之前我还是典型的用户思维,对产品实际效果的判断非常依赖数据和用户反馈,直到我了解了格式塔原理,它改变了我对设计的思考方式,...

    2018-03-03
  • 新交互时代:自然用户界面中的“自然”到底是什么意思?

    一个理想的自然用户界面应当能让用户的注意力完全集中在所要从事的活动上,而忘记界面本身的存在,或者说,界面变得“透明”了。一位印度的同行为当地用户设计了一组用数字笔操作的界面。在进行用户测试时,他对其中一位用户说:“请拿起笔碰一下屏幕。”出乎他意料的是,这一看起来十分简单自然的操作,居然出了问题:这位用户没有用笔尖,而是把笔横过来整个贴在了屏幕上!经询问才知道原来他不识字,也从没用过笔。
    而另一位欧洲的同行为家庭用户在交互桌面上开发了一套软件,包括一些直观的手势交互,例如用两个手指相反方向移动做打开的手势来打开一个虚拟的储物箱。当他向用户家庭演示时,他想考考这个家中正上小学的孩子:“你试试看怎么打开这个箱子?”孩子二话不说,直接用食指在箱子上双击!隐喻指的是把用户界面中的概念比拟为一种人们熟悉的概念或现象,用于解释其交互方式,例如将图形界面元素比喻为大家熟悉的桌面、窗口等等。隐喻越贴切,越为用户熟悉,往往就意味着界面越自然。

    2017-05-14
  • 干货推荐|数据可视化的五个步骤

    数据被称作是最新的商业原材料「21世纪的石油」。商业领域、研究领域、技术发展领域使用的数据总量非常巨大,并持续增长。就Elsevier而言,每年从ScienceDirect下载的文章有7亿篇,Scopus上的机构档案有8万个、研究人员档案有 1 千 3 百万,Mendeley上的研究人员档案有 3 百万。对于用户来说,从这个数据海洋中抓到关键信息越来越难。

    2017-05-29
  • 你家的产品是不是什么都做?那他该不该做交互设计?

    在BAT这样的大公司中,很多产品经理是不会去做交互设计的,因为分工很细,有专门的交互设计师来负责交互。而另一种普遍的现象,在很多中小公司,是没有交互设计师这样的岗位的,交互设计工作是由产品经理来代为执行…

    2015-07-14
  • 【炫酷动效设计】这就是为什么你的产品需要做动效设计

    随着国际大品牌苹果和谷歌的引领,最近越来越多的国内公司开始关注动效设计了,越来越多的团队已经意识到动效在产品用户体验中的重要性了,更多的射鸡师们也开始投身动效设计领域。 但是说到底,我们到底为什么需要…

    2015-08-13