交互设计师的产出物是什么?

前言:认真翻了过去一些年做过的交互设计稿,希望能写一篇交互设计输出的文章。一来,现在在德国出差工作,客户对设计文档要求很高,带来一些思考与回忆;二来,知乎的小伙伴们要了很久要看我之前的设计稿。所以一并写出来。:)

 

设计文档输出方式很多。交互设计输出可以使用PPT、Axure、InDesign、AI等工具。各种工具各有好处。我自己最喜欢的组合是:

 

Omnigraffle、InDesign、Keynote

 

Omnigraffle快速搭建交互、InDesign做精细完整文档、Keynote做设计讲解与设计回顾。

 

先来好玩的。年轻时候的输出。

 

这是我在华盛顿美国联邦贸易局短期实习做的一个项目。简单来说,就是政府有很多纸箱子,纸箱子里面有重要文件,一旦出现水灾怎么办?需要设计一个流程来帮助工作人员处理水灾这个紧急情况。这是我在学校之外实际工作第一次画稿,勉强算是交互稿吧,用的是Visio。这个时候主要是在学习如何讲思路。结果美国政府的小伙伴们还蛮喜欢的……
交互设计师的产出物是什么?
交互设计师的产出物是什么?

然后到纽约实习,在爱立信移动部门工作,继续用Visio,跟着资深设计师画这样的交互稿。这个时候主要是在学习如何处理复杂流程。个人不太喜欢交互设计输出要这么复杂。
交互设计师的产出物是什么?

在爱立信也开始学习用Axure来做移动网页的流程图。当时是视觉设计先做好,再让我拼成可点击可操作的流程图。因为Axure上手简单、交互性强,所以我开始喜欢用Axure。

 

返校后研究生二年级边读书边实习,在学校发展办公室设计网站,也画过比较土的网站结构图。
交互设计师的产出物是什么?

毕业后到西雅图AOL实习,继续用Visio释义流程图。
交互设计师的产出物是什么?

在AOL迷上用纸张来做交互稿。当时用剪纸、涂色、拼搭来形成交互场景描述,很有乐趣。从那个时候开始喜欢Paper Prototyping。

 

以上是我设计输出乱七八糟阶段,尝试了不少东西,直到正式工作开始。

 

记得到雅虎的第一天,老板给了我一台MacBook Pro,说:“好了,从今天开始用Mac,设计文档输出工具是InDesign”。除了在学校写论文,我没有用过Mac,我也没有用过InDesign,Mac系统那时候好像没有Visio。我想,完了,这是上班第一天就要丢人的节奏。

 

老板一步一步教我熟悉InDesign文档,我第一天就开始干活,要更新30个移动搜索的特别展示项。出乎意料,InDesign没有想象中那么复杂。

 

Mac配合InDesign,全新的交互输出生活开始。一切都改变了。

 

InDesign有两种使用方式。

 

第一种是直接在上面画交互稿。设计师可以定义每个字段、图等元素的样式,然后使用样式输出效率非常快。例如,有一个100页的设计文档,每个页面有5个手机界面,整个文档就有500个手机界面。每个界面可以复用的元素很多,例如header、footer、字段、图片等,每个元素都有样式。交互输出走样式的方式非常快。

 

举个例子,雅虎有一次设计大改。以前的搜索结果中链接是蓝色,俗称blue links。公司觉得在手机上,链接改为黑色比较好(后来又改回来了……)。所以我们设计团队要改这个链接的颜色。

 

当时我在InDesign样式里,把“link”这个我之前定义的样式从蓝色改为黑色,然后超过100页文档的所有界面里,链接都变为黑色了。隔壁某团队做另外一块垂直类搜索,用Photoshop出图再生成设计文档,改了一个星期……

 

InDesign的第二种使用方式,是更精细的设计文档。把PSD源文件放置到InDesign文档中,这个好处是Photoshop生成的图片已经视觉到位,放在文档里非常好看。

 

一定记得,要用Place这个功能把PSD源文件直接导入到InDesign做设计文档的元素。好处是,例如你做好一版设计文档,有后续迭代改动时,交互流程的改动,就在InDesign里面直接改,如果是界面的改动,你可以直接改PSD。然后你刷新一次InDesign,InDesign里所有Place好的PSD全部都自动刷新,超级方便。所以要保持好习惯,一般我是一个文件夹里有InDesign文件,旁边有一个PSD文件夹,为了保持指向性,文件夹别乱挪动。

 

