设计师都应知道的图表设计准则

Medium 上的好东西太多了，我会慢慢翻译搬运过来。这篇文章的作者是一个优秀的 UI 设计师。

Ryan Bales, UI/UX Designer, Founder/Creative Director Bync.com, where we design awesome SaaS apps.

让我们来探讨一下图表。任何一个做过需要数据可视化项目的设计师都知道图表设计是一个极其难的设计挑战。

在过去的 15 年里，我设计过复杂的、大数据量的网站和移动 Apps ，所以我对图表设计有良好的基础（可以从我的 Dribble 主页上了解到）。因此，我想分享一些设计原则，我就是用这些原则设计出了一些受众喜爱的既好看又能满足功用的图表。

选择熟悉的图表种类

对于设计师来讲，尝试新鲜、猎奇的图表形式（例如流线图）是一件非常有趣的事情。但是，这会增加用户者的学习负担。在很多情境下，你应该使用以下图表中的一种：面积图、柱形/条形图、折线图或者饼图、环形图。

不要给饼图加入 5 个以上的扇区

作为一个经验法则，如果你真的需要一个饼图，千万要将扇区的数量保持在 5 个及以下。扇区越多，越难展示出数据的含义。而且你还会费劲琢磨如何解决图例太多和交互工作的难题。说实话，使用一个不同的图表形式就能很轻松避免这两个问题。

整理数据列

除非你在处理日期类的数据，你应该尽量通过整理数据列（升序或降序）来提升图表内容的可读性。这一点主要适用于条形图/柱状图。

避免 3D 图表

3D 图表完全不是为了实用的目的设计出来的（除非你在 VR 行业）——它们看起来真的不好。

不要使用随机生成的颜色

一些图表工具会为数据系列随机生成颜色。这些颜色和整体的颜色极其不搭，也不会让数据系列之间有视觉区分。所以你最好设计自己的颜色搭配。而且要确保颜色要足够满足数据系列在图表中的展示。

趋势线通常会成为视觉干扰

趋势线通常会被视为图表绝佳的附属。但实际上，在展示受众看不到的信息时，它并不会提供任何有用的东西。如果你决定增加一条趋势线，一定要允许使用者取消它的展示。

不要依赖气泡提示

要把气泡提示视作提供额外、附加信息的工具。换句话说，一个气泡提示不能成为用户看到数据值的唯一方式。

非必要情况不要加哪怕一个图例

当你只有一个数据列时，只要简单的使用图表名来概括展示数据即可，无需增加一个图例去占地方。

仅在有帮助的时候使用网格线

网格线能够引导用户的视线从数据轴到数据点上。然而，网格线对简单的图表来讲没有任何必要性。当你使用网格线的时候，选择使用 X 轴还是 Y 轴的网格线是很重要的。很多时候你只需决定二者择其一。

在设计图表原型的时候要使用真实数据

设计者们在设计最漂亮的图表原型的时候，都倾向于不去考虑数据的真实性。

开发人员在实现这些原型的时候会非常头疼，而且重要的是，你没有去论证图表设计在现实中的实用性。

最好的解决方法是为你的设计提供两个版本。第一个版本展示数据完美状态的情形（例如，仅为纯粹的美学目的）。这个版本可以被用在你的作品简历和给客户展示的时候。第二个版本，使用产品真正使用时可能使用的数据。这个版本可以交给研发人员。

最后，总是有例外情况

作为一个设计者，设计数据相关的产品的时候，使用最好的判断力和创意是你的责任。然而，数据可能是极其复杂的，而且围绕数据设计出一个有意义的叙述并不总是必要的。

你可能发现，以上的一些原则并不会很有效——没关系，有时候需要打破规则。重要的事情是，把你的设计拿到实践中检验。