设计杂谈想法产品经理

Material Design设计语言-数据可视化(三)样式

2019-08-10  本文已影响28人  宛苏

样式

数据可视化可以自定义样式和形状等属性,使数据更容易理解,以适合用户需求和上下文表现的方式。

不同的视觉处理可以分别代表不同的数据。例如:条形的颜色可以表示类别,而长度可以表示值(如种群大小)。

形状可用于表示定性的数据。在上图中,每个类别由特定的形状(圆形、正方形和三角形)表示,这样可以轻松比较特定范围内的数据或其他类别的数据。

1、形状

图表可以使用形状以多种方式显示数据。一个形状可以被设计成有趣的曲线形状、或者精确和逼真的形状。

形状细节水平

图表可以以不同的精度表示数据。用于近距离观看的数据应该以适合交互的形状表示(根据触摸目标大小和可用性方面)。而用来表达一般想法或趋势的数据可以使用细节较少的简单形状。

2、颜色

颜色可用于区分以下四种形式的图表数据:

· 区分彼此的类别

· 代表数量

· 突出显示特定数据

· 表达意义

颜色区分类别

颜色区分数量

颜色突出显示数据

颜色还可以突出显示焦点区域。不建议使用大量的高亮色,因为它们会分散注意力并妨碍用户聚焦。

颜色表示含义

特别注意

无障碍设计- 考虑红绿色盲等存在视觉障碍的用户,用适合的方式来强调数据,例如高对比度着色、形状或纹理。还可将文本标签注释数据以阐明其含义,从而不用完全依赖于图形。

3、线

图表线可以表示有关数据的质量,例如层次结构、突出显示和比较。线条样式可以采用不同的方式,例如使用破折号或各种不透明度。

线可以应用于特定场景,包括:

· 注释

· 预测要素

· 比较工具

· 置信区间

· 异常

4、文本

文本可用于标记不同的图表元素,包括:

· 图表标题

· 数据标签

· 坐标轴标签

· 图例标签

具有最高优先级的文本通常是图表标题,其中坐标轴标签和图例属于最低级别的层次结构。

标题和不同的字体权重可以传达哪些内容的层级比其他内容更重要(或更不重要)。然而,这种样式处理方法应谨慎使用,因为字体样式的数量是有限的。

5、图标

图标可以表示图表中不同类型的数据,并提高图表的整体可用性。

图标可用于:

· 区分组或类别的分类数据

· UI控件和操作,例如筛选、缩放、保存和下载

· 区分状态,例如错误、没有数据、完成状态和危险

在图表中放置图标时,建议使用通用且可识别符号,尤其是在表示操作或状态时,例如:保存、下载、完成、错误和危险。

6、坐标轴

坐标轴标签或多个轴表示所显示数据的比例和范围。例如,折线图X轴和Y轴的文本标签显示一系列值。

条形图基线

条形图应从基线(y轴上的起始值)的零开始。从非零的基线开始可能会给用户对数据的理解造成混淆。

坐标轴标签

坐标轴标签的使用是反映图表中重要的数据最直接的。应根据实际需要使用坐标轴标签,并在UI中以一致的方式使用。       

文字方向

文本标签应水平放置在图表上,以便于阅读。

文字标签不应该:

· 旋转

· 垂直堆叠

7、图例和注释

图例和注释描述了图表的信息。注释应突出显示数据点、数据异常值和任何值得注意的内容。

在桌面端,建议把图例放置在图表下方。在移动设备上,则将图例放在图表上方,以便于在交互期间保持可见状态。

在简单图表中图表元素可以直接用文本进行标记。但是,在密集的图表则需要使用图例说明会更清晰。

8、迷你屏幕

可穿戴设备(或其他小屏幕)上显示的图表应该是手机端或桌面端图表的简化版本。

上一篇下一篇

猜你喜欢

热点阅读