欧伟强

近10年数字化体验行业从业经验，在软件行业写了7年代码后，进入互联⽹，交互，产品，运营，业务兜了一整圈，阿⾥-盒马的体验设计专家。曾任职链家网上海研发中心首席交互设计师，贝壳找房交易平台服务设计负责⼈。

写在前面的话：

在研发，设计，产品，运营，业务岗轮了一圈后，今年我⼜回归了设计。

有意思的发现是，不管在哪个岗位，讲故事都是一个核心的技能，而设计师的突出技能之一，大概就是把故事讲得绘声绘色吧。

今天，我想和大家聊一聊「可视化-画图讲故事」。

可视化这个词，近几年大家并不陌生。

我试着在浏览器里搜“data-visualization” ，这是第一屏的截图。

图片来自网络

很容易让人生出 “可视化 = 炫酷的chart图表”的结论。

下面我想给大家展示一张非常经典的信息可视化图。

由法国土木工程师Charles Joseph Minard于1869绘制的《1812－1813对俄战争中法军人力持续损失示意图》。大家可以仔细看看，从这张图中读到了什么信息。

图片来自网络

图中透过两个维度呈现了六种资料：拿破仑军的人数、距离、温度、经纬度、移动方向、以及时－ 地关系。更进一步，在这些信息背后，大家有没有读到设计师想表达的另一层含义。

黄色的进军路线和黑色的撤退路线，随着时间推演，气温越来越低，军队人数也越来越少，这样的图形对比背后，是对战争残酷性的反思。

也就是我们常说的可视化的purpose，在各种数据和表现形式后面设计师想传达的意义。

所以我们试着重新对可视化做一个定义：

“可视化 = 承载了一定信息的有目的视觉表达”。

包括大家平时常常设计的chart，也是有“希望chart的阅读者在获取到差异化呈现的信息后有所 action”这样的purpose。

▼

重新定义可视化以后，对于可视化的表现形式就可以更开阔一些。

比如想表现环境污染问题需要大家关注，我们可以有这样的一些不同呈现：

数据图表（chart）和信息图（infographic）：

图片来自网络

图片来自网络

摄影作品（photographic）：

图片来自网络

漫画（comic）：

图片来自网络

承载的信息不同，表现方式不同，但传递出的意义是类似的。

特别是手绘漫画，快捷又方便，是设计师日常工作中一个非常好用的工具。比如我个人最常使用的手绘story-board。在让团队共同看见这个purpose上，一图胜千言。

▼

大家可以和我来做一个练习，准备4到8张便利贴，把你最近作业的一个产品或服务的核心场景，⽤简笔画描摹出来。

作为计算机背景的设计师，我也有一些小tip给到非art base的设计师们。

Tip：

首先我们讲讲画人物，火柴人大家都会画的，火柴人加上最基础的AP DEX，就是有了情感的小人， 人物情感的表现在表现故事的发展上有非常关键的作用。AP DEX只有三种表情不够用的话，给ta加上眉毛，就能变化出更多的情感表达了。

图片来自作者

其他的元素，大家可以练习用简单的点，线条，方块，三角和圆形来组合表达。

比如我想要给一个大家都很喜欢的任天堂的游戏pokemon go做一款智能手表应用的设计，我会怎么来画storyboard呢。

首先我会给这个应用设定一个核心功能“随时随地用智能手表玩抓pokemon”，为了让这个故事更吸引人，我会植入轻松，兴奋的角色情绪，storyboard的purpose是让看到故事版的人觉得“这款游戏操作非常简单好玩”。

然后我就会开始第一个画板的绘制，通常第一个画板会简要交代故事发生的who，when，where。

图片来自作者

➀那假设是在一个天气不错的周末，Mike戴着他的智能手表在公园散步。

那么接下来，我们用一系列图展开what的部分。

图片来自作者

➁Mike的手表突然震动了

➂手表提示在表盘正对的方向发现了一只新的口袋妖怪

➃Mike非常开心

➄Mike向表盘指示的方向挥动手臂（向口袋妖怪扔出精灵球） 

➅这只pokemon被精灵球抓住啦

6张便利贴，描述了一个简单的场景故事，我们可以用这样的快速故事版和团队做功能和使用场景的聚焦和共创，然后再进入到交互和界面的设计。

Powered by Froala Editor