五指山用户体验：突破大脑像用户一样思考

当先进次开始尝试网站设计时，我是非常挣扎的。小的项目都还好，但是当网站设计变得复杂时，我注意到工具、团队的交流甚至是我自己的思考都开始失效了。我看到今天许多创业公司面临着同样的问题。所以大宛网络想（和大家）分享一些方法，利用这些方法我们已经在过去的几年中改变了处理复杂大型网站的设计过程。

过去常常进行页面设计

回顾大学，我们主要设计海报，图书封面，（网站）主页和很多其它页面。我们使用 Adobe Illustrator 和 Photoshop 软件，它们在设计页面时表现都非常棒。同行的批评是非常有用的，因为批评本身就非常类似于使用产品：一个普通的观众走到他们之前没有见过的事物面前，然后看上几分钟。在一个设计工作室看到一张海报就好像走在大街上看到这张同样的海报。

以页面为中心的设计不是服务于网站的

一旦你将要处理一个拥有十多个页面和数百个状态的APP时，你不能像（设计）一张海报一样在大脑中 Hold 住整个产品。我注意到我们团队在围绕着单个页面发邮件，讨论着单个页面，给所有页面命名时仅仅只是记录（keep track）。但是我们对如何把页面和特征组合在一起（这件事）没有任何的关注。

我们把产品当作一组页面来思考。但是这种工作方法有一个问题：人们怎样在现实生活中体验这款产品是不重要的。在任何地方人们都在很短的时间流里使用产品，大概从30秒到几分钟。

一个用户可能在一个搜索结果中首先注意到你的产品，花一分钟的时间大概浏览一下这款产品，然后离开。他们可能回来，注册，然后再次离开。他们可能打开来自这款产品的邮件，回来，购买产品，然后离开。每一个这样的小故事都是人们实际情况下体验你的产品的一种方式。

一个产品不是（简单的）一组页面——它是这些页面组成的使用场景。

如果你的团队没有关注这些使用场景，如果你孤立地思考每个页面，那么你的想法将和实际使用你的产品的用户有效不同。

以场景为中心的设计

一旦我意识到使用场景是我们实际上设计的东西，一切都变得简单起来。但是我对保持关注的故事仍然有困惑——我不断地发现自己在思考个别页面。

所以我开始通过不同的方式来突破我的设计过程。我改变了工具，可交付成果，以及如何和我的团队一起工作。这里有我发现的较好的四种可以专注于故事的方法。

方法一：在画线框图之前使用故事板

在开始设计产品之前我会思考它的一个使用场景，这对于产品的成功是至关重要的。产品的核心很有可能是由十几个或是更多的使用场景组成的，但是我只选择一个开始。然后我构建了一个故事板——很像漫画。如果我已经在脑海里有了线框图，那么故事板的每个框架在界面上都会有一个对应的页面。有时候我得到的更多是抽象的使用场景，每个框架都是一个小型交互数据块：用户阅读或点击的任何区域。

好吧，这不是火箭科学，但这门学科在很多方面都有帮助：

1、故事板帮我同样专注于我们需要设计的所有屏幕——其中一些甚至可以被搜索引擎用来搜索信息片段或电子邮件。

2、故事板强迫我去思考用户目标，因为它们显示了如何在产品中完成任务。

3、一旦我们认同故事板是对公司较重要的东西，它们能够帮忙选定所有功能在屏幕上的优先级。

4、故事板真的能够帮助我专注于屏幕之间的切换，一个按钮在屏幕上要有它的意义，但它也需要设定好用户将在接下来的屏幕上看到什么。

而且较棒的部分是，我可以反复使用这些相同的故事板，所以它大幅加快了我的其它工作速度。当我向团队展示UI设计稿时，我需要向他们展示一个故事板。当用户开始使用产品的时候，我们可以在一组屏幕上向用户展示相同的故事板。如果我们做出了一个可交互的demo或者完成了一个产品的介绍视频，就如你猜测的那样——我们需要一个故事板。

方法二：用 Fireworks 渲染整个使用场景

我知道大多数的设计师都使用 Photoshop 或 Illustrator ，况且是视觉设计，没有什么软件比它们更好了。但是如果我们正在设计故事板，那么设计标准应该是将来用户会看到的高保真页面。这些故事板可能需要20~30个页面，如果用 Photoshop 去设计它们会变得很艰难，所以大部分的设计师不会找这麻烦，我们又再次回到设计单个页面。幸运的是， Fireworks有一些巧妙的功能能够使设计尽可能地保持以故事为中心：

1、内置网页：您可以在一个文件中建立一个完整的故事。上下方向键可以很容易地翻阅故事班，看看到底用户将看到什么。

2、母版：如果页眉或图标出现在多个页面，你可以把它做成一个母版。然后，如果你需要在用户测试之修正一个图标，你不必单独修改20个文件。

3、查找和替换：团队可以在设计进程的中途修改一个功能的名字吗？没问题。

4、高保真：您可以在同一个工具中把一个粗糙的线框图变成一个好看的线框图，一旦故事板是固化的（solid），你可以为了更好的细节设计而回到 Photoshop 软件中。

方法三：在纸上回顾整个使用场景

当我们团队到了需要审查设计稿的时候，我几乎从来不展示孤立的一个个页面，相反，我将会把一个故事板里的所有页面都打印出来，然后把他们铺在很长的会议桌上或者用胶带把它们贴在墙上。

这样的工作方法非常好，因为团队人员可以近距离地看到一个页面上的所有细节。他们可以往后退一步，看到相邻的页面，想想页面之间的交互切换。甚至他们可以后退更多以看到整个故事板，这有助于让每个人对页面上需要有的内容的用户目标和任务保持相同观点。

当我向其他设计师展示工作内容时，我将跳过图纸仅仅是在电脑上点击屏幕——他们将获得所需信息。而且我发现打印的这种方法对工程师和PM们来说是非常有帮助的，他们不会像我一样花整天的时间来研究交互设计。哦对了，在设计的时候你可以直接用纸做笔记，并且可以把他们带回你的办公桌上作为下次的迭代素材。

方法四：不要发送 mockups ，记录屏幕录像。

这是我所知道的较奇怪又是较有帮助的设计交付物。我过去常常通过电子邮件来解释交互细节。我会附上一组页面，然后努力去解释它们是如何组合在一起的。这写起来很痛苦，而且阅读起来也不是那么轻松。所以我开始用ScreenFlow录制故事板的视频。由于每个页面已经建在Fireworks中，我只需要假装去点击用户会点击的地方，跳转到下一个页面，然后对着相机描述正在发生什么。先进个视频我花了很长的时间去录制，并且通过实践的方式克服了我的怯场，不久之后，我录制视频的速度要比写邮件快得多了。

我常常惊讶于真正的产品是如何从这些视频当中感受到的。因为它们可以很好地模拟较终的产品是什么样的。它会成为收集反馈的一个很好的工具，它几乎像再次批判了一个简单的海报。

以上这些仅仅是一些我已经改变的工作方法，它们能让我和我的团队专注于故事场景。我很好奇是否其他人已经注意到了以页面为中心的设计和以场景为中心的设计之间的不同？你有学到什么方法可以让你在设计过程中专注于故事这些故事场景吗？

【用户体验纯干货，赶快来收！】

用户体验设计趋势：

《设计行业大起底！图说2015用户体验行业调查报告》

网站用户体验指南：

《就这么简单！搞定网站的用户体验设计》

网页设计问题：

《躺枪！看看影响用户体验的设计问题》