数据可视化设计指南

时间:2022.08.11作者:原创先锋浏览量:409

什么是数据可视化


1. 数据可视化的定义 数据科学的大力发展,让信息科学领域面临的一个巨大挑战就是数据爆炸,然而人类分析数据的能力已经远远落后于获取数据的能力。  数据量越来越大、越多元化,数据内容的噪声让人们在庞杂的数据世界中倍感枯燥繁琐,理解成本较高。所以这个挑战不仅在于如何从海量数据中提取出有用知识,还在于如何将数据转化成使人快速理解的知识。  如何从海量数据中提取知识是数据处理和数据挖掘的范畴,如何让数据转化成使人快速理解的知识就需要数据可视化了。

相比单纯的数字,图形形式可以让人更容易洞察到数据的分布、趋势、关系以及异常点,从而帮助决策者快速决策。数据可视化就是将数据转换成易读、易懂、易操作的图或表等,以一种简洁明了、通俗易懂的方式展现和呈现数据。


2.数据可视化发展历程

关于可视化的发展史可追溯至 19 世纪上半叶,这个时期可以说是数据制图的黄金时期,统计图形、概念图等迅猛爆发,此时人们已经掌握整套统计数据可视化工具,包括直方图、柱状图、饼图、折线图、时间线、轮廓线等。


3.为什么要做数据可视化

随着世界与越来越多的电子设备建立联系,数据量将继续呈指数增长。科学家们预测,到 2025 年将有 163 ZB(163 万亿 GB)的数据。

人脑很难理解所有这些数据,实际上,如果不进行某种类比或抽象,人脑很难理解大于 5 的数字。数据可视化设计师可以在创建这些抽象中发挥至关重要的作用。

而对于用户尤其是决策层的用户来说在现实的工作场景中经常需要同时处理超过 5 组以上的数据并需要对其建立精准的分析模型以便于做出最准确的决策所以基于这样的需求,数据可视化设计氤氲而生。  

而数据可视化能够将产生的数据,以视觉图表的方式,清晰有效地传递出数据当中的重要信息。很多企业管理层从实践中看到了数据可视化的价值,它能够使决策者能够解决难以快速读懂数据分析报告的问题,以数据可视化的模式来理解数据,以便做出对企业更好的决策。


4.数据可视化有什么用

传递速度快,人脑对视觉信息的处理要比书面信息块 10 倍。使用图表来总结复杂的数据,可以确保对关系的理解要比那些混乱的报告或电子表格更快。

数据显示的多维性,在可视化的分析下,数据将每一维的值分类、排序、组合和显示,这样就可以看到表示对象或事件的数据的多个属性或变量。

更直观的展示信息,数据可视化报告使我们能够用一些简短的图形就能体现那些复杂信息,甚至单个图形也能做到。决策者可以轻松地解释各种不同的数据源。丰富但有意义的图形有助于让忙碌的主管和业务伙伴了解问题和未决的计划。

大脑记忆能力的限制,实际上我们在观察物体的时候,我们大脑和计算机一样有长期的记忆(memory 硬盘)和短期的记忆(cache 内存)。只有我们让要记下文字,诗歌,物体,一遍一遍的在短期记忆了出现之后, 它们才可能进入长期记忆。


5.数据可视化使用目标

数据可视化是一种信息交流形式,它以图形形式描绘密集和复杂的信息,最终的视觉效果旨在简化数据,并使用数据帮助用户决策。

准确性,数据可视化需考虑数据的准确性,清晰度和完整性。以不失真的方式呈现信息,减少用户的思考成本。

实用性,数据需要强调实用,降本提效,降低学习使用成本、数据分析成本、数据查找成本,提升操作效率、决策效率。

适应性,能适应多设备、多场景。可根据不同设备大小调整可视化,同时预测用户对数据深度、复杂性和模态的需求。


6.数据可视化应用场景

信息图表设计、B 端后台界面设计、可视化大屏界面设计。


数据可视化图表由哪些元素组成


一张标准样式的图表基本上是由标题、图例、切换选项、图形主体、坐标系、提示信息、值域这几个元素构成。除此之外,还有一些特殊的图表(如:3D 类,由背景墙、侧面墙、底座等图表元素)。


标题,标题简短有力,以最少的字数传达观点、信息或故事。  信息类标题:提供理解数据所需的所有信息,回答「何事」、「何地」、「何时」这三个问题,描述类标题:突出图表中显示的主要数据模式或趋势,描绘出图表所要讲述的故事。

图例,通常在图形主题的右侧或顶部,用来区分不同类别代表的数据含义。

切换选项,可以是 tab 类的切换,也可以是下拉选择,根据具体场景设计,用于同类型图表的切换。

坐标系,由 X 轴,Y 轴,标识线,轴标题构成。一般场景中,坐标轴是图表中必须存在的元素之一,AntV 官方给出的迷你图表(Minichart)中,坐标轴可以被省略,只保留图形基本姿态。

图形主体,由选择的图表类型决定,有时也会多个图表类型组合使用。

提示信息,多为 hover 或者选择状态,对选择的位置数据进行详细展示。

值域,当屏幕不足以容纳图形,选择可视范围的工具,当图表足够复杂时会用到。


