数据可视化设计师必备的图表规范指南

在企业大数据、后台管理面板、金融行业等与数据有关的UI设计中,数据可视化设计是必不可少而且非常重要。

但是很多设计师不懂可视化当中不同用途的图表规范,只是为了设计出好看的数据图表,在不停的寻找设计灵感参考,最终发现了即使有漂亮的可视化数据图表,但却不能用在自己的项目上非常可惜。

为什么会出现这样的情况呢?

原因其实无非就是:设计师除了自身比较少接触数据设计外,就是对可视化的设计规范不了解。

主要从以下几个方面去归纳:

数据可视化是一种以图形描绘密集和复杂信息的表现形式。数据可视化的视觉效果旨在使数据容易对比,并用它来讲故事,以此来帮助用户做出决策。数据可视化可以表达不同类型和规模的数据,包括从几个数据点到有大量变量的数据集。

所以我们在进行数据可视化的时候需要注意三点要求:

优先考虑数据的准确性、清晰度和完整性、以不会曲解信息的方式来呈现信息。

为用户浏览数据时创造便于研究和比较的条件与功能。

预测用户对数据深度、复杂性和形式的需求,针对不同设备大家可以进行可视化展示内容和形式。

数据可视化是可以以不同的形式去表达的,图表是表达数据的常用方式,因为它们能够展示和对比多种不同的数据。

图表类型的选择主要取决于两点:

常见的用例包括:股价的升降表现、数据统计、年报等。

图源:网络

2)不同数据间的类别比较

3)展现不同数据间的排名图表

排名图表显示项目在有序列表中的位置,常见用例包括:选举结果、性能统计。

4)不同部分数据在总体数据中的占比

占比类图表显示了局部与整体的关系,常见用例包括:产品类别的综合收入、预算。

5)两个数据以上的关联比较

关联类图表显示两个或以上变量之间的关系,常见用例包括:收入和预期寿命。

6)数值间的分布

分布类图表显示每个值在数据集中出现的频率,常见用例包括:人口分布、收入分布。

7)数据的流程

流程类图表显示了多个状态之间的数据移动,常见用例包括:资金转移、投票计数和选举结果。

8)数据关系

关系图表显示多个项目之间的关系,常见用例包括:社交网络、词图。

面对多种类型的图表,以下表格总结了关于如何选择合适的图表。

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

柱状图(条形图)和饼图都可用于显示比例,表示部分与总体的对比。

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

数据可视化使用自定义样式和形状,使数据更容易理解,以适合用户需求。

图表可以从以下方面进行优化:

不同类型数据的样式设计:

这些图形属性包括:

不同属性的表现:

多个视觉处理方法可以综合应用于数据点的多个方面,例如:在条形图中,条形颜色可以表示类别,而条形长度可以表示值(如人口数量)。

形状可用于表示定性数据。在此图表中,每个类别由特定形状(圆形,正方形和三角形)表示,这样可以在一张图表中轻松实现特定范围的比较,同时也可以进行类别之间比较。

图表可以运用形状,以多种方式展示数据。形状的设计可以是有趣的、曲线的,或者精确和高保真的等等。

形状精确程度:图表可以展示不同精度程度的数据。

用于细致研究的数据应该用适合交互的形状(在触摸大小和功能可见性方面)展示,而旨在表达一般概念或趋势的数据可以使用细节较少的形状。

颜色可用于以四种主要方式区分图表数据:

1)颜色区分类别

例:圆环图中,颜色用于表示类别。

2)颜色突出数据

例:散点图中,颜色用于突出特定数据。

3)重点区域

在不滥用的情况下,颜色可以突出焦点区域。不建议大量使用高亮颜色,因为它们会分散用户注意力,影响用户的专注力。

4)颜色表示含义

5)无障碍

为了适应看不到颜色差异的用户,您可以使用其他方法来强调数据,例如高对比度着色,形状或纹理。将文本标签应用于数据还有助于说明其含义,同时消除对图例的需求。

图表中的线可以表示数据的特性,例如层次结构,突出和比较。线条可以有多种不同的样式,例如点划线或不同的不透明度。

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

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

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

字重:标题和字重的变化可以表达内容在层次结构中的重要程度。但是应该保持克制,使用有限的字体样式。

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

图表可用于:

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

一个或多个坐标轴显示数据的比例和范围,例如,折线图沿水平和垂直坐标轴显示一系列值。

1)柱状图(条形图)基线

柱状图(条形图)应从为零的基线(y轴上的起始值)开始,从不为零的基线开始可能导致数据被错误地理解。

2)坐标轴标签

标签的设计应体现图表中最重要的数据,应根据需要使用标签,并在UI中保持一致性,他们的出现不应该妨碍查看图表。

