B端体验设计之图表设计

概念

数据可视化是一种以直观图形描绘密集和复杂信息的表现形式，将不可见的数据转化为可见的图形符号，从中发现规律和特征，以获取更多的信息和价值，简单来说，就是帮助用户去更好地理解数据。

设计流程

如何设计一个合理的图表，可以分三步走：1、分析数据：分析数据特征以及想要表达的含义；2、选择图表：根据分析结果，选择合适的图表类型；3、设计图表：将以选择的图表根据需要，调整元素，达到最佳使用效果。

设计原则

图表设计时可以从图表的元素、比例、配色以及交互来达到图表易读性、易学性、易用性的目标。

目前市面上比较常用的图表大致可以分为几种类型：对比型、分布型、流程型、地图型、占比型、区间型、关联型、时间型以及趋势型。

对比型

显示值与值之间的不同和相似之处。使用图形的长度、宽度、位置、面积、角度和颜色来比较数值的大小，通常用于展示不同分类间的数值对比，不同时间点的数据对比。

分布型

显示频率，数据分散在一个区间或分组。使用图形的位置、大小、颜色的渐变程度来表现数据的分布，通常用于展示连续数据上数值的分布情况。

流程型

显示流程流转和流程流量。一般流程都会呈现出多个环节，每个环节之间会有相应的流量关系，这类图形可以很好的表示这些关系。

地图型

显示地理区域上的数据。使用地图作为背景，通过图形的位置来表现数据的地理位置，通常来展示数据在不同地理区域上的分布情况。

占比型

显示同一维度上占比关系。

区间型

显示同一维度上值的上限和下限之间的差异。 使用图形的大小和位置表示数值的上限和下限，通常用于表示数据在某一个分类（时间点）上的最大值和最小值。

关系型

显示数据之间相互关系。 使用图形的嵌套和位置表示数据之间的关系，通常用于表示数据之间的前后顺序、父子关系以及相关性。

时间型

显示以时间为特定维度的数据。使用图形的位置表现出数据在时间上的分布，通常用于表现数据在时间维度上的趋势和变化。

趋势型

分析数据的变化趋势。使用图形的位置表现出数据在连续区域上的分布，通常展示数据在连续区域上的大小变化的规律。

图表元素主要包含标题、图形、图例、坐标轴、数据标签、悬停标签、网格、参考线、参考区、背景等元素，当然每种图表多少有些差异。

标题

标题包含主标题和副标题，主标题主要用于命名该图表，副标题用于辅助说明。

图形

图形又叫做数据墨水，即整个图表的核心部分，通常以彩色点、线、面的形式表示数据情况。

图例

图表中分类较多时用于区分类别，一般由图形和文字组成。

坐标轴

对数据进行标记，通常横坐标用于展示类别或维度，纵坐标用于展示指标或度量，一般由轴标题、坐标线、刻度值等构成。

数据标签

直接展示图表中图形的数据值。

悬停标签

悬停图表时候展示该分类的详情或数据值。

网格

由横轴网格线纵轴网格线组成，用于分割背景作为参考，更直接地看出图形所处的值区间。

参考线

标记横轴或者纵轴的某个值，颜色一般比较醒目。

参考区

标记横轴或者纵轴的某个区间值。

背景

承载整个图表的底层颜色或图案。

配色规则

颜色是传达信息最快的元素，在设计的时候首先考虑使用的准确性，保证信息的传达、操作指引、交互反馈等必要条件，其次再考虑品牌特征。一般配色可以从四种方式去考虑：分类色板、连续色板、发散色板、强调色板。

视障人群设计

用户中难免存在视障人群，有部分人在颜色上可能只能识别黑白灰，因此设计的时候考虑配色间隔色之间应存在明度差异。

推荐配色方案

图表的设计看似复杂，其实通过元素的解剖，总结后无非几个点：选择正确的图表、解剖所有的相关元素并选择需要的元素、了解使用过程中常见的交互情况以及最终制定合适的风格。熟能生巧，只要你多看多用，多去扒拉别人的产品，慢慢你就会变成这方面专家。

AntV：https://antv.antgroup.com/
Echart: https://echarts.apache.org/zh/index.html
Highchart: https://www.hcharts.cn/
Chartjs: https://www.chartjs.org/
Plotly: https://plotly.com/graphing-libraries/
Anychart: https://www.anychart.com/

图之典：http://www.tuzhidian.com/
Flourish：https://flourish.studio/examples/