师傅领进门,学艺在个人。InDesign会用了,就要思考怎样才能用的更好。大家都知道交互流程复杂的产品,一页InDesign很难放下很多图。两个解决步骤:第一,把总流程单独拿出来放前面,展示整体流程;第二,把整个产品逻辑进行场景细分,把一个大故事讲成很多个小故事,一个小故事放在InDesign的1-2页讲完。这个方法可以适用大部分To C的移动产品设计。

 

用了Mac后,开始使用Omnigraffle。这个工具是InDesign很好的补充。InDesign有一个缺点,维护起来需要认真有耐心,有点耗时间,虽然用熟悉了也很快,但是不适合快速建立交互模型。Omnigraffle就是快速交互设计的最好工具之一,我的最爱。后面我会讲用Omnigraffle做交互设计的例子。

 

回到把大故事讲成小故事的话题,讲一些有趣的例子。

 

这是在AT&T工作时,我老板的设计文档。
交互设计师的产出物是什么?

放大一点。
交互设计师的产出物是什么?

思路很清晰,看起来却不太方便。用上述讨论的方法进行场景拆解后,是这样的,得到当时洛杉矶所有产品团队的喜欢。:)
交互设计师的产出物是什么?

久而久之,就慢慢形成了自己的设计文档风格,用起来也是很开心。InDesign文档初建的时候,记得适应A3的尺寸。把InDesign生成的设计文档打印出来,在各种评审会上可以保证这个设计文档是赏心悦目的。

 

接下来说一下Omnigraffle做交互输出。这个工具开始用上手就比较快,当你经过几次项目积累了自己的控件库后,输出基本是神速。

 

一个例子,YP iPad这个产品我记得两周做了10次以上的创意,每次都是交互的大改,Omnigraffle帮助我快速出稿,每次更新只要半天。以下是我用Omnigraffle做的设计文档的部分页面。快速搭建的交互,简单直观,让产品设计流程各个角色轻松快速理解设计思路,粗糙一些也没有关系。
交互设计师的产出物是什么?
交互设计师的产出物是什么?
交互设计师的产出物是什么?

这个快速输出的风格一直延续到我现在的工作。下面是在腾讯的时候做移动应用中心的快速输出,产品讨论加两次改动刷新半周时间就搞定。
交互设计师的产出物是什么?

在华为的时候,更忙一些,所以我一般先在纸上简单画交互框架,再使用一样的文档输出方式。华为信息安全很严格,设计稿就不放啦。

 

设计文档可大可小。小的也许只有两页,但是文档的详细完整可以帮助设计文档沉淀传播很久。

 

例如我之前做的一个设置默认搜索引擎的简单交互文档,从美国跑到欧洲一年后又跑回来,一直用得很好。
交互设计师的产出物是什么?
交互设计师的产出物是什么?

大的设计文档可以作为一个产品所有亮点、细节、记忆的真实记录,这是雅虎搜索一个75页文档的部分页面。
交互设计师的产出物是什么?
交互设计师的产出物是什么?
交互设计师的产出物是什么?
交互设计师的产出物是什么?
交互设计师的产出物是什么?
交互设计师的产出物是什么?

大文档因为使用广泛,更新多,一定要保证几个点:

 

1,取一个响亮的名字,大家提起来会觉得开心。例如之前一个移动项目名称叫MI5,原来意思是Mobile Interface HTML 5,暗指英国安全局军情五处,Military Intelligence, Section 5。:)

 

2,一定要有Change Log,每次改动清晰说明。

 

3,有Table of Contents,并提供可以点击的链接,方便使用者直接跳转到指定页面。

 

4,每个小故事开始的时候要单独一页只写小故事的名字,打断节奏,营造节奏。

 

5,设计文档可以包括视觉Spec,甚至是前端代码,看项目需要。

 

做设计文档一定要细心,不能出错,文字描述部分要认真校对。这也是设计文档比较难以维护为精品的原因。

 

我认为:

 

一个产品最终面向用户的时候,用户看到的是成品。成品一定要是精品。我们要对用户负责,这是责任。

 

在设计输出过程中,设计文档是过程。过程我们也需要做精品。我们要对自己负责,这是态度。

 

两年前在腾讯听讲座的时候,我做了一个简单的InDesign设计文档模板,希望大家尝试一下看看效果:

pan.baidu.com/s/1c0oxWN

 

未经允许不得转载:水平线设计 » 交互设计师的产出物是什么?

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)