3)文字方向

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

文字标签不应该:

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

1—注释,2.—图例。

在PC端,建议在图表下方放置图例。在移动端,将图例放在图表上方,以便在交互过程中保持可见。

1)标签和图例

在简单图表中,可以使用直接标签。在密集的图表(或更大的图表组的一部分)中,可以用图例。

在称为数据大屏的UI界面中,数据可视化通过一系列图表实现。多个独立的图表有时可以比一个复杂的图表更好地表达故事。

数据大屏设计:数据大屏的目的应在其布局,样式和交互模式中体现。无论是用来制作演示文稿还是深入研究数据,它的设计应该适合它的使用方式。

数据大屏应该:

应根据对数据的需求确定信息的优先级并进行安排。在此示例中设计仪表板,考虑了以下用户问题:

分析类数据大屏让用户能够研究多组数据并发现趋势。通常,这些数据大屏包含能够深入洞察数据的复杂图表。

用例包括:

分析类数据大屏示例:

分析类数据大屏显示气候数据

操作类数据大屏旨在回答一组预设的问题。

操作类数据大屏示例:

操作类数据大屏显示设备存储指标

演示类数据大屏是为感兴趣的主题提供的展示视图。

这些数据大屏通常包括一些小图表或数据卡片,用动态标题描述每个图表的趋势和见解。

