适用于UX设计中的数据图表样式

作为交互设计师，我们经常需要使用数据可视化来处理许多统计信息，报告用户反馈数据。在本文中，小编整理了各种类别的图表样式，供大家参考。

在选择合适的数据图表之前，设计师首先需要对数据组的数量进行归类。在仅有一组数据的情况下，设计师可以选择以下的图表类型：

标签(Lable)

含有数据的标签

进度圈图(Progress Doughnut Chart)

折线/面积图(Line/Area Chart)

直方图/密度图(Histogram/Density Plot)

直方图与密度图非常相似，它们都显示相同类型的数据。直方图使用以等间隔分布的列，而密度图具有连续的曲线。

时间线(Timelines)

时间线用于说明按日期排列的一组事件。时间线可以是水平的也可以是垂直的，具体取决于可用空间和设计者的要求， 垂直时间轴便于移动/滚动。

2组数据类别

强调数据的团体关系

维恩图（Venn Diagram）

维恩图不是在用户界面中显示数据的一种非常流行的方法，但通常用于信息图表设计。它们最好用于显示重叠区域或突出显示两组数据内容的差异及重叠性。

直方图/密度图（Histogram/Density Plot）

如果要在一处显示多个直方图，则可以使用“密度图”。设计人员使用这种图表来显示两个变量如何相交。

强调数据之间的比较

条形图(Bar chart)

条形图是每种仪表板中最受欢迎的图表类型之一。使用这种类型的图表可以显示两个（或多个）变量之间的差异。

折线图(Line chart)

图表的另一种常用类型是折线图。折线图用于显示变化的X轴量上的定量值。它们用于比较随时间变化的两个值。

面积图(Area Chart)

该图用于比较两个或多个不同的数据集。

强调数据之间的比例大小

饼图/甜甜圈图(Pie/Doughnut Chart)

饼图是显示数据的最受欢迎方法之一。它是一个按与它们的价值成比例划分的圆圈。除此之外，“甜甜圈图”被视为一种特殊类型的“饼图”。

许多组数据类别

表格（table）

表格是显示任何数据的好方法，尤其是具有大量变量的数据集。

强调大量数据间的比较

标准条形图（standard bar chart）

标准条形图显示几种数据类别的数量并帮助评估这些值之间的相互关系。

多组条形图(multiset bar chart)

当两个或多个数据系列并排绘制并按类别分组在一起时，都使用条形图，并置于同一轴上。

线形图（line graph）

类似于两个变量的线性图，几个类别的线性图显示值的变化取决于x轴值（通常是时间）的变化。曲线和面积也可以应用于折线图。

强调多组数据间的相关性

此类别中的所有三个图表在通常的实践中很少用于UX 设计项目中作为显示图表。这是因为它们的易读性较弱，缩放后很难阅读。但是，它们经常用于分析文章中，所以我们将在下述内容中进行介绍。

散点图（scatterplot）

散点图显示大量元素，每个元素由2个变量定义。使用此图表，您可以轻松地将项目彼此比较，并找出与主要趋势不同的项目。

气泡图(bubble chart)

气泡图是散点图，但还有一个变量（大小）或两个变量（大小和阳性/阴性）。根据点的大小显示大小，并使用颜色显示正/负因子。

马赛克图（mosaic plot）

马赛克图是使用两个轴的图，这两个轴是具有百分比比例的变量。它看起来像一个矩形，分成许多五颜六色的碎片。

强调多组数据间的比例

饼图/甜甜圈图（pie/doughnut chart）

正如在两个类别示例中所讨论的那样，“饼图/甜甜圈图”是一个圆，每个圆都被大小与比例成比例的段分开。

堆积条形图(stacked bar graph)

条形图的另一种修改是堆积条形图。它们用于显示如何将较大的类别划分为较小的类别，以及各个部分与总量的关系。

地图(map)

如果需要显示一些与地理相关的数据，可以使用带有颜色的地图。

其他图表类型

以下这些图表属于特殊组，这些图形中的大多数无法根据移动设备的大小进行扩展，这使得它们不适用于现代应用程序。

树形图（tree chart）

树形图用于显示元素之间的层次结构和关系。在交互式系统中，您必须垂直和水平滚动，这很麻烦。第二个观察结果是，很难在这种类型的图中使用标题。

雷达图(radar chart)

雷达图的主要缺点是，由于名义上是独立的，所以轴表示的比例大不相同。

和弦图(chord diagram)

和弦图的缺点是存在多个交叉点，因此很难读取该图。另一个复杂之处在于，图形区域占用了大量空间，因为组签名排列成一个圆圈。这意味着很难将标签移动到图表之外，这与简单的饼图非常简单。

平行组（桑基图）-(parallel sets/Sankey chart)

Sankey图表还存在重叠区域的问题。由于用户被迫水平滚动，因此较长的宽度也会造成问题。

径向条形图(radial bar chart)

这里的主要问题是，由于不同的弧度，因此尽管它们代表相同的值，外侧的长条看起来比其他长。

森伯斯特图（Sunburst）

森伯斯特图具有许多按组划分的环，这些环构成扇区。此图表在显示小标题时存在问题。易读性较弱。

晶须图（whisker plots）

晶须图非常复杂，尽管有经验的用户可以轻松理解它们，但日常用户将难以理解其中的含义。

烛台图(candlestick chart)

该图表的外观与晶须图相似，但是它们的用法完全不同。烛台图用作交易工具来处理价格走势，衍生工具，货币，股票，债券，商品等，并且在非常特定的行业中使用。

矩阵热图(matrix heatmap)

通过表格查找方法分析矩阵热图中的数据通常是不可行的，因为不可能以足够的精度推断出与给定颜色相对应的数值。此外，数据不是以显示趋势的方式聚类的。

---

在本文中，小编没有罗列一些流行的图表，例如流程图，甘特图，网络图，时间表和词云，因为它们用于其他类型的数据（非数字），我们将在后续文章进行单独的介绍。

感谢您的阅读：）