数据驱动的接口设计

问题导读：

1.怎样针对不同的用户提供不同的数据？
2.怎样选择合适的的可视化？
3.基本的内容与自定义的可视化区别？

讲述你的数据故事

“仪表板”、“大数据”、“数据可视化”、“分析学”—这里曾发生过一次由个人和企业用数据寻找有趣事物而引发的大爆炸。幸运的是我在几十个数据密集型接口的工作中度过了我的整个职业生涯，同时想和大家分享一些关于如何设计一件独特且有意义的产品的想法。

很多人已经解决了这个问题，所以我将侧重整个过程中最有影响力的部分进行延伸。

1.不同的用户，不同的数据

请注意角色如何置顶每个画板界面。我们的客户已经接受了这种方式。

给一个房间的客户呈现原图会是一项艰巨的任务。无论你是在解释框架图和流程图，或者是讨论视觉处理，都很难让每个人都理解你的想法。

通过人物角色组织原图将帮助你（你的客户）在讨论中有的放矢。

2.网页的塑造

多年来我掌握的一项技能是塑造网页技巧的概念。其核心思想非常简单：

向用户显示他们最想看到的，然后基于用户故事或信息层次建构剩余页。

网页塑造的概念是写散文（或其他形式的交流）的核心原则，并且在写完一本书后会对写作的了解变得更加深入。这些年来，我花了很多时间在《风格：清晰和优雅的基本知识》这本书上。除了成为一个优秀的作家以外，它所描述的概念说明：

当你开始分心时，你的受众就很难看到每个元素是什么，而是关注到整篇文章。

当你进行用户体验设计时要牢记这条有用的原则。下面是我们用来塑造网页的两种常用方法。

制作仪表盘结构。问问自己 ：通过这个信息我要传递的是什么？

我在behance和 dribbble弹出的窗口上看到许多仪表盘和数据。它们设计精美（视觉），但往往极其平庸。它们要么将无数的图形部件没有层次的放在pinterest风格的布局上；要么是偏离数据，过度设计的可视化。

左边的图像展示了对数据可视化的压倒性方式。右边是破坏数据点的装饰的例子。

在上述的图像中（左图），报告仪表盘需要一个任务控制途径来呈现信息……这是相当具有压倒性的。为了避免这种情况，为处理这些类型的接口，我们尝试将信息规划成做更像你正在阅读一本杂志文章。

不要说你没有时间和地方花费在一个任务控制界面上……我个人很喜欢类似设计的东西。但在大多数情况下，花费所有的时间去看全部的内容是没有必要的。

考虑到最关键的事情——避免造成可视化的一知半解。首先塑造具有关键信息的网页，然后采取进一步行动以便向用户呈现。

3.选择合适的的可视化

有许多（太多）为了追求美学效果而设计悬浮的误用图表。

最糟糕的是，这些坏习惯似乎在不断繁衍。我看到的每一处本应该是饼状图的却变成了面积图，本应该是柱状图的变成了折线图。因此，让我们一起来制止这样的情况发生…一下便是一些使数据合理的技巧：

从数据出发

虽然它不是吸引人的原始表格行数据，但却是开始的最好时机。它有助于你思考什么数据变量是有用的以及不同的数据实体是怎样相关联的。

原始数据的平整性会帮助你思考系统实体之间的关系。

除了茫然的张望每行数据并希望想法最终划入你的潜意识，你可以通过核实这些资源更加主动地去发现有趣的联系：

绘表——一种由可使数据形象化媒介发展而来的工具

设计比Google Sheets, Illustrator,以及Sketch更好的表格

画面——这是那里最好的工具之一，但却非常的昂贵。没有任何良方对这一部分的进程有益。不要害怕投入数据以及通过混合搭配不同变量的方式制作图表。这是很花时间的，但却非常值得。我所想出的一些最好的想法都始于我对原始数据文件的修补。

处理不连续数据和连续数据

我意识到，在连贯数据方面图表有着比其他事物的优越性。选择有利于你作品并且使人弄懂的图表是件容易的事情。我已经负罪独自干过很多次了（我爱我制作出来的散点图）

依赖你正在使用的某些可视化数据类型的工作，你会比别人做得更好。选择合适图表的一个方法是评估你拥有的数据类型。这里有两种主要的数据类型：

一，不连续数据——你可以计算其明显的价值。

条形图对于不连续数据发挥着最好的作用

二，连续数据——任何价值都在一定的范围之内。

例如，降水对于季节的影响或者身高/体重对一个人的影响。

折线图对于连续数据发挥着重要的作用

简而言之，折线图对于连续数据发挥着重要的作用，条形图对于不连续数据发挥着最好的作用。

一个固化我思想的资源是来自Dona Wong登在华尔街日报上的文章: Guide to information Graphics。我希望早些年我就可以拥有这本书。在选择合适的表格以及表现信息的Dos和注意事项方面它是一个无价的参照。

4. 基本的内容与自定义的可视化的较量

近期，作为这些富数据的设计者，你必须不断的问自己“我应该走不寻常的路去定制？或者该使用经过检验而可靠的图表来表达信息？”

我最近在37 Signals上看到一篇名为 Three charts are all I need的文章。作者提出有关可视化“解决问题”的特性如何取代其视觉质量的强项。我完全同意他的职业情绪。然而，我认为他的观点体现出严重的功利性。我认为自动可视化往往能提高数据的可用度，也会使其外观独特富有吸引力。

一个基本条形统计图的样子。

对我来说有“一对多”和“一对一”两种图表。表状的、线状的和条形的图表都对提供多类型的数据起到了很大的作用，但是它们仍然是非常通用的，“一个尺寸适合所有人”，作为一个专业的设计师，我希望我的作品看起来和感觉起来是独特的和有益的。

例如，《纽约时报》在争论他们的文章与定制的交互式可视化方面起到了惊人的作用，你可以在这里看到更多他们的作品，让我们一起探索无缺点的可视化定制的例子吧。

这个例子将一个扭曲置于一个现状表格。

在这个3D图表中，视觉化的变化不仅是视觉上令人兴奋的，而且也帮助用户更好地了解数据的相关性。

来自Selfiecity网站的例子在将其实际内容使用到创造可视化方面起到了不错的作用。

最后，我们同CNN做了一个项目，我们用色彩译码表示政党偏好和同时对可视人口统计学信息的3D挤压。

作为一个经验法则——我们试图提出当数据和技术需要时定制可视化，但是我们始终有一个B计划以防事情没有结果或顾客更喜欢一个不那么有野心的方法。

5. 那又怎样？

所以我们为什么总是将这些数据呈现于纸上？答案：无论做决定、调查还是预测未来，许多人都能碰上狗屎运。重点是，你的用户不会惊奇与你选的漂亮颜色，他们在尽力做他们的工作。

这是我的建议——在你已经得到你的花费清单并且一切都制作的恰到好处之后，问你自己，“那又怎样？”看每一个图形、装饰物、图、表并且考虑人们将会从它收集到什么。很多时候你会得出结论：“没关系”，红旗将会减少或重新考虑。

我也会碰到一些时候——我已经创造了奇妙复杂的仪表板的一系列趋势图，以及数个数据点的地图，仅仅是为了问顾客“我只想知道如果该产品在工作，我在哪里可以看见”，或者“我只需要知道三个东西，X、Y和Z，我从哪里可以找到那些？”