这个是很多人找交互设计文档的写作方法和模板

文章来源与腾讯CDC 作者是yoyo
前言:最近准备做一个交互设计文档的分享,但是一直没有时间整理好keynote,这里先分享一个设计文档模版,以及模版中每个元素的使用理由与方法。之后的设计文档分享中,会加入更多的设计文档案例来分析讨论。

Here we go.

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

如果我们用email或者其他大海报的方式来输出设计文档,有没有产品经理会抱怨说看不懂?有没有开发抱怨使用过程中效率低?在我之前的工作经验中,我一直保持用一种方式来输出设计文档,InDesign + PDF,在之前的产品同事与开发同事得到的反馈是好的,这里也希望分享并讨论这个方式是不是适合我们腾讯的产品开发节奏。

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

1,设计文档规整,阅读效率提高。
2,设计文档适合打印,在很多评审场合阅读纸张更有效。(同时请注意环保)
3,一个部分讲一个故事,清晰明确,而不是把所有场景都集中在一页上。
4,InDesign可以设置文字,图片格式,通过style来管理,大大提高修改设计文档的效率。
5,设计文档简洁美观,让阅读者轻松愉快。
6,笔记,交互形式,配合设计图的方式,全面,内容集中,不需要额外注解。
7,可以配合视觉设计进行文档输出,作为一个完整的reference。
8,有助于知识保存,知识传播。
9,设计师创建并维护设计文档贯穿整个产品设计过程,主人感,成就感强。

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

这个设计文档模版也是多变的,设计师可以根据自己产品的需求灵活变动,请不要拘泥于模版。

Now let’s start digging.

14

这是第一页:文档封面,文档封面是每一个文档的第一个展示,我们应该清晰的传达这个设计文档的基本信息。在InDesign中,这页的顶部可以设立为主模版,支持整个文档。

A. 文档生产方logo,展示设计文档来自哪个团队。
B. 团队或者项目名称,再次展示文档信息。
C. 主标题,这个标题是产品的名称,应该贯穿整个文档。
D. 版本号很关键,设计文档需要有严格的版本控制;修改时间可以告诉读者,这个文档的最近更新情况;当然,这里还可以根据需要加入设计师名称,ID,Email信息等。
E. 页码需要在一个显眼的位置,特别是在远程会议的时候,页码会是一个重要的定位信息。
F. 第一页不要太多信息了,要让读者集中注意力,只放一个标题是好主意,有时F与C会是一样的。

22

这是第二页:修改记录,修改记录对于持续更新的产品设计文档是不可或缺的,开发,产品经理,与设计师能根据修改记录快速了解每个版本修改的内容。例如例子中,7月12日修改了6个点,如果没有修改记录,开发可能需要1个小时看完100页的文档才能了解哪些地方被修改过。

A. 修改记录应该为文档的第二页,关键,价值大。
B. 内容区重点为修改日期,与简短的修改内容,修改内容应该首先点明版本号,然后把修改的部分与页码写出方便读者查阅。

32

这是第三页:内容目录。

A. 内容目录是整个设计文档的索引,放在第三页的重要位置。
B. 在用InDesign生成PDF后,请使用PDF把这页的每个索引编辑为链接,这样读者就可以方便在这页直接跳转到需要阅读的页面。

42

这是第四页:分段。在完整展开设计文档前,要构思好每个段落应该讲一个什么故事。无论多么复杂的产品,都可以根据功能,场景,用户群体等因素划分为数个故事。在每个设计文档中,我们都应该思考怎样划分故事情节给到我们的产品经理,开发,设计师,管理者,以及适应用户群体,理想状态,故事的划分是通用应对所有人群的。

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

52

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

A. 副标题,也是故事名称。例如一个面向用户的产品的总标题为QQ美好生活,副标题会是一个清晰的故事子集,例如美好生活之夏日健康饮品。
B. 每个设计图需要配标题,在远程会议中,这个标题配合数字的方式可以极大提高交流效率。
C. 在InDesign中,我主要使用两种设计图方式,一种是在InDesign中直接生成设计图,一种是把PSD源图直接放入InDesign。第一种的好处是,所有设计图在InDesign中,可以统一设定风格,统一修改。第二种的好处是,PSD可以输出更清晰的交互,视觉图,而且InDesign可以记录路径,以后的修改中,可以直接修改源PSD,然后刷新InDesign文档就可以刷新所有文档内PSD图。
D. 笔记区适应在每个需要笔记的页面,非常重要,可以极大减少产品经理,开发,设计师持续互相问问题的时间。
E. 笔记中也可以录入对产品经理,或者开发的问题。在每次评审的时候,我会在文档中直接标记需要注意的点,这样会后设计方的修改记录就直接产出。例如:“这6个图需要在2秒内拉出来,需要与开发确定”。

Wrap up – – – 

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

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

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

Wrap up – – – – 

以下是以前我工作中产出的设计文档案例,请参阅 :)

62

72

82

91

101

112

谢谢阅读 :)

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

(0)
iouedioued
上一篇 2015-08-11
下一篇 2015-08-12

