译文 | 如何通过讲故事来简化用户体验设计

原文来自UXPin Studio，原作者是Jessica Lowry，一位英国的用户体验设计顾问，笔者译来与大家共勉

作为一个用户体验设计师，我越来越多地接触到与数据可视化相关的工作。数据本身可以在视觉上引人注目，但它需要遵循某种语言和故事来使人感到印象深刻。

多年来，讲故事的艺术已经成为我搭建设计基础的架构。每一个好的故事都有一个主人公，他有某种形式的追求。故事里的每一种追求，总伴有一个必须杀死的怪物。描述好你的问题和用户，然后打造一个故事，**帮助大家更好地理解工作过程。

我将通过我最近在跟的一个项目来解释这一过程，这也可能**在你自己的用户体验设计项目中有所帮助。

在项目之外寻找灵感

视觉语言与以人为中心的设计基础十分相近。

人类在创造我们今天使用的字母之前就创造了视觉语言。壁画是人类最早的的交流方式。所有好的提示工具都是相似的，图纸就是这样，能很好解释问题本身和解决问题的方法。那些早期的图纸并不是为了作为一种原始形式的室内设计而出现的。洞穴里的壁画讲述的是时事性的新闻故事。绘画的人在尝试警告其他人潜在的危险以及他们共同的生存技巧。从本质上讲，洞穴壁画就是可视化数据。

就像在《为人眼进行的Web UI设计》中描述的那样，简洁有力的图像的具有很强的交流能力。但是如何把这种这种力量融入到像素中呢?

最近我需要设计一个交互式的系统地图，其中要转达几个关键因素，包括:

大小、距离、风险、活动、路径、连接

从本质上讲，这样的网络安全应用程序在检测危险时，就如同海里捞针的同时显示出其特定位置。

从集群网络数据的例子来看，这些图**看起来是很优雅，但是从交互的角度却非常不切实际。因为这样确实是使网络看起来漂亮了，但一旦需要加入交互式的功能时就很难使用。我看到传统方式设计的互动地图可用性都很差。我需要从另一个地方找到灵感，一些在现有可视化网络数据以外的例子。

为了可视化数据容易阅读，需要将不同的属性独立开来。这就形成了视觉语言的结构。

拥抱隐喻的故事能力

我的灵感通常来自大自然。自然本身就是完美的设计。森林是混乱的，但在其中也是有条理的。

森林的故事不是它巨大的整体视图来理解的，而是亲身在其中看到的视图。相同的原则也**应用到我要设计成地图的系统网络中。

数字本身毫无意义。概述数据可以提抽出更有用的高级信息但这些信息很少可操作的。数据的上下文很重要，而且必须提供数据与之结合。理解其中的连接需要更近一步的观察。

一旦你开始拉近去看，森林就**呈现全新的意义。当你近看一棵树，感知**是全新的。你越仔细观察,越能看到纹理和细节。在微观层面上,森林元素之间的关系便说明了森林生长的过程。

我认为森林中的一切都彼此合作从而生长成一**森林。一个层级和自然法则构成的网络决定了植物如何生长。比如颜色就在生物如何生存和植物为何接近阳光起重要作用。一切都在完美的和谐中生长和消亡。植物死后，它就变成了下一代的食物。

我决定采用平面式的体验，因为从用户的认知负荷看来，这样**优于3d图的形式。减少认知负荷就更容易讲好故事。交互式的组件应该帮助用户关注领域里的重点。我研究了不同的树形地图，寻找地图式数据中的正确处理方法。

创建一个故事

把这些元素拼到一起很花费时间。我创建一个故事来帮助我：

“用户乘坐飞机在一个茂密的森林上一边飞行一边寻找地面上的路径，他正在寻找的是一颗红色的种子。这颗红色的种子是被外人引入森林的，目的是用红色种子生长出来的植物来消灭其他植物。损失将**是无法接受的。但是红色种子有好几颗，用户需要在种子长成植物之前定位和移除它们。”

这个故事帮助我总结出了如下的，用户完成任务所必需的交互功能描述:

• 用户必须飞越整个森林。
• 用户必须能把红色隔离出来。
• 用户必须区分种子和其他森林的组成。
• 用户必须在种子变成一种植物之前找到。
• 用户必须理解树,植物,叶子和种子之间的关系。
• 用户必须了解生长模式以建立时间表。
• 用户必须找到可以在地面上跟随的路径。

显然,所有这些都是真正用户在产品中执行的任务的小说版本。但通过使用一个故事作为比喻,可以设计一个有着共同语言的主题体验。这在与团队和客户沟通产品的关键特性时特别有效。用我们共同的故事来比喻，我们所有人都能共享相同的心智模型。

基于我们的隐喻，真正的用户任务应该翻译成:

• 用户需要一个整体的网络视图。
• 用户需要能隔离出网络中的目标。
• 用户需要能隔离出网络的关键属性。
• 用户需要通过日期过滤网络活动。
• 用户需要浏览网络的指引。

把故事变成现实

我研究了很多可视化网络的例子并在Buzzfeed上找到这个情节线索树形图。它成为了我正在研究的网络安全应用的完美视觉模型。

作为一个结合地铁图形式的树形图，它使得用户可以很容易地理解高层级的信息。而且它符合森林的隐喻，更加意义非凡。我们能看到根代表的是客户关注的焦点，而叶和树枝则代表整个森林(网络)。颜色的不同编码标识出了什么是最重要的，以及其来源是什么，不管是用户组、用户类型还是设备。我们能够像看一幅易于消化的图**那样，看清所有高层次的关系。

这个模型**允许用户直接查看整个森林(整个网络)，红色的种子(安全隐患)，以及他们如何走进森林，还有森林是否还在生长(入口和目的地的路径)。

当用户飞过这个平面森林的时候，关键领域很容易识别出来。正如你在下面这个低保真模型里看到的，我用颜色突出了红色种子在找到长入土壤的路径(安全漏洞)，以及种子开始通过根和叶长成一株植物(传播病毒)之间的时间。红色种子代表一个风险，但种子长成植物的过程是一个更大的风险。种子的不同颜色直观地告诉用户应该先调查哪个种子。

我承认这个原型不是很漂亮，但它大致上阐明了功能——而这正是我们所需要的。

一旦用户选择一个种子展开调查，路径就**变得明显。森林的其他元素仍然可见，但不**使用户分心。事实上，所有不必要的层级都被拨开了，只揭示到达红色种子的路径及其当前的发展现状(这是用户最关心的)。

迈出下一步

为了设计更多故事驱动的用户界面，你需要到办公室以外去寻求灵感。关注自然，还有那些将复杂结构归结为简单感性理解的优秀视觉艺术家。

想了解其他引人注目的视觉设计故事，也可以看看这本免费的电子书《为人眼进行的Web UI设计》（英文电子书，可从在此处找到下载），从中可以了解到33个设计案例详细的拆解。

本文由 @lrioLee（微信公众号［简并］） 翻译发布于人人都是产品经理 ，未经许可，禁止转载。