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

在企业大数据、后台管理面板、金融行业等与数据有关的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.(完整版)管理信息系统数据流程图和业务流程图.doc(完整版)管理信息系统数据流程图和业务流程图.doc 20页内容提供方:137***3851 大小:941.02 KB 字数:约5.78千字 发布时间:2020-10-22发布于山东 浏览人气:234 下载次数:仅上传者可见 收藏次数:0 需要金币:*** 金币 (10金币=人民币1元)(...https://max.book118.com/html/2020/1021/5103124330003012.shtm
2.数据流程图的介绍与使用,一篇文章看懂!数据流程图是什么呢?其实它是一种用于描述系统数据流程关系的工具,它可以见复杂的数据独立抽象而出,并且用图像的暗示来阐述信息的来源和实际的流程图。也有人说这是一种图形化的系统模型,可以描述数据流程图。存储和处理的逻辑关系。在本篇文章,我们将详细来了解数据流程图的基础知识。 数据流程图的作用是什么? https://www.imooc.com/article/293722
3.数据流程图怎么画?4步教你轻松搞定数据流程图是流程图的众多分类之一,使用特定图形符号反应信息在系统中的流动、处理和存储情况,将各项逻辑信息流及功能数据化,使其变得直观形象,方便设计人员对业务的具体流程进行设计,从中分析数据流程的结构并加以改进.那么我们该怎么画数据流程图呢?https://www.liuchengtu.com/tutorial/shujumuban.html/
4.转:各种图(流程图,思维导图,UML,拓扑图,ER图)简介对象模型,采用对象,属性,操作,关联等概念展示系统的结构和基础,包括类别图。 动态模型,展现系统的内部行为。包括序列图,活动图,状态图。 3.软件:亿图,Visio,PowerDesigner 数据库模型图,实体关系图,数据流程模型图 1.定义:实体关系图,简记E-R图是指以实体、关系、属性三个基本概念概括数据的基本结构,从而描述静态...https://www.jianshu.com/p/e45ceca15000
5.员工数据管理业务流程图迅捷画图思维导图模板员工数据管理业务流程图--迅捷画图,思维导图模板,平面,其他平面,流程图模板,数据管理流程图,站酷网,中国设计师互动平台.该流程图主要从管理员,企业,供应商三个中心主题进行展开,对数据管理进行合理分析使用,简洁明了,颜色划分较为清楚,点击“使用模板”即可进行在线编https://www.zcool.com.cn/work/ZMzU3MTI0NzY=.html
6.《数道图说—统计数据处理流程图汇编》本书作者长期奋战在基层统计一线,他们从工作实践中总结经验,将重点指标、常用指标的出数流程,以行业或企业为例,做成一张张清晰流畅的工作流程图。书的前四部分按工业企业、服务业及贸易企业、建筑与房地产企业与固定资产投资、农业及其他分类,详细说明了这些重点专业的常用经济指标的出数流程;第五部分则对数据审核要...https://www.stats.gov.cn/zs/tjwh/tjkw/tjzl/202302/t20230215_1907876.html
1.轻松绘制数据流程图亿图图示在线什么是数据流程图?数据流程图中的标准符号有哪些?如何快速绘制数据流程图?以上问题,你都可以在这里找到答案。https://edrawmax.cn/article/data-flow-chart.html
2.如何绘制数据流程图从这些流程开始,可以逐渐辨别这些流程之间及流程与外部实体之间的信息流。 数据流程图—文件流分析 如果调查中的业务主要由文档或者计算机输入和输出形式的信息组成,文件流分析则是合适的方法。 当分析者对信息流特别感兴趣时,文件流分析尤其有用。第一步是列出主要的文件和它们的来源的接收者。然后确认其它重要信息比如...https://www.edrawsoft.com/cn/Design-Data-Flow.php
3.7个步骤快速学会数据流图怎么画首先确定要绘制数据流图的系统或程序的边界,即界定所关注的系统或程序的范围。 2. 确定主要流程 识别系统或程序的主要功能,确定主要的数据流和处理过程。数据流是指数据在系统中的流动,处理过程是对数据进行转换、处理或存储的功能。 3. 绘制外部实体 https://boardmix.cn/article/data-flow-diagram/
4.数据流程图新手指导关联关系多、数据复杂、流程繁琐、讲不清楚、说不明白...你是否还在被这些问题困扰?现在越来越多的人开始使用数据流程图、数据分析流程图等进行工作展示与对接,简单易懂,极大地提高了工作效率。 数据流程图(Data Flow Diagram,DFD), 是一种描述系统数据流程的主要工具,它用一组符号来描述整个系统中信息的全貌,综合...https://modao.cc/flowchart/data-flow-chart-beginners-guide.html
5.关于数据流程图和示例你应该知道的一切本文将讨论一种流程图,数据流程图或 DFD。 每天都有太多活动部件进入组织的系统和运营。 每一个对于企业或项目的成功都是至关重要的。 使用适当的技术,很难跟踪所有重要的细节。 DFD 用于以图形方式表示业务信息系统中的数据流。 这就是为什么我们用下面最好的例子来介绍 DFD。 https://zh-cn.aiseesoft.com/resource/data-flow-diagram-example.html
6.在线数据流程图制作一个在线数据流图工具,用于创建快速、清晰的数据流图。 绘制数据流程图(DFD) 在线绘制数据流图(DFD) 数据流图(DFD)一种用于表达商业信息系统内数据如何流动的图表。DFD 将进程、数据存储和系统外部实体之间的数据传输图像化。它在软件工程中被广泛使用。现在,您也可以使用 VP Online 的在线 DFD 工具绘制专业的数据...https://online.visual-paradigm.com/cn/diagrams/features/dfd-maker/
7.数据库业务流程图6个图例数据库业务流程图6个图例是指在设计数据库的时候,对于其业务流程的描述,使用6个不同的图例来进行展示。这些图例包括实体关系图、用例图、过程流程图、状态转换图、活动图和时序图。每一种图例都有其特定的用途和设计时需要注意的点,下面我们逐一进行解析。 https://www.volcengine.com/theme/885147-S-7-1
8.数据流程图(DFD)示例:食品订购系统腾讯云开发者社区数据流程图 (DFD) 示例:食品订购系统 原创 修改于 2018-07-13 17:26:16 4.9K0 文章被收录于专栏:UML 什么是数据流图? 数据流图也称为气泡图。它通常用作创建系统概述的初步步骤,而不需要详细介绍,以后可以将其作为自上而下的分解方式进行详细说明。DFD显示将从系统输入和输出的信息类型,数据如何流经系统以及...https://cloud.tencent.com/developer/article/1158587
9.管理信息系统数据流程图详解数据流程图图例:常见的数据流程图有两种: 一种是以方框、连线及其变形为基本图例符号来表示数据流动过程。 一种是以圆圈及连接弧线作为其基本符号来表示数据流动过程。 这两种方法实际表示一个数据流程的时候,大同小异,但是针对不同的数据处理流程却各有特点。故在此我们介绍其中一种方法,以便读者在实际工作中根据...https://doc.mbalib.com/m/view/aa78092399341abcc8c8e1fcddfb020e.html
10.在地图上可视化地理空间数据的12种方法开源地理空间基金会中文分...8. 地形图 地形图是地理空间数据地图的另一种相当标准的形式。通常,地形图用于表示分布在某个区域上的物理土地要素。其中包括地形高程(尤其是山脉、火山和其他高地标)和河流系统,还包括人为修建的例如公路、铁路或其他运输网络。 9. 流程图 流程图,也称为“路径”图,是线图的更专业版本。它们不是专注于地球的物理...https://www.osgeo.cn/post/12f76
11.大数据数据平台整体数据流图流程图模板数据流图 数据流图 音频数据流输出 大数据数据融合-数据治理平台 数据流图 mongodb 作者其他创作 大纲/内容 收藏 立即使用 大数据整体架构图 收藏 立即使用 大数据数据平台整体数据流图 收藏 立即使用 新能源架构图 PO_c52de4 职业:本科 去主页      评论 0 条评论...https://processon.com/view/5c1b59cce4b05e0d0638af68