相关推荐

  • 什么样的体验是好的用户体验?

    互联网的时代,说是一个体验为王的时代,一点也不为过。在互联网时代,产品是否能够做成功,用户体验成为一个关键点,用户购买你的产品,并非是与你结束了交易,而是一个新的开始。当用户拿起你的产品,使用你的产品的时候,用户体验之旅才真正开始,而用户的体验之旅是否愉快,将直接影响到你的口碑,影响到你的销售。

    2017-05-23
  • 6个问题,带你全面了解交互设计

    随着行业的发展,只会图形 UI 设计和只会交互设计的设计师职业生涯都会遇到瓶颈。1. 什么是交互设计
    2. 当今UI 设计师的能力要求
    3. 交互设计主要做什么工作内容
    (1)产品UI框架设计
    (2)产品UI风格设计

    产品UI 框架选择
    简单式(单一内容)
    翻页式(多页内容)
    宫格式(较多入口)
    上导航
    下导航(4-5大类+分支内容)
    舵式
    抽屉侧边栏(1个重点+其他次要内容)
    隐藏式

    4. 线框原型图绘制方法

    方法一:黑白灰+色块
    方法二:黑白灰+高保真图形
    方法三:黑白灰+突出色+高保真图形

    5. 交互流程图绘制
    6. 动态交互原型设计

    2017-05-11
  • 教你掌握27种图层混合模式的用法

    嗯,让我们从最最基础的说起——像素。你就把他当成一个个五颜六色的小色块.这些小色块们都有一个特定的标记值,比如,RGB值,CMYK值了。当然透明色块也是像素,不过值是零罢了。我们的计算机就是靠识别这些数值来认识颜色的。

    2017-06-05
  • 在Axure中,如何用动态面板实现banner的轮播效果(附Axure教程及软件)

    axure功能太强大,动态面板可能已经搞得你头晕眼花了,更别提7.0版本的中继器了。废话不多说,还是和大家分享一下动态面板实现banner轮播的效果,对动态面板还不熟的,不妨来看看这个效果的制作过程,然后自己试着做一做,绝对增加自己的信心。就拿某宝首页banner轮播效果为例进行说明:1前期线稿图,部件准备01先画个大概的位置线框图,如下图所示,做了3张banner的轮播效果02banner位置的占位符转换为动态面板(鼠标右键,转换动态...

    2018-03-06
  • 【线下沙龙】产品经理交互设计大会

    2018年产品经理交互设计交流分享大会活动背景一个优秀的产品经理不仅能引导产品的发展,而且还能引导公司的发展。同时,他还是一名优秀的执行者、项目管理和团队管理者,具备敏锐的洞察力,能在用户心理和产品细节间灵活游走,打磨出令人惊叹的产品。所以,在成为CEO之前,先成为一名出色的产品经理吧。然而当我们投入到实际工作中时,总是一次又_次遇到阻碍:和运营、枝术部门沟通不畅,项目推进难。公司要求不高,任务很轻松就能完成,想要挑战大公司,却深知自己...

    2018-04-22
  • 即将开课!6周,快速玩转axure,同时提升产品和交互能力

    前段时间,一位朋友因为原型不太过关,被老板委婉提醒了。我这位朋友的状况不是特例,原型是产品经理最基础的技能,如果不过关,后果太可怕了!最后给老板留下的印象:这人产品能力不行,每天加班就为改原型,产出太低。想成为靠谱、高薪的产品经理?第一步得提高Axure原型能力!起点学院&腾讯课堂联合打造给产品经理的Axure课程已有1868位同学学习,学习效果显著Axure零基础也能学,学完画出规范原型产品思维和交互贯穿全程,学完告别画图经理通过6周...

    2018-04-08
  • IxD交互设计工作中的关注重点

    一、IxD交互设计工作中的关注重点 1. 情景(Context) 皮特•杨•斯塔皮尔斯(Pieter Jan Stappers)认为情景指人与产品交互的环境。情景具体包括的内容取决于设计要解决的问题、设计目标和设计产出。 为什么要研究情…

    交互设计 2015-06-13
  • 交互设计 | 做设计你怎能不了解心理学?

    以用户为中心的设计7个原则:(1)应用存储于外部世界和头脑中的知识(2)简化任务的结构(3)注重可视性,消除执行阶段和评估阶段的鸿沟(4)建立正确的匹配关系(5)利用自然和人为限制性因素(6)考虑可能出现的人为差错(7)最后选择,采用标准化今天分享的【主题】什么是无形的设计?【Giver】IHan,自由设计师有形的通常是指硬体的设计,所以像是越来越小的晶片或者你可以做曲面的屏幕之类,那无形的话通常是指它的一些背后的一些科技的发展,或者是...

    2018-05-02
  • 拆解【用户体验要素】

    作为产品经理不但要有能力作出产品设计和规划,更要尊重用户,作出用户体验更佳的产品【用户体验要素】告诉我们如何更好的设计出让用户体验更佳的产品方法论,那么这本书如何更好的应用到实战中,我们如何更好的将理论与实践结合呢?我们今天简单来阐述一下【用户体验要素】概论知识初识【用户体验要素】【表现层】我们所能看到的一系列的网页的元素:图片、文字、按钮等,有些图片就是图片,单纯的进行展示;有些图片或者文字有可能就是一个按钮链接,通过点击可以执行某种...

    2018-05-05
  • 用户体验是一门玄学秘籍

    Part 01 - 用户体验和用户体验设计关于“用户体验”这个词,很多刚入行的新人都觉得它玄之又玄,妙不可言。一方面是不知道他具体到底是什么,就好像那是一块理想地,看不见也摸不着,另一方面呢糟糕的用户体验,作为用户是能清晰感觉到它的存在。所以呢,在这里,会围绕“用户体验”这个词做一个科普性质的解释和综述,希望对初学者一些小小的帮助。1.1 什么是用户体验?用户体验的定义有很多种,我比较倾向的解释是:“用户体验是人对于使用一个产品、系统、...

    2018-02-22