数据可视化大屏的应用与落地实践

本篇文章为亿信华辰《数据可视化大屏的应用与落地实践》视频直播稿件。

大家晚上好，欢迎来到小亿直播间！本次直播我们分享的主题是：数据可视化大屏的应用与落地实践。我们将会从4个方面来进行分享：首先，我们说说数据可视化的一些基本概念和难点；其次，我们说说数据可视化的5个基本原则和如何选择图表来做可视化设计；然后，我们分享下大屏项目落地的9个步骤；最后，我们分享一些做过的可视化大屏案例。

一、数据可视化的基本概念

1.宏观的可视化

如图所示，我们先从宏观上来看看可视化，我们从可以两个基本维度：①信息性质：我要传达的是信息还是数据；②传达目标：我在陈述某事，还是在探索某事，划分为如图的四象限矩阵。

象限二是概念性的描述，也就是类似于组织结构图、决策树就是电典型的概念描述图表；象限三是创意挖掘，比如战略讨论和创意项目早期阶段所画的图等；而象限一与四，也就是我们微观层面上的数据可视化，也是本次直播给大家分享的。

2.数据可视化的定义

微观的数据可视化是为了更形象地表达数据内在信息和规律 ，促进数据信息的传播和应用，是把相对复杂、抽象的数据通过可视化的方法以人们更容易理解的形式展示出来的一系列手段。

在当前新技术支持下，数据可视化除了“可视”，还有可交流、可互动的特点，其本质核心是传递信息，即如何将信息准确、可靠、易于理解传达给对方。

而我们本次直播所分享的大屏数据可视化，是以大屏为主要展示载体的数据可视化设计，也是当前可视化领域的一项热门应用，通常可以分为如图所示的信息展示类、数据分析类及监控预警类。

数据可视化大屏，有两个要点：一是展示效果的酷炫，二是展示数据之间的层次关系。好的数据可视化大屏是布局、色彩、图表、动效的综合运用。

3.数据可视化有哪些好处？

（1）化繁为简，方便理解

数据可视化能将不可见的数据现象转化为可见的图形符号，能将错综复杂、看起来没法解释和关联的数据，建立起联系和关联，发现规律和特征，获得商业价值。

正所谓“一图胜千言”，使用图表来总结复杂的数据，这种沟通方式也使业务领导者能够更快地理解和处理他们的信息。

（2）发现新趋势、新机遇

例如企业收集到的消费者行为的数据，可以为适应性强的公司带来许多新的机遇。通过使用大数据可视化来监控关键指标，更加阳光透明，及时发现问题第一时间做出应对。

例如：天猫的双11数据大屏实况直播，可视化大屏展示大数据平台的资源利用、任务成功率、实时数据量等。企业领导人可以更容易发现各种大数据集的市场变化和趋势。

（3）增强数据交互

数据可视化的主要好处是它及时带来了风险变化。但与静态图表不同，交互式数据可视化鼓励用户探索甚至操纵数据来发现其他“秘密”。这就为使用分析提供了更好的意见。

二、数据可视化的难点

1.准备工作

这也是数据可视化的最大难点工作，主要集中在数据的获取与整理上。

比如数据收集是否全面准确？清洗数据是否到位？数据分析是否有据可循？数据分析结论是否清晰？如果用来数据可视化的数据出现问题，数据可视化的页面与结果都不具有任何参考价值。

2.对数据需要具备一定的敏感性

当面对复杂的数据、信息，怎么找到数据之间的逻辑关系，就需要制作人具备一定的数据分析能力，也就是对大量复杂的数据具备数据敏感性，快速找到多维度、多变量的数据之间的逻辑关系，确定哪些数据之间有直接关系，哪些数据之间具有间接关系，需要重点展现哪些数据之间的关系，这些都需要制作人或者数据分析师及时做出准确判断。

3.用简洁易懂的图表展示复杂的数据关系

因为阅读者需要在极短的时间内掌握了解各类图表所传递的数据关系，数据可视化需要尽可能简洁，便于让不同的阅读者快速抓住其重点，因此数据可视化就需要用有限的文字、简洁的图表展现大量的数据之间的各种关系与其客观规律。

