Material Design Data Visualization 数据可视化

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

数据可视化是以图形的形式描述信息。

目录

原则

类型

选择图表

风格

行为

仪表盘

原则

数据可视化是一种用图形形式来描述密集和复杂信息的通讯方式。由此产生的视觉视觉效果使得数据比较和用数据讲来故事都变得更加容易——这两种方法都有助于用户做出决策。

数据可视化可以表示不同类型和大小的数据:从少量数据点到大型多元数据集都可以表示。

2vnlylyuavb.png插图

类型

数据可视化可以用不同的形式来传达。图表是一种常用的数据传达方法,因为它们不仅描述了不同的数据类型,还能进行数据比较。

图表类型的使用主要取决于两个方面:想要传达的数据,以及想要传达的数据有关的内容。以下指南提供并描述了各种不同类型的图表及其用例。

图表类型

随时间变化

随时间变化的图表显示一段时间内的数据,如多个类别的变化趋势及其对比。

使用情况包括:

股票价格表现健康统计年度报表

4zcc0pptvxq.png插图(1)

随时间变化的图表包括

折线图柱状图堆积柱状图烛台图面积图时间轴地平线图瀑布流图

类别比较

类别比较图比较多个不同类别之间的数据。

使用情况包括:

不同国家间的收入对比热门场次对比团队分配

ssh1ckvmxml.png插图(2)

类别比较图包括:

柱状图分组柱状图气泡图平行线图多条折线图子弹图

排序

排序图表示一个项目在有序列表中的位置。

使用情况包括:

选举结果表现统计

nwbpczt5r1g.png插图(3)

排序图包括:

排序条形图排序柱状图平行线图

部分-整体

部分-整体图表示部分元素是如何加总为整体的。

使用情况包括:

产品类别综合收益预算

z0pjh2jlm23.png插图(4)

部分-整体图包括:

堆积柱状图饼状图堆积面积图矩阵树图太阳辐射图

相关

相关图展示两个或多个变量之间的相关性。

使用情况包括:

收入和预期寿命

ree2rn0x4kw.png插图(5)

相关图包括:

散点图气泡图柱状和折线图热力图

分布

分布图展示每个值在数据集中出现的频率。

使用情况有:

人口分布收入分布

nhzbrwkx3ay.png插图(6)

分布图包括:

直方图线箱图小提琴图密度图

流图显示数据在多种状态之间的流动。

使用情况包括:

资金转移投票统计和选举结果

pbj53g2herq.png插图(7)

流图包括:

桑基图甘特图和弦图网状图

关系

关系图显示多个项目之间是如何彼此关联的。

使用情况有:

社交网络文字图

dh5c0p4kbea.png插图(8)

关系图包括:

网状图维恩图(或译Venn图、文氏图、韦恩图、范氏图)和弦图太阳辐射图

选择图表

许多类型的图表都可以用于描述数据。下面的指导方针提供了如何选择图表的见解。

显示随时间产生的变化

随时间产生的变化可以用时间序列图来表示,这是一种按照时间顺序来表示数据点的图表。

可以表示随时间变化的图表包括:折线图、条形图和面积图。

图表类型用法基线值时间系列的数量数据类型线性图传达数据中的细微变化任何值任何时间序列(适用于8个及以上的时间列)连续型条形图传达数据中较大的差异,单个数据点如何与整体数据关联、比较和排序04个或以下离散型或类别数据面积图总结数据集之间的关系,单个数据点是如何与整体数据关联的0(当有多个时间列时)8个或更少连续型

*基线值是指y轴上的起始值。

条形图和饼状图

条形图和饼状图都可以用于显示比例,表示部分值与整体值之间的比较。

条形图使用一条共同的基线,通过条柱的长度表达数量饼状图使用圆内的圆弧或圆角表示整体的一部分

条形图、折线图和堆积面积图比饼状图更能够表达随时间产生的变化。因为这三种类型的图表中,可能的值共享同一条基线,所以比基于条柱长度的条形图更容易比较值之间的差异。

i5urfqtoywk.png插图(9)

面积图

面积图有多种类型,包括堆积面积图和重叠面积图:

堆积面积图表示(在同一时间段内)多个时间序列堆积在一起重叠面积图表示(在同一时间段内)多个时间序列重叠在一起

重叠面积图中不建议包含两个以上的时间序列,以免模糊数据。相反,可以使用堆积面积图在一个时间间隔内比较多个值(横轴表示时间)。

a2zsmnmgbfj.png插图(10)

样式

数据可视化使用自定义的样式和形状,以适应用户需求和上下文的方式使得数据一目了然。

下列有益于图表自定义:

图形元素排版图标轴和标签说明和注释

设置不同类型数据的样式

视觉编码是将数据转换成视觉形式的过程。独特的图形属性可以应用于定量数据(如温度,价格或速度)和定性数据(如类别,风味和表达式)。

这些图形属性包括:

