马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > 网站制作 > 交互设计 > 教你如何制作一个简单实用的交互设计文档

教你如何制作一个简单实用的交互设计文档

时间:2016-09-03   文章来源:马海祥博客   访问次数:

作为一个交互设计师,我们要全局掌握产品的背景,逻辑,用户体验。但是,我们不能忽略设计过程中一个很关键的步骤,设计输出。

如果我们用email或者其他大海报的方式来输出设计文档,有没有产品经理会抱怨说看不懂?有没有开发抱怨使用过程中效率低?

在我之前的工作经验中,我一直保持用一种方式来输出设计文档:InDesign + PDF,在之前的产品同事与开发同事得到的反馈是好的,这里也希望分享并讨论这个方式是不是适合产品开发节奏。

教你如何制作一个简单实用的交互设计文档-马海祥博客

用InDesign输出PDF设计文档的好处有不少,我这里先列举几点:

1、设计文档规整,阅读效率提高。

2、设计文档适合打印,在很多评审场合阅读纸张更有效。(同时请注意环保)

3、一个部分讲一个故事,清晰明确,而不是把所有场景都集中在一页上。

4、InDesign可以设置文字,图片格式,通过style来管理,大大提高修改设计文档的效率。

5、设计文档简洁美观,让阅读者轻松愉快。

6、笔记,交互形式,配合设计图的方式,全面,内容集中,不需要额外注解。

7、可以配合视觉设计进行文档输出,作为一个完整的reference。

8、有助于知识保存,知识传播。

9、设计师创建并维护设计文档贯穿整个产品设计过程,主人感,成就感强。

最后强调一下,这里指的设计文档是唯一输出,贯穿设计师所有工作过程中,而不是产品设计完成后的总结沉淀。

这个设计文档模版也是多变的,设计师可以根据自己产品的需求灵活变动,请不要拘泥于模版,下面我就根据实际的例子跟大家讲解一下:

第一页:文档封面

文档封面是每一个文档的第一个展示,我们应该清晰的传达这个设计文档的基本信息。

教你如何制作一个简单实用的交互设计文档-马海祥博客

在InDesign中,这页的顶部可以设立为主模版,支持整个文档。

A、文档生产方logo,展示设计文档来自哪个团队?

B、团队或者项目名称,再次展示文档信息。

C、主标题,这个标题是产品的名称,应该贯穿整个文档。

D、版本号很关键,设计文档需要有严格的版本控制;修改时间可以告诉读者,这个文档的最近更新情况;当然,这里还可以根据需要加入设计师名称,ID,Email信息等。

E、页码需要在一个显眼的位置,特别是在远程会议的时候,页码会是一个重要的定位信息。

F、第一页不要太多信息了,要让读者集中注意力,只放一个标题是好主意,有时F与C会是一样的。

第二页:修改记录

修改记录对于持续更新的产品设计文档是不可或缺的,开发,产品经理,与设计师能根据修改记录快速了解每个版本修改的内容。

教你如何制作一个简单实用的交互设计文档-马海祥博客

例如上图中,7月12日修改了6个点,如果没有修改记录,开发可能需要1个小时看完100页的文档才能了解哪些地方被修改过。

A、修改记录应该为文档的第二页,关键,价值大。

B、内容区重点为修改日期,与简短的修改内容,修改内容应该首先点明版本号,然后把修改的部分与页码写出方便读者查阅。

第三页:内容目录

教你如何制作一个简单实用的交互设计文档-马海祥博客

A、内容目录是整个设计文档的索引,放在第三页的重要位置。

B、在用InDesign生成PDF后,请使用PDF把这页的每个索引编辑为链接,这样读者就可以方便在这页直接跳转到需要阅读的页面。

第四页:分段

在完整展开设计文档前,要构思好每个段落应该讲一个什么故事。无论多么复杂的产品,都可以根据功能,场景,用户群体等因素划分为数个故事。

教你如何制作一个简单实用的交互设计文档-马海祥博客

