一看就懂的图表设计十大法则（附源文件）

前言

图表作为常用的数据展现形式，在工作汇报、数据大屏等地方都能看见它的身影。它将密密麻麻的数字信息以更简单明了的形式展现给我们，帮助我们理解数据。

那么如何做出一个优秀的图表，实现设计与功能之间的平衡呢？本文总结了最常用的十条法则:

1. 内容聚焦

图表作为和用户沟通的一种方式，我们不难发现，优秀的图表设计，应该聚焦在数据内容的传达上。其他辅助元素如网格、轴线、刻度，可以适当弱化，提高信息获取效率。

如网格线作为图表中最常见的辅助元素，可以方便我们观察数据值大小，比较数据间差异。在使用网格线时，应该避免颜色过重，或使用虚线样式，不干扰数据展示。

还可以更进一步：一般在有网格线的情况下，柱状图/折线图会隐藏 y 轴线，条形图则是隐藏 x 轴线，以达到信息降噪，突出视觉重点的目的。

2. 信息精简

在尽可能弱化辅助元素的前提下，如果数据量过大，依然会导致糟糕的信息呈现。为了让复杂抽象的数据更准确快速的传达，可以对轴刻度、数据值进行处理。

如下图 X 轴数据量过大，倒是数据识别困难，则可以对轴标签数量进行精简

还可以从数据角度进行处理，如下图比如将占比较小的 / 不重要的数据合并为“其他”。

3.对比清晰

对比类图表（例如柱状图、条形图、面积图）中，如果使用同类色、邻近色，会导致数据间差异难以辨别。

故数据对比的类别较少时，一般选取对比色区分不同类别；数据对比内容较多时，可在明度、饱和度大致相等前提下，调整色相（色环差大于 30°）来区分不同数据。但建议最多不超过 12 种色相，过多的颜色对传达数据是没有作用的，反而会让人产生迷惑。

4. 突出重点

有时我们需要在同一张图表中，重点关注某一类的数据。这种情况我们可以通过配色、修改样式等手法来突显关键信息。

颜色对比

运用高亮颜色和灰色的对比，达到强调重点数据的目的。不建议大量使用高亮颜色，因为它们会分散用户注意力，影响用户的专注力。

样式区分、关键节点重点标识

此方法在金融类产品中较为常见，如图中基金业绩走势。在视觉上，将当前基金的业绩展示增加了渐变底色加以凸显。还可以添加标识(买入、卖出)方便用户获取信息。

5. 内容为王

作为设计师，很多时候我们总是期望图表有更好的视觉效果，从而下意识增加一些样式（3D 效果、拟物质感、大圆角等），导致影响数据准确性、数据信息读取困难等问题。所以我们需要注意：当你需要传递信息，让用户读取，而不是只做视觉点缀时，不要增加过多视觉效果。因为这种效果很容易对数据进行遮挡和扭曲，不是非常适用于高效阅。

6.选择合适的图表

图表的分类各式各样，合理使用图表类型可以帮助我们更好的展示数据。

如何选取合适的图表呢？数据可视化专家阿贝拉按需要展示的数据关系，将图表分为 4 类：对比，构成，分布，关联。

所以选择什么图表，首先需要回答的问题是：你想用图表传达什么信息？

如：对比一个目标不同时间的值，还是其构成比例？

随后再确定每个变量要显示几个数据点？在一个图表中，要显示几个变量？等等。

由上图可知，比较类图表适合对单个或多个对象的数值大小进行比较，或者呈现变量增减的趋势等。常见的有柱状图、条形图、折线图、雷达图等。

构成类图表用来表示部分与整体的占比关系。常见的有饼图、环状图、堆积类图表等。

分布类图表用来展示连续的数据分布趋势。常见的有散点图、直方图、正态分布图等。

对于展示数据间关联关系的场景，往往使用散点图、气泡图等。

7. 准确传达信息

选择好图表后还要注意数据信息的准确传达。如折线图分为直线和曲线两类：

直线折线图一般适用于零散数据，用折线将一组有限的数据进行连接，方便查看大致趋势。

平滑折线图一般适用于连续数据，用作展示一组大量连续的数据，反映的是真实的趋势，曲线上任意一点都有真实数据与之对应。

如果没有测得足够数量的数据，为了美观使用平滑曲线，会导致数据失真。

8. 从“零”开始

一般来讲，我们应该把坐标轴起始值设置为 0。如果图表需要重点突出对比数据的话，线性图表的坐标下限可以不为 0。这样可以放大数据间的差异，是提案、汇报中较为常见的一种美化手段。

如下图是某公司最近 4 月的收入统计，单看图形走势而不注意 Y 轴刻度值的话，很容易得出以下结论：

• 左图表示公司最近四月收入稍有波动，但相对平缓；

• 右图表示公司最近四月收入波动巨大，且最近收入大幅下降。

图表虽然能帮我们更直观的了解事实，但许多报告和演讲就是有心利用数据的视觉误差，误导观众的判断。

9.合理使用文字

文字和数字作为图表展示的核心内容，良好的使用细节可以增加信息的可读性，更好的传达信息。

等宽字体

如果是包含大量数据的表格和图表，单独使用等宽字体（每个字宽度相同）。这样可以保持列对齐，易于比较阅读。

常用等宽字体有：Arial、Open sans、Saria、Robot、Mono

适当添加描边

当文字标签需要显示在图表上时，不同背景色的文字识别度可能会有较大差别

此时可以做反白+描边处理

10.极限值处理

在所需展示数据量较大时，需要处理各种极限问题，才能使数据清晰表达。

如下图，当水平排列数据时，图表空间不够，导致数据出现省略，不利于阅读，可以通过改变图表形式来解决问题。

建议不要使用非水平和竖直的文字标注，也不要使用换行。

引导语

无论在日常工作中的方案汇报还是作品集中，我们经常需要一些图表来更好的表达自己的设计思路。清晰美观的图表，会让人眼前一亮，更有利于我们提升影响力。

所以我们给大家整理了一些可视化案例网站及图表组件，对于图表设计有困惑的同学，这些学习资源应该能帮上不少忙！

扫描二维码加入到我们的设计交流群，入群就有「图表开源网站合集」「常用图表组件源文件」等大礼包相送，目前还能结识优质人脉资源哦~