4.选择合适的图表

每种图表都有自己的优势和局限性，条形图就有一般条形图、堆积条形图、百分比条形图、双向柱状图等分类，饼状图也有：一般饼状图、玫瑰饼状图、环形图、旭日图等类型。所以，如何从千变万化的各类图表中，选出适合自己数据的图表类型是数据可视化的关键。

5.图表细节的处理

图表细节的处理需要综合考虑多方面因素，比如刻度标记类型、间隙、刻度标签位置、数据类型、小数位、是否千分位、颜色取值、图例位置、图上标签、图表标题、备注文字说明等等。

在这里细节的处理不仅影响数据可视化的效果，若处理不好，可能还会加大阅读人的阅读困难。例如：刻度选取不合理折线过于陡峭，折线太细不便于观察线等。

三、数据可视化设计的5个原则

我们在进行可视化设计的过程中需要遵循的5个基本原则：

1.目标明确

并不是所有的数据都需要数据可视化。数据可视化是借助图形化的分析过程，来解决业务上某一问题或者发现某一问题，当数据脱离了业务，就没有必要可视化了。所以做数据可视化之前先要明确这个数据可视化的分析目的到底是什么？你打算通过数据向用户讲述怎样的故事，数据可视化之后又在表达什么？通过这些数据，能为你后续的工作提供哪些指导？

为了准确找到数据可视化的目的，我们往往会先思考这7个问题：

如果我们对以上7个问题有明确的答案，那么就明确了这次的数据可视化到底要解决什么问题。

2.了解你的受众

如果不是为了与目标受众清楚地沟通，数据可视化是没有实际的应用价值的。因此应该与受众的专业知识兼容，并允许他们轻松快速地查看和处理数据。

所以这里就有了我们第二个原则，需要考虑到受众对数据所呈现的基本原则的熟悉程度，以及他们是否了解这些可视化的主要背景，最后是这些图表是否会被定期重复使用等等。

3.简洁、美观

现在很多企业或者机构在做数据可视化的时候一味追求酷炫的动态图、华丽的视觉效果等，但这个做法并一定正确。图表主要作用是传递信息，追求过分漂亮只会使徒增无用功。

图表的基础美感会给人带来视觉上的享受，图表中的坐标轴、形状、线条、字体、标签、标题排版等元素是都会影响人的视觉效果，因此这些图表元素经过合理的搭配会给整个数据可视化作品加分，比如图表的色彩，如果搭配合理，会使整个图表看起来更加生生动，同时也会加深阅读者的记忆。

而我们如何才能做到这一点呢？这里我们可以从以下6个方面来进行：

（1）字体的使用与选择

字体优先使用系统默认字体，需要嵌入字体时考虑字体的可识别性、与当前设计风格是否融合、是否可免费商用。除此以外，选择字母容易辨识不会产生奇异的字体更有利于用于数据可视化设计。字体的选择主要有三个方面：字体大小、字母间距、中西文间隔等等，这些都数据可视化需要考虑到的。

（2）背景色的使用

颜色是可视化大屏中影响画面效果的重要元素。使用不当，会让读者分心。背景色的选择与可视化展示的设备相关，分为深色、浅色、彩色。

如果是小屏幕，背景色选择范围就比较广，选择浅色、彩色、深色均可以做出很好的设计。一般情况下，浅色背景更适合展示大量的数据信息，如图所示，因为在浅色底上数据图表的识别度比较高。

而深色、彩色背景更适合渲染简单的数据，用于烘托气氛，所以在大屏设备中普遍用深色作为背景色，以减少屏幕拖尾，观众在视觉上也不会觉得刺眼。因此大屏的配色需要以深色背景为基础。保证可视化图的清晰辨识度，色调与明度变化需要有跨度。

除此以外，深色暗色背景可减少拼缝带来的不适感。由于背景面积大，使用暗色背景还能够减少屏幕色差对整体表现的影响；同时暗色背景更能聚焦视觉，也方便突出内容，做出一些流光、粒子等酷炫的效果。

（3）颜色搭配

