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

2016年6月13日 | By News | Filed in: 未分类.

Source: http://www.zhihu.com/question/19877400/answer/15744814?utm_campaign=rss&utm_medium=rss&utm_source=rss&utm_content=title

如何输出设计文档

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

设计文档输出方式很多。交互设计输出可以使用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,甚至是前端代码,看项目需要。

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

我认为:

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

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

谢谢阅读。:)

thanks,

yoyo

德国达姆安静的加班周日中午

来源:知乎 www.zhihu.com

作者:尤文文

【知乎日报】千万用户的选择,做朋友圈里的新鲜事分享大牛。
点击下载

此问题还有 24 个回答,查看全部。
延伸阅读:
做交互设计,最难的地方在哪?

深入学习交互设计需要出国吗?


Comments are closed here.