初次设计互动产品是一件很令人纠结的事情。小项目还好,一旦遇上了复杂的情况,就算有再好的工具和团队沟通也不好使,甚至思路都被打乱。现在很多创业者都面临着同样的问题。因此在这里我想分享一些通过改变设计流程来处理复杂产品的经验。

我的插画设计经历

回想大学时代,我们主要设计海报,书籍封面,网页,还有其它一些插画。做这些工作通常使用Adobe Illustrator或Photoshop,它们非常适合设计插画内容。批评是非常有益的,因为批评本身就是建立在对产品有一定了解的基础上:对于一样从未见过的东西,用户必须花几分钟去了解它才能发表意见。就一张海报而言,它在设计人员和读者的眼里并没有什么两样。

后来我搬到旧金山并开始设计应用程序界面,但我的习惯依然没有改变:我先设计一个界面(也可能是一组界面),然后让其他团队成员提提意见。这种方式我称之为“界面式设计”。

界面式设计并不适合应用程序开发

如果你正在开发一个比较复杂的应用程序,你不可能像看海报一样把它的结构在脑子里整个回忆一遍。在开发过程中,我注意到多数团队只专注于某一个界面,命名其它界面只是为了便于跟踪。却没有考虑应该怎样让界面和功能互相配合。

通常开发过程中,我们把产品设想为一组界面。但这样做有一个缺点:它无法真实反映人们的使用情况。实际上,用户每次使用产品的时间并不长,在30秒到几分钟之间不等。

首先,用户会在搜索结果中注意到你的软件,花上一分钟左右浏览它的相关信息,之后退出。接下来他们可能会再次打开软件,注册,然后退出。或许他们会收取一封电子邮件,打开软件,完成购买,然后退出。这些例子生动说明了用户实际体验产品的方式。

一个好产品不能简单把界面堆在一起——要让它们互相联系起来。

如果你和你的团队还只是单独考虑该如何设计各个界面,而没有把它们联系起来,那么你就很难感受到用户的真实使用情况。

故事样设计

只要我能真正像用户一样思考,一切问题似乎都能迎刃而解。但我还是跳不出这个怪圈——无法把各个界面联系起来。

因此我开始尝试用其它方法打破固有的设计模式。例如更换开发工具,改变开发方法以及团队合作方式等等。下面来谈谈其中四种。

方法1:创建一个故事情节

设计开始之前,我思考了一些对产品的成功至关重要的东西。产品核心可能由数十个部分构成,我只需选择其一入手即可。然后,我把它想象成一个故事情节:就像一集漫画。如果这漫画的结构已经确定了,那么可以把一个用户界面看作一帧情节。有时还能更抽象一点,把一个交互功能(类似于用户读取或是点击操作)看做一帧。

虽然这种开发方式速度并非最快。但它确实很有帮助,它的优点在于:

  • 它能让我集中精力设计所有的界面——甚至是搜索引擎或者电子邮件页面。
  • 它让我始终以用户的目的为主要思路,因为它能真实展现用户的使用过程。
  • 一旦确定某些情节是整个故事中的重点,它们能让我们优先考虑对应界面上的功能。
  • 故事情节还能让我注意界面之间的转换。一个按钮的意义不仅在于让用户切换界面,还应该让用户知道下个界面上有些什么。

使用这种方法最大的好处是:我可以重复使用同样的故事,这样可以大大提高工作效率。如果我想给其它团队成员展示我的界面设计思路,我只需要告诉他们这个故事。当用户初次使用时,我们可以把这个故事用一系列图片表示,这样用户能更好理解使用方法。如果我们需要演示产品或者为产品做一个视频介绍——你猜对了——用这个故事就行了。

方法2:使用Fireworks描绘整个故事

设计过程中,大多数设计师使用Photoshop或者Illustrator。对于可视化设计来说,没有什么比它们更好了。但我们应该注意每个界面的排版应该和用户最终看到的效果一样。这些故事可能包含20到30个界面,在photoshop中建立它们会比较困难——因此多数设计师不希望这么麻烦。但不用Photoshop的话,界面之间还是没有联系。幸运的是,Fireworks有一些巧妙的功能能够在这种情况下完成故事样设计:

  • 内置式页面:你可以用一个文件容纳整个故事内容。使用Pageup和Pagedown键可以翻阅它,用户最终看到的效果一目了然。
  • 符号:如果一个标题或者图标在几个页面上多次出现,你可以用一个符号代替它。如果需要更改图标,就不必单独修改每个文件了。
  • 查找和替换:设计过程中要临时更改某些功能的名称?它能够做到。
  • 高保真:从草稿到最终排版都可以在Fireworks中完成。故事基本设计完成后,你可以使用Photoshop修饰细节部分。

方法3:使用纸质文件

设计团队最终审查时,我从不单独展示每个界面。相反,我会把整个故事中的所有界面都打印出来,然后按顺序平铺在会议桌上或是在墙上挂成一列。

enter image description here

这种方法的巧妙之处在于整个团队都能近距离观察每个界面的细节。他们可以随时返回,查看相邻的界面以及界面间的切换,还能看到整个故事。这方便所有人对于界面功能和用户目标达成一致。

当我把结果展示给其他设计师时,我会用电脑演示代替纸质文档——效果差不多。但是纸质文档对于那些不是整天做设计的工程师和项目经理实在是太有用了。用纸质文档的好处是:你可以随时在上面写下修改意见,方便参考。

方法4:抛弃实体模型,改为录制截屏视频

这是我用过的方法中最奇怪但却是最有用的。我曾经尝试在电子邮件中解释界面之间的关系。我附上了一组界面,然后艰难地解释它们是如何结合在一起的。这不仅写起来痛苦,读起来更是毫无乐趣。

因此我试着用ScreenFlow软件录制截屏视频。所有界面在Fireworks中建立完毕之后,我只需要像用户一样做出点击的动作,跳转到下个界面,然后描述跳转过程中发生了什么就行了。第一次录这种视频花了我不少时间,但操作过几次之后就熟练多了。录这样一段视频比用电子邮件描述要快得多。

enter image description here

这个软件非常令人惊讶:在这些视频中就能真正体验到产品。因为它能非常好地模拟真实产品,这非常有利于收集用户反馈——就像用户给一张海报提意见一样。


这只是我和我的团队进行“故事样设计”的一些方法。另外我好奇的一点就是:其他人有没有注意到”界面式设计“和”故事样设计“的区别?或者你们有没有其它”故事样设计“的方法?期待你们的分享。

原文链接:http://www.designstaff.org/articles/story-centered-design-2012-03-22.html