这里需要注意的是色彩的饱和度和明度，它们需要差异显著、对比鲜明，尽量避免使用邻近色配色。如果颜色过于相似（例如浅灰与更浅的灰），人们难以发现两者间的区别。相反，也要避免强烈的对比色，例如红配绿或蓝配黄。这里亿信华辰曾为多个行业配置过可视化大屏，列举一些各个行业的专属的一些配色，大家可以参考下。

（4）同类型的数据排列尽量均匀

也就是使用用一种颜色去表达相同类型的数据，在图表中使用自然增量（0、5、10、15），而非不均匀的增量（0、3、5、16）排序要均匀，比如趋势、排名或者占比，如图所示。

（5）图表类型多样化，注重对比

可视化让数据对比更直观，但是仅仅把两组图表紧挨着放在一起并不能达成这个目标，甚至更令人费解，所以要多用不同类型的图片进行对比。

（6）保持视觉一致性

这里想跟大家分享就是大屏需要保持整体色彩感觉一致，配色风格一致，不同颜色之间搭配协调。

不要一会黑白配，一会又来个红绿配。图表、图像、按钮包括尺寸，都要与整体风格保持一致。要么都是填充式的，要么都是中空式的，要么都是棱角分明，要么都是圆润光滑。例如下图，某公安行业可视化大屏（部分）是个很好的例子，配色统一，风格一致。

4.懂得利用工具

得心应手的数据可视化工具会使数据可视化的工作事半功倍。

比如，亿信华辰的数据可视化平台——酷屏。酷屏是亿信华辰自主研发的新一代数据可视化产品，可灵活、快捷地制作各类交互式常规屏和大屏可视化，内置百余种炫酷组件和3D特效，让数据得到更形象、更直观的可视化呈现，我们PPT上的所有配图都是运用酷屏帮助客户做出来的。

但这里我们也需要注意的是数据可视化是一种信息交流形式，它以图形形式描绘密集和复杂的信息，最终的视觉效果旨在简化数据，并使用数据帮助用户决策。因此总体上需要遵循三个小原则；

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

第二，是实用性，强调数据需要实用，可以帮助用户使用强调探索和比较的上下文和启示来导航数据，比如比较数据，预警数据，浏览数据。

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

5.实事求是

数据可视化的结果一定要实事求是，不可规避“异常数据”。因此真实反映业务数据，才可能帮助我们发现问题，掩盖问题只会造成更大的损失。

若数据很庞大，也不可随意省去自认为不重要的数据部分，找到核心数据指标和异常数据，重点展示核心数据指标，分析异常数据的问题原因，最后给出合理、准确的数据分析结论。

四、可视化图表的选择

总所周知，数据可视化是一个展现复杂信息的强大武器。通过可视化信息，我们的大脑能够更好地抓取和保存有效信息，增加信息的印象。

但如果数据可视化做得不好，反而会带来负面效果，所以更需要我们选择合理的数据可视化方法，高效传达数据。接下来，我们一起看看不同图表的不同使用场景。

如图所示，我们可以将图表的展示分成4种类型，分别是比较、分布、构成和联系。在比较中，我们又可以依据分类和时间再进行一步进行拆分，比如基于时间，我们又可以根据数据是否循环，从而选择相应的雷达图、折线图、金字塔图或漏斗图等等。

1.比较类

可视化的方法显示值与值之间的不同和相似之处。使用图形的长度、宽度、位置、面积和颜色来比较数值的大小，通常用于展示不同步分类间的数值对比，不同时间点的数据对比。因此关于比较类的图表，我们可以有多种图表进行选择，比如柱状图、气泡图、雷达图等等。

2.占比类

可视化的方法显示同一维度上占比关系，可以使用饼图、环图、矩形树图等等。

3.区间类

可视化的方法显示同一维度上值的上限和下限之间的差异。使用图形的大小和位置表示数值的上限和下限，通常用于表示数据在某一个分类（时间点）上 的最大值和最小值。比如仪表盘、堆叠面积图等。

4.关联类

