视觉设计 - 简道云

视觉设计

1. 概述

视觉设计是图表设计中非常重要的一环，它能够使图表更加直观、美观，并帮助用户更好地理解和解读数据信息。一个优秀的视觉设计能够提高图表的信噪比，即减少噪声的存在，使有价值的数据信息更加突出和易于理解。

坐标轴是图表中的重要元素，它能够辅助用户定位相关信息。主要包括轴线、轴刻度线、轴标题、轴标签和网格线。在设计坐标轴时，要考虑以下几点：

元素	设计点
轴线	当图表已经显示了网格线时，可以不显示轴线，因为网格线已经起到了辅助定位信息的作用。
网格线	网格线只是起到辅助作用，因此在设计网格线的时候不宜过深、过多、过粗。
X 轴标签	在轴标签很多的时候可以采用不同的显示策略：如果是时间轴或者连续轴：可以采用抽样显示的逻辑，即间隔显示。如果是分类轴：可以采用倾斜显示的规则，之所以不能使用间隔显示是因为分类轴本身数据没有连续性，用户不能“脑补”出没有显示的轴标签内容是什么，而时间轴却可以。
Y 轴标签	Y 轴标签不易过多，保证展示在 7±2 的范围内。所以需要设计好合适的标签间隔。如果使用柱形图、面积图等通过面积映射数据的图表类型，最好不要调整轴标签的起始值截取图形显示，应尽量显示全范围。
轴标题	轴标题的主要目的是定义分类名称和指标名称，但是一般图表本身就可以传达对应信息的，因此可以不显示轴标题。

图例是对图形的概括。在设计图例时，考虑以下两点：

图例应根据图表的阅读习惯进行放置，例如横向阅读的图表，图例可以优先放置在左上角，符合用户的阅读习惯。横向阅读的图表包括折线图、面积图、柱状图、多系列柱状图、多系列面积图、多系列条形图、雷达图、散点图和气泡图等。

数据标签用于标记图形中的数据信息。当图形和标签数量较多时，显示全部标签会使图表显得混乱，可以考虑自动隐藏重叠标签，当标签重叠时，只显示其中的几个。

柱形图主要用于分类对比的场景，在设计柱形图时主要考虑以下几点：

1）柱子个数不宜过多，最佳范围为5-9个，不宜超过9个。太多的柱子会降低图表的可读性。如果维度数据超过9个，可以考虑以下解决方案：

2）不宜调整值轴范围，保持其原始刻度。调整值轴范围可能会导致数据失真。

堆积柱形图是用于分类查看数据，并在分类的基础上展示局部和整体关系的图表类型。在设计堆积柱形图时应考虑以下几点：

1）纵向堆积的柱子不宜超过6个，过多的系列会使图表难以理解。

2）避免使用负数，堆积柱形图不适合展示负数的场景。

3）不宜调整值轴范围，保持其原始刻度。

折线图通过线的变化来体现时间范围内数据的波动。在设计折线图时要考虑以下几点：

1）当维度较多时，不宜展示标记点；而当维度较少时，可以通过显示标记点来突出数据节点。

2）多系列折线图的线条数不宜过多，最好不超过5条。过多的线条会使图表显得混乱。当需要展示的线条很多时，可以考虑以下解决方案：

3）要根据情景选择折线图或曲线图。折线图可以大致展示数据变化趋势，而曲线图在强调数据精确性时更为合适。曲线图由于算法的关系可能导致数据失真。

面积图通过面积来体现数据的差异。在设计面积图时要考虑以下几点：

1）面积图的类别数不宜超过5个，过多的面积图形会使图表难以理解。

2）不宜调整值轴范围，因为面积图是靠面积体现数据差异的，调整了值轴精度可能会让数据失真。

堆积面积图可用于展示多个系列在不同维度上的数据变化，并通过面积来体现各系列的差异。在设计堆积面积图时要考虑以下几点：

1）不宜调整值轴范围，保持其原始刻度。调整值轴精度可能会导致数据失真。

2）堆积面积图的系列数不宜超过5个。

3）应将变化较大的系列展示在最上方，变化较小的系列展示在最下方，以获得更好的展示效果。

饼图常用于展示占比关系。在设计饼图时要考虑以下几点：

1）避免过度分割饼图，扇区不宜超过9个，占比较小的数据可以放到"其他"中。如果需要展示多个维度且无法放入"其他"中，可以考虑使用矩形树图展示。

2）饼图的起始位置应从12点方向开始，因为人们的阅读习惯更多是顺时针阅读。饼图的扇区应按照占比高低顺时针显示，以符合用户的阅读习惯。