摘要

本期精读文章以一个简单的例子，抽丝剥茧细数讲述如何面向用户可视化设计，探索用户最终的目的，化繁为简，化多为少，揉和 N 张图至一张图，并传达更多的深意。本文原文：http://www.storytellingwithdata.com/blog/2017/12/14/how-we-position-and-what-we-compare

下面是案例优化的具体步骤：

庖丁解牛 - 可视化案例优化

可视化的时候，一定要优先考虑用户能够比较什么，然后把这些数据放到一个基准上，并把要比较的东西放到最近的地方。这样用户就可以快速简便的处理比较数据。图中有一系列类似分面的柱状图，代表了 Q1 ~ Q3 三个季度的账户 targeted 筛选 -> engaged 订阅 -> pitched 投放 -> adopted 采用的四个状态的百分比，这四个状态是呈漏斗式的数据，分别是上一个数据的子集。这个案列中，用户希望能够在一张图中比较所有的数据。如下是基础原始图：

这张原始也不乏一些优点，每个数据都清晰的表明了含义，但还是需要花费一些的时间找出图中数据表达的最重含义。但是是不是有更好的办法重新排列数据呢？我们来整理下这张图需要对比的内容把。

1. 左上角，我们可以对比 Q1 北美 的四条柱状图，因为这四个数据相邻，并且是在一个坐标系中。

2. 最上面一排，我们可以对比 Q1 北美和 EMEA engaged 订阅（两条紫色柱子）的数据，这个对比需要我们横向用手指去比较，需要参照物，存在一定的门槛。

基于第 2 点，我们可以考虑转换下思维，转换下数据呈现的类型可以更快速的比较。文中作者从自己在银行的职业生涯中发现线性图形的角度可以更快速的比较。所以就有了下面一张图

再进一步去除无用的柱状图，并把三个纵向的图合并，进一步简化成下面的图

可以看到坐标轴也有一些小优化，增加了字母标注每个步骤，不只是单一的颜色标注，每条线也能够区分出来它的归属（Q1 ~ Q3）。除此之外，我们还有一些非常特殊的信息需要透传，用户虽然在对比以前的数据，但是对当前的现状也是非常关注的，所以增加一些额外的实时信息以及数据解读，可以辅助用户做出下一步决策。

最后进行色彩优化，就可以看到如下最终的方案：

从这个方案，可以清晰的解读出：

1. 每个阶段，北美的数据都比其他地区低

2. 相比其他区域，为什么 APAC 的传播度有了突然的提升？

3. 最需要关注 Q3 的数据，以及最终阶段的数据

最后

从这篇文章的可视化案例优化样板，可以总结出以下步骤：

1. 明确用户看图目标，根据需要转换图形表现形式

2. 合理合并不需要拆分的数据，尽量减少数据的平铺

3. 猜测探索用户下一步，突出当前实时现状、异常点、决策意见

4. 利用色彩给数据分类，避免用户混淆

虽然这篇文章给出了比较场景下的优化案例，但是数据是僵硬的，呈现形式是多样的，其他场景下也会有其他更适合的优化方法。可视化和语言一样，前者是把数据翻译成图形，后者是人的思维翻译成文字。不过这也带来与语言雷同的障碍，换种方式表达可能传达的含义就完全不同。如果数据的表达方式能和语言一样，有一些固定的语法和规则，就可以大大减少表现上的歧义。因为人脑处理图形效率高于文字，所以现在很多大数据还是属于沉睡状态。我们前端做的是提升人机交互效率，通过图形可以几倍甚至几百倍提高理解速度。现在我们做的还只是把结构化的数据做到让人读懂，未来可能数据直接原始化存储，基于深度学习+可视化，转化成图形化数据，就可以让人类读懂图，甚至让机器也读懂，实现自我大数据解析。

未来，一切不可预期~~~

讨论地址是：精读《how we position and what we compare》 · Issue #50 · dt-fe/weekly

如果你想参与讨论，请点击这里，每周都有新的主题，每周五发布。

本文章由javascript技术分享原创和收集