最全面附源文件的——B端图表设计（上 ）

不知道你发现了没，越来越多的驾驶舱、大数据管理等大数据管理平台相继出现，你在卖产品的时候不谈大数据，不谈数据分析，你都不好卖掉你的产品。可想而知，现在的市场，大数据有多么的重要。

但是人类分析数据的能力已经远远落后于获取数据的能力。

这个挑战不仅在于互联网高速发展，数据量越来越大、越多元化，更重要的是数据获取的动态性。

但是数据内容的噪声让人们在庞杂的数据世界中倍感枯燥繁琐，同时传统的数据分析报告对于非专业人员来讲有一定的门槛，其理解成本较高。这就让数据可视化的出现赋予其特有的意义。（ps：作为可视化设计师，立马昂起头迎接使命）

之前聊B端设计规范的时候聊到后台设计，B端后台管理产品恰恰是数据图表可视化需求最多的地方，所以我就开始研究图表设计。

希望能通过这篇文章和大家一起交流学习，解决一些属于我们共同的问题。

文章末尾会附上一些常用的具有针对性的图表组件源文件可下载，方便大家设计的时候图表复用～

数据可视化是一种以“图形语言”为主要表现形式，将复杂的、抽象的、枯燥的、专业的、不直观的数据内容，以简单、快捷的方式传递给用户。

用户可以通过如对选定范围内的数据进行分析，发现数据的周期与规律、迅速找到自己目标节点中的关键数值、对比几组数据以了解当下想要的研究对象的情况，完成自己的目标，这也是数据可视化最为明显的价值。

数据可视化最基本的设计目标就是要清楚准确的展示和传达信息，能够更高效、清晰、简洁地完成数据的对比、关键节点的查询、每组数据之间的分析等一系列交互，目的是提升工作效率，降低学习和使用成本。

在这样的前提下，针对特定的用户对象，用户场景，我们设计师可以根据用户的预期和需求，提供有效辅助手段以方便用户理解数据，从而完成有效的可视化。

具体包括：数据到可视化的直观视图，合适的视图选择与交互、展示合理的信息密度、美学聚焦与平衡、可视化隐喻等。

需要注意的是，作为设计师我们不能为了数据可视化而可视化采用复杂的图形，如果把可视化作为设计艺术创作的简单过程那就本末倒置了。

数据可视化应该是实用性与可用性的结合体，在这两者之间找到平衡点，达到有效挖掘，实现设计与功能之间的平衡。

所以追求功能的实用性和视觉交互的可用性平衡很重要。

在大数据时代背景下，数据可视化的应用领域更为广泛，比如：医疗、统计、管理、金融、娱乐、人工智能等一系列领域。

相信很多设计师在平时的UI 的设计工作中最常接触到的包括：PC 后台的数据总览、数据可视化大屏、游戏 UI、后台实时监控等。

数据可视化整体流程是包含从原始数据到用户操作的整体闭环。

从原始数据到可视空间的展示，中间包括数据处理的各阶段和可视化处理中从布局到样式的选择，最终展现出可交互式数据图表。

需要注意数据可视化的时候并不是对原始数据的无意义展示，而是要基于用户的目标经过层层的处理和优化后才能进行呈现。

可视化图表的选择

作为界面设计的设计师，设计做得好的标准是什么，那就是“让图说话！”

做可视化的图表设计同样的，也是让图说话，图表选择就成为了比较重要的环节，选对了图表就能更加快速、直观的传达数据信息。

那如何才能挑选合适的图表呢？

1、确定需要表达的核心目的是什么，需要表达的核心信息是什么；

2、判断数据之间的比较关系，包含：比较、分布、构成、联系等等；

3、选择对应能表达的图表类型，包含：柱状图、折线图、饼图、雷达图等等；

这里需要注意，最重要的是确定需要传达的信息是什么，这就是我们通常说的真实需求是什么。因为同一组数据，分析的角度不一样，得到的主题就是不一样的。

那么，如何选择图表的类型：

国外专家Andrew Abela曾整理了一份图表类型选择指南图示。

以下是总结了更加适合日常应用，使用频次更高的版本：

1、比较类

基础柱形图、多列柱形图、堆积柱形图、基础条形图、多系列条形图、堆积条形图、自定义条形图、词云图、基础雷达图、多系列雷达图、堆积柱形雷达图、柱形雷达图

2、分布类

组成瀑布图、基础箱型图、横向箱型图、分组箱型图、基础散点图、 趋势散点图、线性回归散点图

3、流程类

漏斗图

4、占比类

饼图、百分比堆积柱形图、南丁格尔玫瑰图、占比柱形图、环形饼图、百分比堆积条形图、占比条形图、多层饼图

5、区间类

范围面积图、百分比刻度槽型仪表盘

6、趋势类

变化瀑布图、动态轮播条形图、基础折线图、阶梯折线图、曲线折线图、堆积折线图、颜色分段折线图、数据轮播折线图、双轴折线图、基础面积图、阶梯面积图、曲线面积图、堆积面积图、百分比堆积面积图、基础甘特图

7、层级类

纵向框架图、发散框架图、矩形树图

图表一般是由：标题、图例、刻度轴、数据展示、网格线、提示信息、水位线、时间轴、Hover Tooltip等构件元素组成。

但是，在实际应用中不一定要将全部元素展现出来，会根据场景去修饰删减一些构件元素，以此来减少冗余信息，用最适量的数据墨水比，帮助用户快速达成目标，在最少的时间内获取更多的信息。

下面来对这些元素分别进行说明：

1、标题 

描述图表的主题（包含主标题和副标题），一个明确、相符的标题可以迅速让读者理解图表要表达的内容。