THE END
1.任何类型的图表都可以添加数据标记。任何类型的图表都可以添加数据标记。 参考答案:错 您可能感兴趣的试卷 你可能感兴趣的试题 1.判断题开发人员只能逐一设置图表元素的样式。 参考答案:错 2.判断题图表的辅助元素一定会改变图形的效果。 参考答案:错 3.判断题图例常用于包含多组图形的图表中,以帮助用户理解每组图形的含义。http://www.ppkao.com/tiku/shiti/74b61f6c6a3244dcbb074a6a229a4055.html
2.abbyyfinereaderpdf15中文破解版v15.0.114.4683查看和更新元数据并验证数字签名,以确保文档的真实性和完整性。 3、从任何类型的PDF中检索信息 通过使用全文关键字搜索和书签,即使在扫描的PDF中也可以快速轻松地查找信息。文档打开后,FineReader PDF会自动检测不可搜索的PDF文档,并立即应用OCR(光学字符识别)使其可供搜索。 4、编辑和更新PDF 添加以前版本的...https://www.ddooo.com/softdown/153961.htm
3.Excel函数教程3、 选择图像类型--首先选中制作函数图像所需要的表中数据,利用excel工具栏上的图表向导按钮(也可利用"插入"/"图表"),在"图表类型"中选择"XY散点图",再在右侧的"子图表类型"中选择"无数据点平滑线散点图",单击[下一步],出现"图表数据源"窗口,不作任何操作,直接单击[下一步]。 http://www.360doc.com/content/11/0305/21/1444297_98449311.shtml
4.powerbi学习上,产品明细表上类别手机、平板、电脑都不是唯一的,每个品牌都有这种类型,是 个引用表;但类别表上,几种类别都是唯一值,因此这两个表是多对一的关系,类别 表也就是查找表 3.交叉筛选方向 表示数据筛选的流向,有两种类型: ? 双向:两个表可以互相筛选 ...https://www.jianshu.com/p/b61c07b4659d
1.WPS中的图表快速插入与设计在现代办公软件中,图表作为数据可视化的一种重要工具,能够帮助用户更直观地理解和分析数据。WPS Office作为一款功能强大的办公软件,提供了便捷的图表插入和设计功能,使得用户可以轻松创建各种类型的图表。在本文中,我们将详细讲解如何在WPS中快速插入和设计图表,以提升工作效率。 https://www.yihemeixiao.com/news/2982.html
2.向图表数据区域添加数据(ReportBuilder2.0)MicrosoftLearn将图表数据区域添加到设计图面后,可以将数值数据和非数值数据的报表数据集字段拖到图表的放置区中。左键单击设计图面上的图表时,将会显示三个放置区(序列、类别和数据)。如果已为报表定义了数据集,则数据集中的结果字段将会显示在“报表数据”窗格中。将数据集中的字段拖到适当放置区。默认情况下,将字段添加到...https://msdn.microsoft.com/zh-cn/library/windows/desktop/dd239310(v=sql.100).aspx
3.数据分析如何根据数据选择图表类型1. 如何根据数据选择图表类型? 选择图表类型时,应考虑数据的特点、数据量、数据之间的关系以及你想要传达的信息。以下是一些指导原则,可以帮助你根据数据选择最合适的图表类型: 数据类型: 分类数据:使用条形图、饼图或箱线图来展示不同类别的数据。 数值数据:使用折线图、散点图或直方图来展示数值数据的分布和趋势。https://blog.csdn.net/2301_81133727/article/details/144161505
4.office办公软件教程第十七课: 公式、 第十七课:Excel 2000 公式、函数的应用及图表的制作 一、建立公式 概念:公式是对单元格中的数据进行计算的算式,可以用公式对工作表中的数据进 第38 页共 45 页 office 办公软件教程 行计算。公式中可包括加、减、乘、除运算符,单元格的值和函数等。输入公式时必须 以等号“=”开头。 https://www.unjs.com/zuixinxiaoxi/ziliao/20170614000008_1371187.html
5.Excel图表学习之实际和目标对比的柱状图excel然后就可以根据辅助列插入图表了。按住Ctrl键,分别选中A3:A9和D3:H9单元格,点击插入选项卡下,插入柱形图-堆积柱形图。 得到图表结果如下。 3.修改图表类型 那现在需要修改红色箭头和青色箭头两个系列的图表类型为“带数据标记的折线图”。 当点击图表的时候,上方选项卡就会出现图表工具,点击图表工具下方设计选项卡...https://m.php.cn/article/497539.html
6.用一篇文章,带你了解数据图表的元素构成优设网一、前言在日常的工作中,我们经常会涉及到各种数据图表的设计,数据图表可以直观地展示数据的变化趋势、差异和规律,使数据比较或变化趋势变得一目了然,有助于人们快速、有效地表达数据关系。那么,数据图表的基础构成有哪些?在设计过程中有哪些需要注意的点呢?https://www.uisdc.com/data-chart-element-composition
7.办公中常用的Word及Excel小方法全集小秘诀112招全介绍word在五笔字型状态下输入“shift+6”,另外按下“Ctrl+Alt+.”组合键可以在任何输入法状态下输入。 17、轻松搞定单元格数据斜向排 在Excel中打开“工具—自定义—命令—类别—格式”,在“命令”列表中找到“顺时针斜排”和“逆时针斜排”两个命令按钮拖到工具栏的合适位置,然后选中需要斜排的单元格,执行命令即可。https://www.jb51.net/office/word/55872_all.html
8.常用的Excel表格教程技巧大全左上图,先用所有数据做曲线图或柱形图,然后选中相应的序列,更改图表类型,有时还需要用到次坐标轴。 右上图,先做好面积图,然后将该数据序列再次加入图表,修改新序列的图表类型为曲线图,调粗线型。 3. 布局与细节 布局 下图从上到下可以分为5个部分:主标题区、副标题区、图例图、绘图区、脚注区。 https://www.55.la/article/1911098.html
9.2023年度40个最佳JavaScript库和框架如前所述,JavaScript库用于执行特定功能。它们大约有83个,每个都是为实现特定目的而创建的,我们将在本节中介绍它们的某些可用性。 您可以将JavaScript库用于: 地图和图表的数据可视化 应用程序中的数据可视化对于用户在管理面板,仪表盘,性能指标等中清晰地查看统计数据至关重要。 https://www.wbolt.com/40-best-javascript-libraries.html
10.数据分析表怎么做?16个图表类型,带你一网打尽!16个图表类型,带你一网打尽! 用Pixso,在线制作数据分析图表 在信息爆炸的时代,每天都有无穷尽的数据被堆积起来,这些数据往往晦涩难懂且信息分散,可读性较差。这时候,就需要设计师进行数据可视化设计,提高数据分析效率。与晦涩难懂的数据相比,可视化的数据分析图表更直观。因此,使用合适的图表来进行可数据分析是非常重要...https://pixso.cn/designskills/16-data-analysis-charts/
11.Matplotlib.pyplot.plotMatplotlib是Python中最流行的数据可视化库之一,它提供了丰富的绘图功能。在处理时间序列数据时,pyplot.plot_date()函数是一个非常有用的工具。本文将深入探讨pyplot.plot_date()函数的使用方法、参数设置以及实际应用场景,帮助您更好地利用这个强大的函数来创建引人注目的日期数据图表。 https://geek-docs.com/matplotlib/matplotlib-ask-answer/matplotlibpyplotplot_date-function-in-python_z1.html
12.zfcg.fuzhou.gov.cn/upload/document/20220608/309543842ca546e3...3、供应商(自然人除外):若供应商代表为单位负责人授权的委托代理人,应提供本授权书;若供应商代表为单位负责人,应在此项下提交其身份证正反面复印件,可不提供本授权书。4、供应商为自然人的,可不填写本授权书。5、纸质响应文件正本中的本授权书(若有)应为原件。电子响应文件中的本授权书(若有)应为原件的...http://zfcg.fuzhou.gov.cn/upload/document/20220608/309543842ca546e3bd9b850bb10f9589.html