需要注意的是,数据可视化图表除了上述常规元素外,还有个很重要的的概念—时间范围。因为数据的统计一定要有时间范围,否则这个数据图表就是无意义的,所以大家在设计图表时一定要体现出“时间范围”,它可以不出现在具体的某一个图表中,但是要通过标题或者其它方式表现出来。


数据可视化的设计流程


规范的流程是好结果的保证。按照设计流程,步步为营,就能避免很多不必要的返工,保证设计质量和项目进度。


1.根据业务需求确立关键指标 可视化设计要避免为了展示而展示,排版布局、图表选用等应服务于业务,所以可视化设计是在充分了解业务需求的基础上进行的。那什么是业务需求呢?业务需求就是要解决的问题或达成的目标。设计师通过设计的手段帮助相关人员达成这个目标,是数据可视化的价值所在。

关键指标是一些概括性词语,是对一组或者一系列数据的统称。确定关键指标后,根据业务需求拟定各个指标展示的优先级(主、次、辅)。


2.确立指标分析维度 我们在制作可视化图表时,首先要从业务出发,优先挑选合理的、符合惯例的图表,尤其是如果你的用户层次比较多样的情况下,要兼顾各个年龄段或者不同认知能力的用户的需求;其次是根据数据的各种属性和统计图表的特点来选择,例如很多小伙伴做完可视化设计,发现可视化图形并没有准确表达自己的意图,也没能向用户传达出应有的信息,可视化图形让人困惑或看不懂。出现这种情况很大程度就是因为分析的维度没有找准或定义的比较混乱。


比较:数据之间存在何种差异、差异主要体现在哪些方面  

分布:指标里的数据主要集中在什么范围、表现出怎样的规律  

联系:数据之间的相关性  

构成:指标里的数据都由哪几部分组成、每部分占比如何


3.选定可视化图表类型 通过上述分析,我们可以跟据我们想要展现的数据种类,以及我们制作图表的目的,来选择到合适的图表。但是日常工作中,我们往往用不到这么多的图表种类,这个筛选的维度更适合我们作为学习图表概念的工具。我们最经常使用的还是六件套 — 柱状图、条形图、折线图、饼图、散点图、地图。


柱状图  柱状图用于描述分类数据之间的对比,是一种以长方形的长度为变量的统计图表,有且仅有一个变量,其中一个轴表示需要对比的分类维度,另一个轴代表相应的数值 。

条形图  条形图对比柱状图,看上去虽然只是 X 轴与 Y 轴交换,数据种类较为类似,但不同的是,条形所能承载的项目数量相对于柱状图而言更多,由于其优良的纵向延展性一般用于手机端较多,比如当条目大于 12 条,就适合用条形图,而且从上到下的阅读方式符合人眼阅读习惯,所以也会经常用于排行榜的设计中。

折线图  折线图用于反映事物随时间或有序类别而变化的趋势。要绘制折线图,先在笛卡尔座标上定出数据点,然后用直线把这些点连接起来。通常 Y 轴用于定量数值,而 X 轴则是分类或顺序刻度。负值可以显示在 X 轴下方。使用建议:Y 轴刻度值选择要合理,当前显示的数据波动要最大化的显示;显示数据尽量大于 3 条,否则不能够清晰地反映出数据随时间变化的趋势。

饼图  饼图以扇区的形式显示每一个数值相对于总数值的大小。通过不同的扇面大小,表达了不同类别的比例,即一个数据组中不同数据项的数据大小占所有数据和的比例;并通过带颜色的图例将扇面和数据项一一对应起来。所以当我们想要一组数据中每个数据类型所占的比例时,就可以优先选择饼形图。饼形图可以分为基础饼形、环形图以及扇形图。

散点图  散点图常用于展现数据的分布情况。通过数据之间的位置分布来观察变量之间的相互关系。数据之间的相互关系主要分为:正相关(两个变量值同时增长)、负相关(一个变量呈现增长分布另一个变量呈现下降分布)、不相关、线性相关、指数相关等。而分布在集群点较远的数据点,被称之为异常点。散点图经常与回归线(就是最准确地贯穿所有点的线)结合使用,归纳分析现有数据以进行预测分析。

地图  地图常用于显示地理区域上的数据。使用地图作为背景,通过图形的位置来表现数据的地理位置,通常来展示数据在不同地理区域上的分布情况。


4.可视化视觉设计 定义设计风格  大多数设计都应该有 APP 或者 Web 风格定义的经验。我们在定义一款 APP 或者 Web 页面设计风格时常用的方法是什么呢?情绪板!精美的图片搭配符合主题的关键词,可以向需求方和产品侧准确地表达出页面的设计方向和风格。


规划页面布局  设计前期规划阶段,先想好打算怎么表达,再选择对应的构图方式。以数据大屏为例,表达上我们讲究总分主次关系,那么构图上依旧遵循这个规则,先具体再抽象。


配色的重要性  当我们打开一个页面时,第一眼看到的往往并不是板块布局,也不是详细内容,而是页面的色彩。色彩引导着我们视觉进行运动,较强的冲击力很容易给用户留下深刻的印象,设计者对色彩的运用和搭配,将决定可视化的展现效果。


5.页面交付开发 页面交付开发完成后,我们还需要进行视觉方面的走查:关键视觉元素、字体字号、页面动效、图形图表等是否按预期显示、有无变形、错位等情况。



back

扫一扫,加我企业微信