形状颜色尺寸面积体积(容积/量)长度角度位置方向密度

表达不同属性

多种视觉处理方式可以应用于数据点的多个方面。例如,条柱的色彩可以表示一个类别,与此同时条柱的长度可以表示一个值(如人口大小)。

czwukeq5pgt.png插图(11)

形状可以用来表示定性数据。在该图表中,每个类别由一种特定形状代替(圆形,方形和三角形),这使得比较特定范围内的数据或与其他类别数据进行比较都很容易。

形状

图表可以通过形状来以多种不同的方式表达数据。形状可以被设计为一条有趣的曲线,或一个精确的高保真图形,以及介于二者之间的其他方式。

形状的精确程度

图表可以以不同的精度来表示数据。用于深入研究的数据应该(根据触摸目标的尺寸和相关可视化要求)使用适合交互的形状来表示。而用于表达大致想法或趋势的数据可以使用细节较少的形状。

rae1wyksmng.png插图(12)

颜色

颜色有四种主要的区分数据的方式:

区分不同的类别表示数量突出特定数据表达意义

颜色区分类别

v1fgcr1igla.png插图(13)

在环形图中颜色被用于定义类别。

颜色表示数量

laiz3guar0z.png插图(14)

在地图中颜色被用于表示数据值。

颜色突出数据

ugljygnbbup.png插图(15)

在散点图中颜色被用于突出特殊数据。

焦点区域

当颜色被少量使用时,它可以突出焦点区域。不建议使用大量的高光颜色,因为它们会分散用户的注意力。

xn0rm4asz0k.png插图(16)

颜色表示意义

qnnd45djklk.png插图(17)

无障碍

为了适应无法区别色彩差异的用户,可以使用其他的方法来强调数据,例如高对比度着色、形状或纹理。

将文本标签应用于数据也有助于澄清其含义,同时消除了对说明的需要。

线条

图表中的线条可以传达数据的质量,例如层次结构、突出强调和对比。线条的样式可以采用不同方式,如使用虚线或不同的不透明度。

线条可以应用于特定的元素中,包括:

注释预测元素比较工具置信区间异常

du0vs11uchk.png插图(18)

排版

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

图表标题数据标签轴标签说明

层次结构中级别最高的文本通常是图表标题,最低的是轴标签和说明。

bpifvaoo2az.png插图(19)

范围类型字体字型大小1.图表标题Roboto常规18pt图表副标题Roboto常规14pt2.数据标签Roboto常规22pt子标签Roboto常规14pt3.轴标签Roboto常规12pt4.说明标签Roboto常规12pt

文本粗细

标题和不同的字体粗细在层次结构中可以传达哪些内容比另一些更重要(或更不重要)。然而这种处理方式应该有节制地使用,即采用数量有限的字体样式。

f4cycn52ock.png插图(20)

图标

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

图标可以被用于:

分类数据,以区分组或类别UI控件及操作,如筛选,缩放,保存和下载状态,例如错误状态,无数据状态,完成状态和危险状态

当在图表中使用图标时,建议使用普遍可识别的图标,尤其是在表示操作或状态时,例如:保存,下载,完成,错误和危险。

h52qmrud5z3.png插图(21)

u4awvwzyrac.png插图(22)

在传达意义时图标补充了颜色的意义。

有标记的轴

有标记的轴或多个轴能够指示数据所展示的规模或范围。例如,折线图展示的是沿水平和竖直方向标记的轴的范围内的值。

50b25ypinzo.png插图(23)

条形图基线

条形图应该从基线(y轴上的起始值)上的0开始。从不为0的基线开始可能会导致数据被错误地感知。

mko3cerd5rc.png插图(24)

轴标签

标签的使用应该反映图表中最重要的数据细节。轴的标签应该根据需要,并在用户界面中以一致的方式使用。它们的存在不应该妨碍图表的阅读。

yut2yrrlyke.png插图(25)

文本方向

在图表中文本标签应该按水平方向放置,以保证其易于阅读。

文本标签不应该:

被旋转垂直堆叠

cr3be0bvbk3.png插图(26)

说明和注释

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

bzhxmzt5knc.png插图(27)

注释说明

在桌面设备上,建议在图表下方放置说明。而在移动设备中,建议将说明放置在图表上方,以便在交互过程中保持说明可见。

标签和说明

在简单的图表中,图表元素可以被直接标记。但是,密集的图表(或较大图表组中的部分)可以在说明中显示标签。

rg5pyjfwgs3.png插图(28)

小型显示器

在可穿戴设备(或其他小型显示屏)上显示的图表应该是桌面端或移动端图表的简化版。

lcgbyhz3aqb.png插图(29)

行为

图表为用户提供了可以控制所展示数据的交互模式。这些模式让用户关注图表中的特定值或特定范围。

以下推荐的交互模式、样式和效果(如触觉反馈)可以提高用户对图表数据的理解:

逐级展开提供了一种清晰的途径来揭示细节,可按需展示。直接操作允许用户直接对UI元素进行操作,以减少屏幕上所需的操作步数,直接操作包括:缩放和平移,分页,数据控件。改变透视图可以使一项设计服务于不同的用户和数据类型,例如数据控件和移动。

逐级展开

使用逐级展开的方式显示图表细节,能够允许用户根据需要查看特定的数据点。

2krqq1dmzpm.png插图(30)

缩放和平移

缩放和平移是图表中流行的交互方式,它们影响用户研究数据和探索图表UI的密切程度。

缩放

缩放改变了UI显示的距离。而设备类型则决定缩放的执行方式。

在桌面端,通过点击并拖动或滚动的方式实现缩放在移动端,使用双指捏放的手势来实现缩放

当缩放不是主要操作时,(在桌面端)可以通过单击并拖动或(在移动端)通过双击来实现相同效果。

平移

平移能够让用户探索超出屏幕之外的UI。应该以对显示数据有意义的方式对其进行约束。例如,如果一张图表的一个维度比另一个维度更重要,那么平移的方向可以仅限于更重要的维度方向上。

平移操作通常与缩放配合使用。

在移动端,通常通过手势进行平移,例如单指滑动。

suypx1qjs0a.png插图(31)

分页

在移动端上,分页是一种常见的模式,允许用户通过左右滑动查看上一张或下一张图表。

在移动端,用户可以向右滑动查看前一天的内容。

数据控件

可以使用切换控件、选项卡和下拉列表筛选或更改数据。

当用户调整控件时,这些控件也可以显示度量。

切换控件、选项卡和下拉列表意味着可以筛选或更改数据。

动效

动效可以加强并巩固数据间的关系以及用户和数据的交互方式。动效应该有目的地(而不是装饰性地)被使用,以表达不同状态和空间之间的关系。

动效应该合乎逻辑,平稳且能够快速响应,不妨碍用户的体验旅程。

在这一案例中,数据的动效设置在切换按天显示和按周显示的时候。在切换的过程中不显示所选日期范围之外的数据,从而降低了图表复杂性。

此处的动效显示了两张不同图表之间的联系。

空状态

空白的图片和表格可以显示一些表明在数据可用时期望发生的内容。

在适用的情况下,角色动画能够带来愉悦感和激励。

角色动画丰富了空白图片。

仪表盘

数据可视化可以在一系列的多个图表中展现,这在UI中被称为仪表盘。多个单独的图表有时比一个复杂的图表能够更好地传达一个故事。

仪表盘设计

仪表盘的目的应反映在其布局、样式和交互模式中。仪表盘的设计应该适应它的使用方式,无论它是一个演示工具还是一个深入研究数据的工具。

一个仪表盘应该:

(通过布局)优先考虑最重要的信息显示根据层次结构(使用颜色、位置、大小和视觉权重)排序的信息焦点

pjoq0kbbfqa.png插图(32)

应该根据数据提出的问题对信息进行优先级排序。在本案例所示的操作仪表盘中,考虑了以下的用户问题:

需要被注意的问题问题发生的时间问题发生的位置受问题影响的其他变量

分析型仪表盘

分析型仪表盘能够让用户探索多个数据集并发现趋势。通常这些仪表盘包括复杂的图表,这些图表能够发现数据细节。

使用情况包括:

强调随时间变化的趋势回答“为什么”和“如果……怎样”的问题预测创建深入的报告

分析型仪表盘的案例有:

跟踪随时间变化的广告活动表现跟踪产品在整个生命周期中的销售和收益显示城市人口随时间改变的趋势跟踪随时间变化的气候数据

5rloaxmsnvu.png插图(33)

操作型仪表盘

操作型仪表板旨在回答一组预定义的问题。它们通常用于完成与监视相关的任务。

在大多数情况下,这种类型的仪表盘会把当前信息安排在一组简单的图表中。

使用情况包括:

根据目标跟踪当前进度实时跟踪系统表现

操作型仪表盘的案例有:

跟踪呼叫中心活动,如呼叫量、等待时间、呼叫长度或呼叫类型监视云端应用程序的运行情况显示股票市场表现监视赛车的遥测数据

tqmtnctgtfn.png插图(34)

演示型仪表盘

演示型仪表板提供了关于感兴趣主题的详细快照。

这些仪表板通常包括一些小图表或记分卡,通过动态标题来解释每个支持图表中提供的趋势和见解。

使用情况包括:

提供关键绩效的指标概述创建高级执行摘要

展示型仪表盘的案例有:

提供投资帐户表现的概述提供产品销售和市场份额数据摘要

0d5lv2hdezq.png插图(35)

原文地址:Material Design

译者:杜雅黎

人已赞赏
UI设计

Material Design Imagery 图像

2020-10-11 22:04:47

UI设计

Material Design Help & feedback 帮助&反馈

2020-10-12 0:04:50

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索