设计了100张图表后，我学到了哪些经验？【百科全说】

本篇译文作者简介：luserry，中文名称小短毛，简称短毛。正在上下求索的过程中，主要产品和交互设计，目标是世界更美好，你我更自在。以上！(文章由luserry翻译，彩云协助优化调整及版式编辑)

以下是译文部分

我是一名图表设计狂热分子，在写本科毕业论文的时候，由于执着于画出完美图表，导致花在做图表的时间比写文字内容还要多。当时的想法是，期望用图表来展示收集到的大量数据，为我的论文课题做定量研究分析。在我看来，图表中的组成元素能够完美的平衡数据与视觉效果，比如曲线，折线，点阵等等形式。

上个月，团队开展了新项目，打算做一款高级数据分析工具，由我负责设计其中的图表。我首先想到的是，从旧论文图表中获取灵感，然而等看到曾经设计的图表时，我就坚决地放弃了这个想法。

7年前设计的图表，如今看起来惨不忍睹。图表有限的空间内堆积了大量的信息，让人短时间内无法从图表中获取有效的信息。下图是我花了几分钟，设计了一张同样糟糕的图表来做证明。

糟糕的图表设计

自从看了自己设计的旧图表，我自信心受挫。不过最后决心借着这次的工作机会，在图表设计上大干一场。

我在几周时间内设计了上百张图表。期间根据用户的反馈，不断地迭代和更新。在这个过程中，我逐渐掌握了设计一张合格图表的方法和技巧。在下面的6个部分中，将会逐步的分析我的设计过程：如何设计图表，如何迭代以及为什么选用这种形式的图表？

第一张草图复用了工作中设计的旧图表，做了简单的迭代

优点

图表参数不多，没有设计X轴和Y轴的说明文字，非常简洁清晰

缺点

基于高级数据分析工具的产品特性，我们来分析其缺点。

首先，图表内的数据量少，很难看出潜在的设计缺陷；其次，控件太少，能操作的功能不多，无法达到高级分析工具该有的多功能属性；最后，面对实际情况中的大量潜在数据，需要多种数据处理的方式，而图表中暂未出现，因此可扩展性不高。

学习点

优化了第一部分的草图，能展示更多的基础数据和高级数据，此外还增加了过滤数据的功能

优化点

优点

图表更加清晰，展现了更详细的日活数据，可以让用户了解自己APP的运营情况。折线变得不再圆润，锐角可以更加准确地指示数据点，这样鼠标悬停时可以轻松查看数据点的详细数据。同时X轴的日期在图表的最下方单独成列显示，易读性很强。

缺点

由于时间过滤器和Y轴的数字全部挤在了折线图的右上角，界面布局略显杂乱；图表中500点以下几乎没有数据，因此Y轴的数字划分并不合理，需要做调整；折线采用了红色，让开发同事误以为是错误状态（产品设计中红色一般代表着错误）。

学习点

每个组件的样式都尝试做下优化，比如突出折线的颜色或增加X轴的一些细节，这样会使图表看起来更清晰。在图表的设计迭代过程中，不需要像我现在这样，又从头开始设计图表。可以针对有问题的组件，比如坐标轴，一个一个去进行优化。所有组件优化好，图表自然而然也就相对完美了。

Graph: Part III

优化点

优点

前面总结的优点这里同样适用。由于折叠过滤器和改变了Y轴数字的位置，折线图的右上角空间布局变得平衡合理。虽然未折叠的过滤器可以直观地提供多种过滤选项，但是看起来会很杂乱。图表增加了水平的辅助线，但是仍然保持简洁性和易读性。

缺点

其实折叠过滤器并不是提供给高级用户的最佳设计方案，但是用户只要操作过过滤器，就会形成路径记忆，在产品的其他功能再次使用。

学习点

目前设计的折线图，两个相邻端点之间的差值有统计意义，但是折线的斜率是没有统计意义的。我们需要考虑图表的适用数据类型和场景，必要情况下可能要重新设计其他类型的图表。

左侧的图表，以消费金额为例，统计个人信用卡的每日消费情况。使用折线图可以统计a点和b点间具体的金额差值，即15号和16号个人消费的日差额。
右侧的图表，以参会人数为例，统计每日参会人数。在a点和b点间，即15号和16号之间，我们可以知道这两天参会人数的差值，但无法统计某个具体时间点的参会人数，因为没有记录每秒的减少人数。我们只能判断从15号到16号的参会人数在减少，从a点到b点的连线其实只是表示一个下降趋势。

Graphs: Part IV