设计数据可视化交互界面
讲述你数据的故事
BY Erik K（Uber设计总监） 翻译：Kevin嚼薯片
“数据仪表盘”、“大数据”、“数据可视化”、“数据分析”——人们和公司们都在试图用他们的数据做有趣的事情。在我的职业生涯中，有幸做过几十个以数据为核心的交互产品工作，我想分享一些关于如何实现一个独特而有意义的产品的想法。
许多人已经讨论过这个问题，所以我将深入介绍我们过程中最有影响的部分。
1. 不同的用户，需要不同的数据
当你在设计复杂的产品系统时，用户必然会是多种角色。管理人员、经理和分析师，在这些常见角色里，每个人都有自己的工作流程和数据需求。
定义良好的用户角色和进行用户洞察本身就是一门艺术，这不是我在这里要深入的东西。如果你对这很好奇，那就去找找Cooper的相关资料吧。
关于用户角色的重要的就是要预先定义他们，从而围绕他们去组织信息架构任务和绘制线框图。
下面是我们去年的医疗报告应用程序的交付成果。系统拥有不同的用户，每个用户都需要自己的数据工作流。一旦我们建立了关键人物，我们会将他们放入到每一次审查会议的交付物中。
把人物角色标注在每个设计稿上方。我们的客户已经默许了这种方法。
向一屋子的客户去展示作品是一项艰巨的任务。不管你是在解释线框图还是流程图，还是去讨论视觉方案，都很难让每个人都专注在上面。
通过人物角色去形象地组织你的作品，可以帮助你（和客户）在这些讨论中保持一定程度上的专注。
2. 塑造页面
多年来我获得的一项技术就是塑造页面概念。核心理念非常简单：
向用户展示他们首先需要看到的内容，然后根据用户场景或信息层次来构建页面的其余部分。
塑造页面概念是写诗歌（和许多其他交流形式）的核心原则，在写完一本书后，我变得更加精通起来。多年来，我花了很多时间去阅读《风格：清晰和优雅的基础》。除了作为优秀的写作参考之外，它还有条理地描述了这个概念：
当你开始时是分散的时候，你的用户不仅很难看到每个元素是什么，也很难聚焦于整个段落。
这是在UX设计时要记住的一个有用的原则。下面是我们塑造页面的两种常用方法。
给你的仪表盘一些结构。问问你自己——我用这些信息来怎样讲述场景?（至关重要的、方便查看的、信息丰富的）（总体预览、详细总结、特定项目/任务）
我在behance和dribbble上看到的许多仪表盘和数据可视化项目都设计得很漂亮（视觉上），但绝大多数都是令人失望的。它们要么是大量的图形小部件被安排在一个没有层次结构的pinterest样式的布局中，要么是不适合数据的过度可视化设计。
左边的图像显示了堆砌式的数据可视化处理方法，右边是一个从数据的角度出发装饰物的例子。
在上图（左边），仪表板展示文档采用指挥中心的方法来呈现信息…显得非常堆砌。为了避免这种情况，我们尝试通过组织信息的方式来设计这类界面，使其更像是在阅读杂志文章。
不是说没有时间和位置去做这类指挥中心式的UI…我个人希望设计这样的东西。但在大多数情况下，在同一时间看到所有信息是不必要的。
要去考虑的关键是——避免创建一个粗略的可视化界面。在页面上显示信息，这样用户就可以先获得关键信息，然后再根据需要的内容进行操作。
3. 选择“正确”的可视化图表
有许多（真的非常多）的设计以美学的名义在滥用图表。
最糟糕的是，这些“坏习惯”似乎正在成倍增加。我经常看到，那些区域图的地方应该用饼图代替，或线图的地方应该用柱形图代替。所以我们应一起去避免这种情况…这里有一些小技巧来做数据判断：
始于数据
原始的表格行——它一点也不性感。然而，这是最好的起点。它将帮助你去考虑数据中的可用变量以及各种数据实体是如何关联的。
原始数据的扁平化特性将帮助你去思考系统中数据之间的关系。
除了盯着一排排的数据和期待灵感到来，你可以更积极一点，看看这些巨大的资源，帮助你去发现有趣的联系:
- Charted — 由Medium开发的自动可视化数据工具。
- 用 Google Sheets、Illustrator 和 Sketch 去设计更好的图表。
- Tableau — 这是最好的工具之一，但是很贵。
在这个过程中，没有什么灵丹妙药。不要害怕投入到数据中，尝试通过混合和匹配不同的变量来制作基本图表。这需要时间，但很值得。我的一些最好的想法都是从修改原始数据文件开始的。
离散的 和 连续的 数据
我花了一段时间才意识到这一点，有些图表比其他图表更能说明你的数据。在你的库中挑选好看的图表很容易。我曾经多次犯过这样的错误（我很喜欢用散点图）。
根据你所使用的数据类型去挑选，某些类型的可视化效果要比其他类型更好。选择合适的图表的一种方法是评估您所拥有的数据类型。这有两种主要的数据类型：
离散数据 — 你用来计算的不同数值。例如，多个得分数据，或Facebook的点赞数。
柱形图最适合于离散数据
连续数据 — 在一定范围内的任何值。例如，一个季节的降雨量，或一个人的身高/体重。
线条图最适合连续的数据
简而言之，线条图最适合连续的数据，而柱形图最适合离散数据。
一个我真正必用的资源是 Dona Wong的《华尔街日报：信息图表指南》。我真希望能提早几年前遇到这本书。它对于选择合适的图形和判断是否显示对应信息，非常有用。
http://www.amazon.com/Street-Journal-Guide-Information-Graphics/dp/0393347281
4. 通用的 与 自定义的 数据可视化方案
最后，作为这些数据丰富的系统的设计者，你必须不断地问自己“我是否应该使用更少路径，或者使用定制化？又或者我应该用靠得住的图表来表达信息？
我最近从 37 Signals 中发现了这篇文章——《我只需要三张图表》。作者提出了一个关于可视化“解决方案”特性如何取代其视觉特性的观点。我完全同意他的观点。然而，我认为他的观点非常功利主义。我相信自定义可视化通常可以增强数据的可用性，并且看起来很独特和引人注目。
一个基本柱形图的例子
对我来说，有“一刀切”的图表和“最适合”的图表。表格、线图和柱形图在适应多种类型的数据方面做得很好，但它们也是相当通用的（一刀切的）。作为一名专业的设计师，我希望我的作品的外观和感觉是独特的和与别不同的。
例如，《纽约时报》做了一项了不起的工作，用自定义的交互式可视化来完善他们的文章。你可以点击这里看到更多他们的作品。让我们来挖掘几个完美的自定义可视化例子：
这个例子通过在图表的数据底部增加“简要信息”来完善线形图。
http://www.nytimes.com/interactive/2013/03/29/sports/baseball/Strikeouts-Are-Still-Soaring.html?_r=0
在这个3D图中，视角的变化是非常有吸引力的，同时也帮助用户更好地了解数据的相关性。
http://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html?_r=0
这个例子来自 Selfiecity.net 用实际的内容来展示了一个可视化的好方案。
http://selfiecity.net/
最后，在我们给CNN做的一个项目中，我们使用颜色编码和3D方块来显示政党偏好，以同时可视化人口统计信息。
http://truthlabs.com/work/cnn
作为一种经验——当数据和技术能实现时，我们试着做出自定义的可视化方案，但是我们总是有一个后备方案，以防事情没有进展，或者客户更喜欢一个不那么与众不同的方案。
5. 那又怎样?
那么我们为什么要把这些数据放在页面上呢？回答：因为这可以让人们做一些事情——做决定，调查，预测未来，等等。重点是，你的用户并没有对你所选择的漂亮颜色感到惊喜，他们只关注他们正在做的事情。
所以这是我的建议——在你把你的页面布置好之后，所有的事情都恰到好处后，问问你自己：“那又怎样？”看看每一个图表、小部件、表格，并思考一个人会从它们上得到什么。通常你会得出这样的结论：“这无关紧要”，这是一种需要精简和反思的信号。
我遇到过几次这样的情况——我创建了一个非常复杂的仪表盘，它有一系列的趋势图、饼图和成千上万个数据点的地图。但客户却只是问：“我只是想知道产品是否在运行…我在哪里可以看到？” 或 “我只需要知道三件事…X、Y和Z。我在哪里可以找到这些？”
在这一刻，你意识到你迷失在了细节中，而忽略了整体。
我采用的一种方法是尝试使用文本来准确地表达某人想知道的内容。
对于高级信息，文本摘要可能比图表更有用。
上面的图片取自我们最近的两个项目。两者都简单地通过文本告诉用户他们需要了解什么，而不是依赖图表去解释。
我们与客户对于这种方案达产生了共鸣，特别是对于高级信息。但正如我前面提到的，总是有多个角色需要去考虑，所以请在适当的地方中使用。
就像所有形式的设计一样，这是一个平衡的行为。
努力以一种与众不同的方式呈现你的数据，但要避免过度设计和不必要的干扰。
为你的数据选择正确的图表，但不要忘记构建的页面结构需要带有层次。
英文原文：https://blog.truthlabs.com/designing-data-driven-interfaces-a75d62997631
get到新技能后，欢迎在下面【赞赏支持】。
打赏后，可以继续观看我简书中其他产品运营设计类文章。阅读更多>>
网友评论