在企业大数据、后台管理面板、金融行业等与数据有关的UI设计中,数据可视化设计是必不可少而且非常重要。
但是很多设计师不懂可视化当中不同用途的图表规范,只是为了设计出好看的数据图表,在不停的寻找设计灵感参考,最终发现了即使有漂亮的可视化数据图表,但却不能用在自己的项目上非常可惜。
为什么会出现这样的情况呢?
原因其实无非就是:设计师除了自身比较少接触数据设计外,就是对可视化的设计规范不了解。
主要从以下几个方面去归纳:
数据可视化是一种以图形描绘密集和复杂信息的表现形式。数据可视化的视觉效果旨在使数据容易对比,并用它来讲故事,以此来帮助用户做出决策。数据可视化可以表达不同类型和规模的数据,包括从几个数据点到有大量变量的数据集。
所以我们在进行数据可视化的时候需要注意三点要求:
优先考虑数据的准确性、清晰度和完整性、以不会曲解信息的方式来呈现信息。
为用户浏览数据时创造便于研究和比较的条件与功能。
预测用户对数据深度、复杂性和形式的需求,针对不同设备大家可以进行可视化展示内容和形式。
数据可视化是可以以不同的形式去表达的,图表是表达数据的常用方式,因为它们能够展示和对比多种不同的数据。
图表类型的选择主要取决于两点:
常见的用例包括:股价的升降表现、数据统计、年报等。
图源:网络
2)不同数据间的类别比较
3)展现不同数据间的排名图表
排名图表显示项目在有序列表中的位置,常见用例包括:选举结果、性能统计。
4)不同部分数据在总体数据中的占比
占比类图表显示了局部与整体的关系,常见用例包括:产品类别的综合收入、预算。
5)两个数据以上的关联比较
关联类图表显示两个或以上变量之间的关系,常见用例包括:收入和预期寿命。
6)数值间的分布
分布类图表显示每个值在数据集中出现的频率,常见用例包括:人口分布、收入分布。
7)数据的流程
流程类图表显示了多个状态之间的数据移动,常见用例包括:资金转移、投票计数和选举结果。
8)数据关系
关系图表显示多个项目之间的关系,常见用例包括:社交网络、词图。
面对多种类型的图表,以下表格总结了关于如何选择合适的图表。
*基线值是y轴上的起始值。
柱状图(条形图)和饼图都可用于显示比例,表示部分与总体的对比。
面积图有多种类型,包括堆叠面积图和层叠面积图:
数据可视化使用自定义样式和形状,使数据更容易理解,以适合用户需求。
图表可以从以下方面进行优化:
不同类型数据的样式设计:
这些图形属性包括:
不同属性的表现:
多个视觉处理方法可以综合应用于数据点的多个方面,例如:在条形图中,条形颜色可以表示类别,而条形长度可以表示值(如人口数量)。
形状可用于表示定性数据。在此图表中,每个类别由特定形状(圆形,正方形和三角形)表示,这样可以在一张图表中轻松实现特定范围的比较,同时也可以进行类别之间比较。
图表可以运用形状,以多种方式展示数据。形状的设计可以是有趣的、曲线的,或者精确和高保真的等等。
形状精确程度:图表可以展示不同精度程度的数据。
用于细致研究的数据应该用适合交互的形状(在触摸大小和功能可见性方面)展示,而旨在表达一般概念或趋势的数据可以使用细节较少的形状。
颜色可用于以四种主要方式区分图表数据:
1)颜色区分类别
例:圆环图中,颜色用于表示类别。
2)颜色突出数据
例:散点图中,颜色用于突出特定数据。
3)重点区域
在不滥用的情况下,颜色可以突出焦点区域。不建议大量使用高亮颜色,因为它们会分散用户注意力,影响用户的专注力。
4)颜色表示含义
5)无障碍
为了适应看不到颜色差异的用户,您可以使用其他方法来强调数据,例如高对比度着色,形状或纹理。将文本标签应用于数据还有助于说明其含义,同时消除对图例的需求。
图表中的线可以表示数据的特性,例如层次结构,突出和比较。线条可以有多种不同的样式,例如点划线或不同的不透明度。
线可以应用于特定元素,包括:
文本可用于不同的图表元素,包括:
图表标题通常是具有最高层次结构的文本,轴标签和图例具有最低级别的层次结构。
字重:标题和字重的变化可以表达内容在层次结构中的重要程度。但是应该保持克制,使用有限的字体样式。
图表可以表示图表中不同类型的数据,并提高图表的整体可用性。
图表可用于:
在图表中使用图标时,建议使用通用可识别符号,尤其是在表示操作或状态时,例如:保存、下载、完成、错误和危险。
一个或多个坐标轴显示数据的比例和范围,例如,折线图沿水平和垂直坐标轴显示一系列值。
1)柱状图(条形图)基线
柱状图(条形图)应从为零的基线(y轴上的起始值)开始,从不为零的基线开始可能导致数据被错误地理解。
2)坐标轴标签
标签的设计应体现图表中最重要的数据,应根据需要使用标签,并在UI中保持一致性,他们的出现不应该妨碍查看图表。
3)文字方向
为便于阅读,文本标签应水平放置在图表上。
文字标签不应该:
图例和注释描述了图表的信息,注释应突出显示数据点,数据异常值和任何值得注意的内容。
1—注释,2.—图例。
在PC端,建议在图表下方放置图例。在移动端,将图例放在图表上方,以便在交互过程中保持可见。
1)标签和图例
在简单图表中,可以使用直接标签。在密集的图表(或更大的图表组的一部分)中,可以用图例。
在称为数据大屏的UI界面中,数据可视化通过一系列图表实现。多个独立的图表有时可以比一个复杂的图表更好地表达故事。
数据大屏设计:数据大屏的目的应在其布局,样式和交互模式中体现。无论是用来制作演示文稿还是深入研究数据,它的设计应该适合它的使用方式。
数据大屏应该:
应根据对数据的需求确定信息的优先级并进行安排。在此示例中设计仪表板,考虑了以下用户问题:
分析类数据大屏让用户能够研究多组数据并发现趋势。通常,这些数据大屏包含能够深入洞察数据的复杂图表。
用例包括:
分析类数据大屏示例:
分析类数据大屏显示气候数据
操作类数据大屏旨在回答一组预设的问题。
操作类数据大屏示例:
操作类数据大屏显示设备存储指标
演示类数据大屏是为感兴趣的主题提供的展示视图。
这些数据大屏通常包括一些小图表或数据卡片,用动态标题描述每个图表的趋势和见解。