2、标签 

对当前这一组数据进行的内容标注，包括数据点、拉线、文本数值等元素，根据不同的图表类型选择使用。

3、轴 

用来定义坐标系中数据在方向和值的映射关系，轴的功能像是把可视化对象置于共同的基准上，再以标尺进行数值量测。

在数据可视化中，一般存在于笛卡尔坐标系（直角坐标系）和极坐标系中。

如果对轴进行要素的拆分，可以得到以下几种元素，分别为：轴线、轴刻度线、轴标签、轴标题（单位）以及网格线。

轴线

需注意，轴线一般可考虑是否显示，比如，柱状图/折线图会隐藏 y 轴线，条形图则是隐藏 x 轴线，以达到信息降噪，突出视觉重点的目的。

根据对应变量是连续数据还是离散数据，轴可以分为：分类轴，时间轴，连续轴。

轴刻度线

轴刻度线是轴线上的小线段， 可以提供数值标签在坐标轴上的明确位置。轴刻度线有3种类型，分别为：置内、置中（即交叉方式）、置外。但刻度应置于数值坐标轴外侧， 不建议刻度采用置中或置内方式显示。

网格线

网格线是用来辅助图表优化映射关系的。使用网格线可以增加数据的可阅读性，网格线提供了两种功能：一是延伸数值刻度至可视化对象中，以便观察数据值之大小；二是增加可视化对象之间的比较基础 ，利于比较。

网格线一般跟随值域轴的位置单向显示，柱状图采用水平网格，条形图采用垂直网格。

在使用网格线时，应该注意遵从主次原则，以轴线为主，网格线为辅，样式上可采用实线或者虚线。避免颜色过重，不要使用纯黑或者纯白，在视觉层级上不能抢了图表中的信息。

轴标题

轴标题又可称为单位，主要用于说明定义域轴、值域轴的数据含义。

当可视化图表的其他部分内容（标题、图例、轴标签等）能充分表达数据含义，根据奥卡姆剃刀定律，可以略去轴标题，近一步精简画面元素。

轴标签 

较为复杂，主要来说说常用直角坐标系的X轴和Y轴。

x 轴标签的设计重点在显示规则上，平时工作中常常会碰到轴标签内容过长的情况，当空间有限时，轴标签会重叠在一起。

需注意

1、在连续轴和时间轴中，我们可以利用抽样显示的手段来优化轴标签重叠的问题。

不推荐使用旋转来缩减宽度，目前我也看到很多数据还在使用这种方式。

一方面从美观度上，旋转可能会破坏界面整体协调。

另一方面，连续/时间轴并不需要显示所有的轴标签，尽管轴标签未能完全展示，但用户会在脑海中把缺失的部分补齐，轴标签仍然会像连续着的一样。

2、分类轴标签，由于标签与标签之间并没有紧密的逻辑关联关系。若采用抽样规则，隐藏了一些标签，则加大了用户对图表信息的提取难度，所以，对于分类轴，建议通过标签旋转或转换成其他图表（条形图）来缩减宽度。

Y轴标签

y 轴标签的设计重点在标签数量、取值范围和数据格式上。标签显示区域一般根据最长标签宽度自适应缩放。如果数组是固定的，就写成固定宽度，节省图表计算量，提高渲染速度。

需注意：

1、轴标签的数量不建议过多，太多的标签必定导致横向网格线变多，造成元素冗余，干扰图形信息表达。根据 7±2 法则，Y轴标签数量应尽量控制在这个范围内。

2 、一般来说，y 轴标签的取值应从 0 基线开始，以恰当反映数值。展示被截断的数据可能会误导用户做出错误的判断。

3、对于Y轴的上限即最大值根据实际数据进行动态计算。比如一排数字中最大的为98，那么轴标签最高位为100；

4 、Y轴标签的数据格式保留的小数位数保持统一。

4、图例 

对图形本身的概括，在图表元素中属于辅助内容。

1、图例的组成：图形、名称、数值、单位。

2、图例分为连续型图例和分类型图例，从位置来分又称为水平图例和垂直图例。

不同类型的图表建议选用各自的图例形态，目的是在复合型图表中可通过图例来判断图表中包含几种图表类型以作区分。

3、共用图例：多个图表的图例相同，可共用一个图例，减少冗余信息。

4、图例名称限制：有时候，图例名称可能会很长，为了达到更好的展示效果，图例名称可设定最大值同时做省略处理。

5、多折线图一般采用跟随图例。

5、提示信息 

当hover的时候，以交互提示信息的形式展示该点的数据详情，按不同的图表类型，分为悬浮、固定位置、固定在轴上、固定在图形上。

7、图形 

统计图表的视觉上映射的视觉展现，是图表的必备元素，承载着数据背后蕴含的信息。

大致可以分为六种基础样式：折线，面积，散点，气泡，饼/环，柱形，条形。

下一期我们会详细分析常见的图表类型会对不同的基础样式进行分解，期待一下吧。

最后

本次的分享到这里就结束了，希望可以对大家有帮助。

彩蛋福利：赠送大家“可视化图表组件库源文件”感兴趣的小伙伴可以都拿去！

领取方式如下：1.关注“789研习社”。2、在后台回复 “ 图表” 就可以领取了！

在这快节奏的浮躁的时代中，我们需要保持设计的初心，做有灵魂的设计，我们下篇再见~

参考文献：《数据可视化》-陈为、沈则潜、陶煜波等编著 电子工业出版社 ；《大数据时代》维克托·迈尔·舍恩伯格，图片部分来源于网络，侵权即删。

 关注我们 &点个在看 你最好看