可视化的方法显示数据之间相互关系，使用图形的嵌套和位置表示数据之间的关系，通常用于表示数据之间的前后顺序。比如桑基图、和弦图等。

5.趋势类

可视化的方法分析数据的变化趋势。使用图形的位置表现出数据在连续区域上的分布，通常展示数据在连续区域上的大小变化的规律，比如折线图、面积图等。

6.时间类

可视化的方法是展示数据随时间的变化趋势。是属于趋势类的一个细分，在数据分析里使用的不交多的，比如面积图、折线图等等。

7.地图类

这个是现在政务大屏上出现最多的统计图，主要分为两类，一类是传统的热区地图，一类是我们的GIS地图，通过显示地理区域上的数据，使用地图作为背景，通过图形的位置来表现数据的地理位置，通常来展示数据在不同地理区域上的分布情况。GIS地图还可以通过定位、放大缩小的特性来展示咱们的事件或者事务对象的真实情况。

五、大屏项目落地的9个步骤

这里亿信华辰，将大屏项目的落地划分为9个步骤：

1.梳理业务需求与使用场景

大屏设计要避免为了展示而展示，排版布局、图表选用等应服务于业务，所以大屏设计是在充分了解业务需求的基础上进行的。

那什么是业务需求呢？业务需求就是要解决的问题或达成的目标。设计师通过设计的手段帮助相关人员达成这个目标，是大屏数据可视化的价值所在。

整体项目是利用大屏设备进行相关数据及图表展示，我们预想将项目应用的场景分为两种情况：

（1）专业展示：参与商务活动、分享或为某些团体进行讲解及展示使用。

（2）普通展示：主办公区域或前台大厅实时数据展示。通过应用场景，还可以进一步将用户进行区分。比如：

将场景和用户进行分类后，就可以进一步根据他们的需求，进行需求可视化大屏的整理。

2.根据业务场景抽取关键指标

关键指标是一些概括性词语，是对一组或者一系列数据的统称。一般情况下，一个指标在大屏上独占一块区域，所以通过关键指标定义，我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块，如图所示，确定关键指标后，根据业务需求拟定各个指标展示的优先级（主、次、辅）。

一般情况下，主要指标位于屏幕中央，多为动效丰富的地图或翻牌器；次要指标位于屏幕两侧多为各类图表；辅助指标的补充信息可不显示或显示于副屏或鼠标经过显示。以学校校情大屏为例：这里的关键指标是教学经费投入、教学用房面积、多媒体教室座位等。

3.确定指标分析维度

同一个指标的数据，从不同维度分析就有不同结果。很多小伙伴做完可视化设计，发现可视化图形并没有准确表达自己的意图，也没能向观者传达出应有的信息，可视化图形让人困惑或看不懂。出现这种情况很大程度就是因为分析的维度没有找准或定义的比较混乱。

4.选定可视化图表类型

当确定好分析维度后，事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。选定图表注意事项：易理解、可实现

（1）易理解：可视化设计要考虑大屏最终用户，可视化结果应该是一看就懂，不需要思考和过度理解，因而选定图表时要理性，避免为了视觉上的效果而选择一些对用户不太友好的图形。

（2）可实现：我们需要了解现有数据的信息、规模、特征、联系等，然后评估数据是否能够支撑相应的可视化表现。

5.了解物理大屏，确定设计稿尺寸

大屏一般分辨率比较高，如果不事先确定物理大屏尺寸，设计稿设计出来的效果被投放到大屏上就会有偏差失真。一般情况下，确定设计稿尺寸需要分两种情况：

（1）当投屏电脑与与大屏系统尺寸比例、分辨率一致时，设计稿的尺寸、分辨率以投屏电脑为准；

（2）当投屏电脑与与大屏系统尺寸比例、分辨率不一致时，设计稿的尺寸、分辨率以物理大屏为准；

这里还需要注意的是：若物理大屏分辨率过高，可进行分辨率减半设计，但一般我们也不建议大屏用自适应方式，如果是自适应，系统就会按各自模块的宽高比先计算实际值，一旦大屏内容布局较多或指标计算复杂，则会非常影响大屏计算性能和实时分析能力。

6.页面布局与划分