9.3 数据可视化的样式调整
数据可视化可使用自定义样式和形状,这样能使数据更容易理解,从而更好地满足用户需求。图表可以从以下方面进行优化:图形元素、文字排版、图标、轴和标签、图例和注释。
可视化编码是将数据转换为可视形式的过程。独特的图形属性可应用于定量数据(如温度、价格、速度)和定性数据(如类别、风味、表达式)。图形属性包括:形状、颜色、大小、面积、体积、长度、角度、位置、方向、密度。
多个视觉处理方法可以综合应用于数据点的多个方面。例如,在条形图中,条形颜色可以表示类别,而条形长度可以表示值(如人口数量)。
形状可用于表示定性数据。形状表示类别的图形示例如图9-12所示,在图9-12中,每个类别用特定形状(圆形、正方形和三角形)表示,这样可以在一张图表中轻松实现特定范围的比较,同时也可以进行类别之间的比较。
图9-12 形状表示类别的图形示例
1.形状
图表可以运用形状,以多种方式展示数据。形状的选择多样,可以是矩阵,也可以是曲线,形状的样式设计应遵循精确、高保真的原则。
图表可以展示具有不同精度的数据。用于细致研究的数据应该用适合交互的形状(在触摸大小和功能可见性方面)展示。而旨在表达一般概念或趋势的数据可以使用细节较少的形状。图表形状示例如图9-13所示。
2.颜色
颜色可以用四种主要方式区分图表数据,具体如下。
(1)颜色区分类别
颜色区分类别图表示例如图9-14所示,在此圆环图中,颜色用于表示类别。
(2)颜色表示数量
颜色表示数量图表示例如图9-15所示,地图中的颜色用于表示数据值。
图9-13 图表形状示例
图9-14 颜色区分类别图表示例
图9-15 颜色表示数量图表示例
(3)颜色突出数据
颜色突出数据图表示例如图9-16所示,散点图中的颜色用于突出特定数据。
图9-16 颜色突出数据图表示例
在不乱用的情况下,颜色可以突出焦点区域。不建议大量使用高亮颜色,因为它们会分散用户注意力,影响用户的专注力。颜色突出数据的注意事项如图9-17所示。
图9-17 颜色突出数据的注意事项
(4)颜色表示含义
颜色表示含义图表示例如图9-18所示。
为了适应看不到颜色差异的用户,可以使用其他方法来强调数据,如选择高对比度着色、挑选不同图例形状、设置不同图例纹理等。
3.图表中的线
图表中的线可以表示数据的特性,如层次结构、突出和比较。线条可以有多种不同的样式,如点划线或不同的不透明度。
线可以应用于特定元素,包括注释、预测元素、比较工具、可靠区间、异常等。线表示图表的注意事项如图9-19所示。
图9-18 颜色表示含义图表示例
图9-19 线表示图表的注意事项
4.文字排版
文本可用于不同的图表元素,包括图表标题、数据标签、轴标签、图例。图表标题通常是具有最高层次结构的文本,轴标签和图例具有最低级别的层次结构。图表不同层次结构示例如图9-20所示。
标题和字重的变化可以表达内容在层次结构中的重要程度,但是要尽量使用有限的字体样式,图表中正确使用字重的示例如图9-21所示。
5.图标
图标可以表示图表中不同类型的数据,提高图表的整体可读性。图标可用于以下几个方面。
·分类数据:用于区分组或类别。
·UI控件和操作:如筛选、缩放、保存和下载。
·状态:如错误、空状态、完成状态和危险。
图9-20 图表不同层次结构示例
图9-21 图表中正确使用字重的示例
在图表中使用图标时,建议使用通用可识别符号,尤其在表示操作或状态时,如保存、下载、完成、错误和危险。图表中正确使用图标的示例如图9-22所示。
图9-22 图表中正确使用图标的示例
6.坐标轴
图中的一个或多个坐标轴显示数据的比例和范围。例如,折线图沿水平和垂直坐标轴显示一系列值。
(1)柱状图(条形图)基线
柱状图(条形图)应从值为0的基线(y轴上的起始值)开始,从值不为0的基线开始可能导致数据被错误地理解。柱状图(条形图)基线使用的注意事项如图9-23所示。
(2)坐标轴标签
坐标轴标签的设计应体现图表中最重要的数据。我们应根据需要决定是否使用坐标轴标签,并在UI设计时,与图表欲表达的信息保持一致。同时,坐标轴标签的出现不应该妨碍查看图表。坐标轴标签使用的注意事项如图9-24所示。
(3)文字方向
为便于阅读,文本标签应水平放置在图表上。
(4)文字标签
文字标签不应旋转或垂直堆叠,正确使用文字标签的图表示例如图9-25所示。
图9-23 柱状图(条形图)基线使用的注意事项
图9-24 坐标轴标签使用的注意事项
图9-25 正确使用文字标签的图表示例
7.图例和注释
图例和注释描述了图表的信息。注释应突出显示数据点、数据异常值和任何值得注意的内容。图例和注释图表示例如图9-26所示。
图9-26 图例和注释图表示例
在PC端,建议在图表下方放置图例。在移动端,建议将图例放在图表上方,以便在交互过程中保持可见。
在简单图表中可以直接使用标签;在密集的图表(或更大的图表组的一部分)中,可以使用图例。使用标签和图例的图表示例如图9-27所示,其中,左边为直接使用标签的折线图,右边为使用图例的折线图。
图9-27 使用标签和图例的图表示例
8.小显示屏
可穿戴设备(或其他小屏幕)上显示的图表应该是移动端或PC端图表的简化版本,小显示屏图表要点如图9-28所示。
图9-28 小显示屏图表要点