就像模版中所说一样,一次只说一个故事。

在每个设计文档中,我们都应该思考怎样划分故事情节给到我们的产品经理,开发,设计师,管理者,以及适应用户群体,理想状态,故事的划分是通用应对所有人群的(至于设计流程,可查看马海祥博客《交互设计师必须知道的五大交互设计流程》的相关介绍)。

第五页:内容

内容区展示的内容丰富多样,这里我只给出了款式,分析了款式后,再补充一些可以在文档中加入的内容。

教你如何制作一个简单实用的交互设计文档-马海祥博客

A、副标题,也是故事名称。例如一个面向用户的产品的总标题为QQ美好生活,副标题会是一个清晰的故事子集,例如美好生活之夏日健康饮品。

B、每个设计图需要配标题,在远程会议中,这个标题配合数字的方式可以极大提高交流效率。

C、在InDesign中,我主要使用两种设计图方式,一种是在InDesign中直接生成设计图,一种是把PSD源图直接放入InDesign。

第一种的好处是,所有设计图在InDesign中,可以统一设定风格,统一修改。

第二种的好处是,PSD可以输出更清晰的交互,视觉图,而且InDesign可以记录路径,以后的修改中,可以直接修改源PSD,然后刷新InDesign文档就可以刷新所有文档内PSD图。

D、笔记区适应在每个需要笔记的页面,非常重要,可以极大减少产品经理,开发,设计师持续互相问问题的时间。

E、笔记中也可以录入对产品经理,或者开发的问题。在每次评审的时候,我会在文档中直接标记需要注意的点,这样会后设计方的修改记录就直接产出。例如:“这6个图需要在2秒内拉出来,需要与开发确定”。

本文只给出了基本的模版和InDesign设计经验,设计文档还有很多功能。例如,可以和视觉设计师配合,在一个文档内同时记录交互和视觉设计,甚至可以在一个文档内同时记录交互,视觉,前端开发code做整体文档。

生成PDF后,可以放入iPad等移动设备,可以帮助你在5分钟内,与老板散步中描述几个好点子。

马海祥博客点评:

设计文档的难点是开始建立所需的细致时间较多,但是文档架构一旦搭好,维护的精力小于预期,以后的每次输出,制作的设计师以及阅读的产品经理和开发,都应该是心情愉悦的。

本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/jhsj/1630.html,注明出处;否则,禁止转载;谢谢配合!

相关标签搜索: 交互设计  

上一篇:UI设计的规范标准有哪些?
下一篇:初次做交互设计的大致步骤有哪些?

您可能还会对以下这些文章感兴趣!

  • 交互设计中最常见的10个基础术语

    交互设计起源于网站设计和图形设计,但现在已经成长为一个独立的领域。现在的交互设计师远非仅仅负责文字和图片,而是负责创建在屏幕上的所有元素,所有用户可能会触摸,点按或者输入的东西:简而言之,产品体验中的所有交互。随着移动互联网的迅猛发展,移动产品UI设计人员也开始面临紧缺起来。很多其他行业设计师也转行做UI设计,那么,作为一名UI设计师新手应掌握哪些知识,下面,我就带着大家先知道一下交互设计中最常见的10个基础术……【查看全文

    阅读:86关键词: 交互设计   基础术语   术语   日期:2020-04-09
  • 交互设计案例:产品结构化繁为简的设计理念

    化繁为简,从不是件简单事,如何既保证功能体验完整,又体现WP平台自身极简、轻量的特点,成了贯穿我们设计始终的思考。“真正的简洁不是删繁就简,而是在纷繁中建立秩序”,打造全功能版的云音乐WP端,无论是设计还是开发都经历了从混乱到有序的过程。……【查看全文

    阅读:4725关键词: 交互设计   交互设计案例   产品结构   化繁为简   设计理念   日期:2014-09-06
  • 交互设计是什么?

    从用户角度来说,交互设计是一种如何让产品易用,有效而让人愉悦的技术,它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理和行为特点,同时,还包括了解各种有效的交互方式,并对它们进行增强和扩充,通过对产品的界面和行为……【查看全文

    阅读:792关键词: 交互设计   日期:2015-06-19
  • 网站分页导航的10大交互设计因素

    在进行产品设计的时候,我们一切都是从用户需求的角度出发来进行思考和设计的。但是,产品是同时满足用户需求和公司需求(通常是盈利)的东西,所以,有时候,不得不考虑其它的一些东西。比如,在你浏览某些新闻资讯类网站的时候,你会发现,每一页的内容只有可怜的一两……【查看全文

    阅读:1038关键词: 网站分页   分页导航   交互设计   设计因素   日期:2014-03-06
  • 如何将需求还原成情景变成可用性设计?

    可用性是交互式IT产品或系统的重要质量指标,主要用来表示产品对用户来说有效、易学、高效、好记、少错和令人满意的程度,即用户能否用产品完成他的任务,效率如何?主观感受怎样?实际上是从用户角度所看到的产品质量,是产品竞争力的核心。为了优化产品,提升用户体验……【查看全文

    阅读:814关键词: 可用性设计   情景设计   日期:2014-11-29
  • 基于交互设计的默认值分类和设定

    一般来说,在交互设计过程中涉及到系统缺省的都需要默认值,它起到引导、补救、宣传等作用。“默认值”这个词来自工程师术语,因为系统有很多默认操作。有了默认值用户就不会觉得慌乱,也就是给用户一个常态,在现实中我们也可以看到这样的例子:电脑默认值是关闭的:省……【查看全文

    阅读:482关键词: 交互设计   默认值分类   默认值设定   默认值   日期:2014-07-19
  • 交互式视频设计的分类和实现工具

    交互式视频是指通过各种技术手段将交互体验融入到线性的视频的新型视频。它风靡起源于2005年,随着当时宽带接入速度的提升和多媒体播放技术的成熟,交互式视频越来越多,最初主要是由广告商赞助的广告视频,借用各种新奇的交互方式来吸引人们点击观看,增加产品的曝光度……【查看全文

    阅读:2804关键词: 交互式视频   交互设计   视频设计   实现工具   日期:2014-07-13
  • 如何制定交互设计效果的可量化考核方案

    作为一名交互设计师,我一直在思考如何让我们每天的工作内容能够更直观体现其价值或效果的量化考核,如何将你的技能和除网站之外的知识运用到搜索设计工作中去,这也正是大多数用户体验真正开始的地方。其实交互设计师,视觉设计师,开发人员,信息架构师,搜索引擎优化……【查看全文

    阅读:1676关键词: 交互设计   设计效果   可量化考核   设计方案   可量化方案   日期:2014-07-28
  • 交互设计的三大隐形机制:加载、刷新和缓存

    刷新、加载、缓存机制的设计,我不清楚是否应该归纳进交互设计师的职业范畴,但是作为一名用户体验设计师,这些点或多或少地影响着用户的使用体验,我们都应该给予足够多的重视。这些机制,独立来看都有现有模式可参考,但是交互设计师不应该把他们割裂地设计,不同机制……【查看全文

    阅读:4938关键词: 交互设计   加载机制   刷新机制   缓存机制   日期:2014-04-22
  • 动效设计的物理法则及应用

    动效设计可以拓展空间内容,简化引导流程,降低学习成本,更重要的是给用户带来意想不到的惊喜,它就像人类的肢体语言,通过肢体语言传达更多的抽象信息和性格展现,动效作为当今提升网页感官效果的利器,在各种类型的网页中已经全面开花,如何做到自然流畅让用户感觉舒……【查看全文

    阅读:572关键词: 动效设计   日期:2015-09-25
↓ 点击查看更多 ↓

互联网更多>>

SEO优化 更多>>

企业网站SEO推广能给企业带来哪些好处? 百度搜索用户建议专区上线公告