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

数据可视化大屏的

应用与落地实践

小亿直播数据可视化的基本概念可视化设计的5个原则大屏项目落地的9个步骤数据可视化的难点可视化图表的选择多个行业大屏案例展示CONTENTS目

录563241

1数据可视化的基本概念开放性探索

宏观的可视化求证视觉探索日常数据

可视化探索型数据型概念型陈述型创意挖掘概念描述为了更形象地表达数据内在信息和规律

，促进数据信息的传播和应用

。大屏数据可视化是以大屏为主要展示载体的数据可视化设计

，也是当前可视化领域的一项热门应用，通常可以分为信息展示类

、数据分析类及监控预警类

。数据可视化大屏，有两个要点：一是展示效果的酷炫

，二是展示数据之间的层次关系

。好的数据可视化大屏是布局

、色彩

、图表

、动效的综合运用

。

数据可视化的定义数据可视化是把相对复杂

、抽象的数据通过可视化的方法以人们更容的形式展示出来的一系列手段

。数据可视化是监控预警类数据分析类信息展示类化繁为简

，

便于理解数据可视化能将不可见的数据现象转化为可见的图形符号，

能

将错综复杂

、看起来没法解释和关联的数据

，建立起联系和关

联

，发现规律和特征，

获得更有商业价值的洞见和价值

。

可视化有哪些好处？发现新趋势

、

新机遇企业收集到的消费者行为的数据，

可以为适应性强

的公司带来的机遇

。通过使用大数据可视化

来监控关键指标，

更加阳光透明，

及时发现问题第

一时间做出应对

。增强数据交互数据可视化的主要好处是它及时带

来了风险变化

。但与静态图表不同，交互式数据可视化鼓励用户探索甚

至操纵数据来发现其他

“秘密

”。这就为使用分析提供了更好的意见

。321

2数据可视化的难点1.准

备

工

作数

据

可

视

化的

最

大

难

点

在

数

据

可

视

化

之

前的

准

备

工

作

—

数

据的

获

取

与

整

理。2.对

数

据

需

具

备

敏

感

性面

对

复

杂的

数

据、信

息

，怎

么

找

到

数

据

之间的

逻

辑

关

系

至

关

重

要。3

.

用

简

洁

易

懂

的

图

表

展

示

复

杂

的

数

据

关

系阅读者需要在极短的时间内掌握了解各类图表所传递的数据关系4.选

择

合

适

的

图

表从千变万化的各类图表中

，

选出适合自己数据的图表类型是数据可视化的

关

键。5.

图

表

细

节

处

理图

表

细

节的

处

理需

要

综

合

考

虑

多

方

面因

素

—

刻

度

标

记

类

型、

间隙、

刻度标签位置、数据类型、

小数位、是否千分位、颜色取值、

图例位置、图上标签、

图表标题、

备注文字说明等等。

数据可视化的难点

3可视化设计的5个原则1.

目

标

明

确3.简

洁

、

美

观

可视化设计的5个基本原则4.懂

得

利

用工具5.实

事

求

是2.了

解

你

的受众不可规避

“

异常数据”

，

真实反映业务数据

，

才可

能帮助我们发现问题

，

掩

盖问题只会造成更大的问

题

。得心应手的数据可视

化工具会使数据可视

化的工作事半功倍。图表主要作用是传递

信息

，

追求过分漂亮

只会使徒增无用功。如

果

不

是

为了

与目

标

受众清楚地沟通

，

数

据可视化是无用的。并不是所有的数据都

需要数据可视化。谁搜集过这份数据

，来自哪个业务系统？0501可视化了。所以做数据可视化之前先要明确这个数据可视化的分析目的到底是什么？

你打算通过数据向用户讲述怎

样的故事

，

数据可视化之后又在表达什么？

通过这些数据

，

能为你后续的工作提供哪些指导？

原则1：

目标明确03我们想从数据中了解什么？也就是数据分析的要

解决什么问题？07数据量是否足够完成这次准确的分析？数据可视化是借助图形化的分析过程

，

来解决业务上某

一

问题或者发现某

一

问题

，

当数据脱离了业务

，

就没有必要数据要解决的业务内容的主题是什么？这个数据可视化的数据如何获取？这份业务数据是什么领域的？这份业务数据是什么时间的？060204地查看和处理数据。考虑到受众对数据所呈现的基本原则的熟悉程度

，

以及他们是否了解这些可视化的主要背景

、这些图表是否定期重复使用等等

。

原则2：

了解你的受众如果不是为了与目标受众清楚地沟通

，

数据可视化是无用的。它应该与受众的专业知识兼容

，

并允轻松快速图表主要作用是传递信息

，

追求过分漂亮只会使徒增无用功。图表的基础美感会给人带来视觉上的享受

，

图表中的坐标轴、形状、线条、字体、标签、标题排版等元素是都会影响人的视觉效果

，

因此

，

这些图表元素经过合理的搭

配会给整个数据可视化作品加分

，

比如图表的色彩

，

如果搭配合理

，

会使整个图表看起来更加生生动

，

同时也会加

深阅读者的记忆

。1.字体的使用与选择3.颜色搭配5.图表类型多样化，注重对比2.背景色使用4.同类型的数据排列尽量均匀6.保持视觉一致性

原则3：

简洁

、美观字体字体大小

：字号不小于12号字

，可以用于图表的标注

，数据信息建议14号字以上,大屏字体

可以适当的更大一些

。灵活的字体：

宽松的字母间距（字母之间的间

距应小于字偶间距）和合适的中文字间距

。中西文间隔：

中西文混排时

，要注意中文和西文间的间隔

，一般排版的情况都是中文中混排

有西文

，所以需要在中西文间留有间隔

，帮助

（1）字体的使用与选择字体优先使用系统默认字体，

需要嵌入字体时考虑字体的可识别性

、与当前设

计风格是否融合

、是否可免费商用

。选择字母容不会产生奇异的字体更有利于用于数据可视化设计

。用户更快速的扫视文字内容

。使用选择颜色是可视化大屏中影响画面效果的重要元素。使用不当

，

会让读者分心。背景色的选择与可视化展示的设备相关

，分为深色、浅色、彩色。小屏幕背景色选择范围就比较广

，

浅色、彩色、深色均可以做出很好的设计。相比之下

，浅色背景更适合展示大量的数据信息

，

因为在浅色底上数据图表的识别度比较高。而深色、彩色背景更适合渲染简单的数据

，

用于烘托气氛

。在大屏设备中普遍用深色作为背景色

，

以减少屏幕拖尾

，

观众在视觉上也不会觉得刺眼。因此大屏的图表配色需要以深色背景为基础。保证可视化图的清晰辨识度

，

色调与明度变化需要有跨度

。I

（2

）背景色使用深色背景示例浅色背景示例I

（3

）颜色搭配如果颜色过于相似（例如浅灰与更浅的灰）

，

人们难以发现两者间的区别。相反

，色彩明度与饱和度差异显著、对比鲜明

，

尽量避免使用邻近色配色

。也要避免强烈的对比色

，

例如红配绿或蓝配黄

。政府单位能源行业制造行业金融行业电商行业医药行业I

（

4

）

同类型的数据排列尽量均匀使用用

一种颜色去表达相同类型的数据

，

在图表中使用自然增量（0、5、10、15），

而非不均匀的增量（0、3、5

、16）排序要均匀

。可视化让数据对比更直观

，

但是仅仅把两组图表紧挨着放在

一起并不能达成这个目标

，

甚至更令人费解

，

所以要多（

5）

图表类型多样化，

注重对比用不同类型的图片进行对比

。像的视觉风格以及尺寸

一致

，

和整体风格保持

一致。按钮的风格要统

一

，

要么都是填充式的

，

要么都是中空式的

，

要么都是棱角分明

，

要么都是圆润光滑。例如下图

，

某公安行业可视化大屏（部分）

是个很好的例子

，

配色统

一

，风格

一致

。I

（6

）保持视觉一致性保持整体色彩感觉

一致

，

配色风格

一致

，

不同颜色之间搭配协调。不要

一

会黑白配

，

一

会又来个红绿配。图标、图酷组件和3D特效

，

让数据

“

跃然屏上”，

得到更形象、更直观的可视化呈现

。在总体上遵循以下原则：>

（

1

）

准确性：

数据可视化需考虑数据的准确性，清晰度和完整性

。以不失真的方式呈现信息，

减少用户的思考成本

。>

（

2

）

实用性：

强调数据需要实用，

可以帮助用户使用强调探索和比较的上下文和启示来导航数据，比如探索比较数据，

预警数据，

浏览数据

。>

（

3

）适应性：

能适应多设备

、多场景

。可根据不同设备大小调整可视化，

同时预测用户对数据深度

、复杂性和模态的需求

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

，

比如

，

亿信华辰的数据可视化平台

—

—

酷屏。酷屏是亿信华辰自主研发的新

一

代数据可视化产品

，

可灵活、快捷地制作各类交互式常规屏和大屏可视化

，

内置百余种炫1I原则4：

懂得利用工具问题只会造成更大的问题。若数据很庞大

，

也不某省市去自认为不重要的数据部分

，

找到核心数据指标和异常数据

，

重点展示核心数据指标

，

分析异常数据的问题原因

，

最后给出合理、准确的数据分析结论

。

原则5：

实事求是数据可视化的结果

一

定要实事求是

，

不可规避

“

异常数据”，

真实反映业务数据

，

才可能帮助我们发现问题

，

掩盖

4可视化图表的选择信息的印象。但如果数据可视化做得不好

，

反而会带来负面效果

，

所以更需要我们选择合理的数据可视化方法

，

高效传达数据。接下来

，

我们

一起看看不同图表的不同使用场景

。

可视化图表的选择数据可视化是

一个展现复杂信息的强大武器。通过可视化信息

，

我们的大脑能够更好地抓取和保存有效信息

，

增加通常用于展示不同步分类间的数值对比

，

不同时间点的数据对比

。

1.

比较类可视化的方法显示值与值之间的不同和相似之处。使用图形的长度、宽度、位置、面积和颜色来比较数值的大小

，I

2.

占比类可视化的方法显示同

一维度上占比关系I

3.

区间类可视化的方法显示同

一维度上值的上限和下限之间的差异。使用图形的大小和位置表示数值的上限和下限

，

通常用于表示数据在某

一个分类（时间点）

上

的最大值和最小值

。可视化的方法显示数据之间相互关系

，

使用图形的嵌套和位置表示数据之间的关系

，

通常用于表示数据之间的前后顺序

。

1I4.关联类

5.趋势类可视化的方法分析数据的变化趋势。使用图形的位置表现出数据在连续区域上的分布

，

通常展示数据在连续区域上的大小变化的规律

。I

6.时间类可视化的方法是展示数据随时间的变化趋势

。可视化的方法显示地理区域上的数据

，

使用地图作为背景

，

通过图形的位置来表现数据的地理位置

，

通常来展示数据在不同地理区域上的分布情况。

II

7.地图类

5大屏项目落地的9个步骤73

大屏项目落地的9个步骤整体细节调优与测试页面定

稿

与

开

发86页面布局与划分根据业务场景抽取

关键指标了解物理大屏

，

确定设计稿尺寸梳理业务需求与使用场景选定可视化图表类型291确立指标分析维度可视化设计可视化大屏45大屏设计要避免为了展示而展示，排版布局

、图表选用等应服务于业务，所以大屏设计是在充分了解业务需求的基础上进行的

。那什么是业务需求呢？业务需求就是要解决的问题或达成的目标

。设计师通过设计的手段帮助相关人员达成这个目标，是大屏数据可视化的价值所在

。整体项目是利用大屏设备进行相关数据及图表展示

，我们预想将项目应用的场景分为两种情况：1.专业展示：参与商务活动

、分享或为某些团体进行讲解及展示使用

。2.普通展示：

主办公区域或前台大厅实时数据展示

。通过应用场景，还可以进一步将用户进行区分

。.即无论数据在何处展示

，其对数据都有浓厚的兴趣

，会去驻足停留

，仔细观看及

分析数据

。.即匆匆过往的人群

。这部分用户可能只会在屏幕前短暂停留

。专业用户.即参加商务活动

、分享等，

需了解具体数据内容的用户

。此类用户会较为细致的

查看每项数据

1.梳理业务需求与使用场景用户分类兴趣用户普通用户010203●

（

1

）主：

主要指标位于屏幕中央，多为动效丰富的地图或翻牌器；●

（

2

）次：

次要指标位于屏幕两侧多为各类图表●

（

3

）辅：

主要指标的补充信息可不显示或显示于副屏或鼠标经过显示指标定义

，我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块，如图所示，确定关键指标后，根据业务需求拟定各

个指标展示的优先级（主

、次

、辅）

。

2.根据业务场景抽取关键指标关键指标是一些概括性词语，是对一组或者一系列数据的统称

。一般情况下，一个指标在大屏上独占一块区域，所以通过关键教育大屏关键指标示例同一个指标的数据，从不同维度分析就有不同结果

。很多小伙伴做完可视化设计，发现可视化图形并没有准确表达自己的意图，也没能向观者传达出应有的信息，可视化图形让人困惑或看不懂

。出现这种情况很大程度就是因为分析的维度没有找准或定义的比较混乱

。维度是观察数据的角度和对数据的描述

。维度可以用时间

、数值表示，也可以用文本，文本常作为类别

。数据分析的本质是各种维度的组合

。维度：记录对象的属性

、状态

、特征，一般表现为字符型或分类数值型字段；度量：记录对象的数值型测量，一般表现为数值型字段；维度

指标

3.确定指标分析维度可视化设计要考虑大屏最终用户，可视化结果应该是一看就懂

，不需要思考和过度理解

，因而选定图表时要理性，避免为了视觉上的效果而选择一些对用户不太友好的图形

。可实现我们需要了解现有数据的信息

、规模

、特征

、联系等，然后评估数据是否能够支撑相应的可视化表现；

4.选定可视化图表类型当确定好分析维度后，事实上我们所能选用的图表类型也就基本确定了

。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了

。选定图表注意事项：

、可实现21确定设计稿尺寸需要分两种情况：（

1

）当投屏电脑与与大屏系统尺寸比例

、分辨率一致时，设计稿的尺寸

、分辨率以投屏电脑为准；

（

2

）当投屏电脑与与大屏系统尺寸比例

、分辨率不一致时，设计稿的尺寸

、分辨率以物理大屏为准；注意，若物理大屏分辨率过高，可进行分辨率减半设计大屏一般分辨率比较高，如果不事先确定物理大屏尺寸，设计稿设计出来的效果被投放到大屏上就会有偏差失真

。一般情况下，5.了解物理大屏，

确定设计稿尺寸名称布局要点应用场景优势常规布局左中右

。中间为主要指标，

占据页面较大面积；

左右

两边为次要指标

，面积较小

，较集中

，展现指标数量较多多数适用

。如教育

、房地产

、政务等行业的数据

分析展示

，需要展示多项指标

，并突出某些关键

指标时适用清晰展现较多的指标

，主次分明左右布局重点区域扩大

，左或右放置少量指标

，不大量

指标常用于地图展示

、三维模型展示，将重点区域扩

大

。如智慧园区

、智慧工厂

、某省市等能够展现更多的图像区域

，三维模型

的立体感更强均等布局按照1：

1：

1平均分配每一块的展示区域常用于展示平级指标无明显主次区分的指标需要展现时，

划分区域

，在视觉上不会过多干扰，

平级展现时适用故事布局没有明显的分割区域常用于讲述一个完成的故事线数据连贯性强，

当指标间有关联关系

时，可以有逻辑地递进去展现君臣布局中间大

，两边小

。中间为主要指标，

占据页面较大面积，通常放置三维大图；

左右两边为次要指标

，面积较小，较集中，展现指标较多需要展示多项指标，并突出某些关键指标或三维

图像时适用图像更大更清晰立体，指标主次分明纵向布局由于屏幕的原因

，将页面分割为上中下部分，

中间区

域较大

，上下较小，重点突出中间区域在一些特殊的展会上使用很好的适配特殊场景下的屏幕，主次

分明，突出重点繁星布局布局较为随意

，满屏都是各种各样的指标

，尽可能多

地展现常用于日常运维

、监管人员使用展现指标多而全面尺寸确立后，接下来要对设计稿进行布局和页面的划分

。这里的划分

，主要根据我们之前定好的业务指标进行，核心业务指标安排在中间位置

、占较大面积；其余的指标按优先级依次在核心指标周围展开

。一般把有关联的指标让其相邻或靠近，把图表类型相近的指标放一起，这样能减少观者认知上的负担并提高信息传递的效率

。

6.页面布局与划分①布局要点：

左中右

。中间为主要指标，

占据页面较大面积；

左右两边为次要指标，

面积较小，

较集中，

展现指标数量较多②应用场景：

多数适用

。如教育

、房地产

、政务等行业的数据分析展示，

需要展示多项指标，

并突出某些关键指标时适用③优势：

清晰展现较多的指标，

主次分明①布局要点：

重点区域扩大

，左或右放置少量指标，

不大量指标②应用场景：

常用于地图展示

、三维模型展示

，将重点区域扩大

。如智

慧园区

、智慧工厂

、某省市等③优势：

能够展现更多的图像区域，

三维模型的立体感更强I

（1）标准大屏左右布局常规布局①布局要点：

按照1：

1：

1平均分配每一块的展示区域②应用场景：

常用于展示平级指标③优势：

无明显主次区分的指标需要展现时

，划分区域

，在视觉上不会过多干扰，

平级展现时适用I

（2

）超大屏①布局要点：

没有明显的分割区域②应用场景：

常用于讲述一个完成的故事线③优势：

数据连贯性强，

当指标间有关联关系时，

可以有逻辑地递进去展现均等布局故事布局君臣布局①布局要点：

按照1：

1：

1平均分配每一块的展示区域②应用场景：

常用于展示平级指标③优势：

无明显主次区分的指标需要展现时

，划分区域

，在视觉上不会过多干扰，

平级展现时适用I

（2

）超大屏①布局要点：

由于屏幕的原因

，将页面分割为上中下部分，

中间区域较

大，

上下较小，

重点突出中间区域②应用场景：

在一些特殊的展会上使用③优势：

很好的适配特殊场景下的屏幕，

主次分明，

突出重点①布局要点：

布局较为随意，

满屏都是各种各样的指标，

尽可能多地展现②应用场景：

常用于日常运维

、监管人员使用③优势：

展现指标多而全面纵向布局繁星布局I

（3

）异形屏根据定义好的设计风格与选定的图表类型进行合理的可视化设计

。目前来讲大屏可视化主要有指标类信息点和地理类信息点两大可视化数据

。指标类信息点可视化效果相对简单

，而地理类信息点一般可视化效果酷炫，但是开发相对困难

，需要设计师跟开发多沟通的

。地理类信息一般具有很强的空间感

、丰富的粒子

、流光等动效

、高精度的模型和材质以及可交互实时演算等特点，所以对于被投电脑

、大屏拼接器等硬件设备的性能会有要求，硬件配置不够的情况下可能出现卡顿甚至崩溃的情况，所以这点也是需要提前沟通评估的

。

7.可视化设计可视化大屏的设计风格主要根据行业类型

、客户喜好

、具体展示指标整体搭配，但总体一般以深色为主

。数据是核心，场景是大数据呈现的承载体●

场景使用具有金属质感的深青灰，符合理性的

、冷静的

、智能化产品的个性●

数据色彩使用透明

、发光

、具有未来感的高亮色，和场景形成强对比，使数据更为突显

、更具吸引力●为了强化客户对于风险的感知，通过颜色区分数据的风险等级

，更直观的传达数据的含义

。如：

高风

险的使用红色

，红色让人联想到危险

、警报

。I

（1

）定义设计风格主色调强调重点内容

，以引导用户能够清晰

、明确

、迅捷的识别重要信息

。图表需要的颜色较多时，建议最多不超过12种色相

。通常情况下人在不连续的区域内可以分辨6~12种不同色相

。过多的颜色对传达数据是没有作用的，反而会让人产生迷惑

。金融行业司法行业电商行业保险行业医疗行业教育行业

（

2）可视化颜色搭配色彩是最能给人直观感受的

，能够直接的牵引用户去寻找有效信息

。整体色彩确定后，便运用色彩来划分信息的层级关系，用税务行业制造行业整个项目中有据都是实时变化的

，为了减少数据变化刷新时的突然性

，动效设计必不可少

。在整个动效设计的过程中，除过场动画

、数据的变化外

，动效还肩负起增添空间感

、平衡画面和整合信息的作用

。

但是在增加动效的同时，仍需考虑服务器在承载大量数据涌入的同时，是否能够承载较多的动效，分析画面与数据量，对动效部分进行适当取舍

。使动效不必喧宾夺主，

明确画面中的重点进行展示

。I

（3

）动效设置析指标后就已经开始进行了

，而我们当前的工作是把数据接入到前端，然后用设计的样式呈现出来

。●

（

1

）之前确立的布局在放入设计内容后是否依然合适；●

（

2

）确立的图表类型带入数据后是否仍然客观准确；●

（

3

）根据关键元素

、色彩

、结构

、质感打造出的页面风格是否基本传达出了预期的氛围和感受；●

（

4

）已有的样式

、数据内容

、动效等在开发实现方面是否存在问题；●

（

5

）大屏是否存在色差

、文字内容是否清晰可见

、页面是否存在变形拉伸等现象

。1

8.页面定稿与开发实际上页面开发阶段并不是到了这一步才进行，这里说的页面开发仅指前端样式的实现

，实际上后台数据准备工作在定义好分（

1

）视觉方面的测试：

关键视觉元素

、字体字号

、页面动效

、图形图表等是否按预期显示

、有无变形

、错位等情况

。（

2

）性能与数据方面的测试：

图形图表动画是否流畅

、数据加载

、刷新有无异常；页面长时间展示是否存在奔溃

、卡死等情况；后台控制系统能否正常切换前端页面显示

。19.整体细节调优与测试这部分是指页面开发完成后，将真实页面投放到大屏进行的测试与优化

。这里主要有两部分工作：

6多个行业大屏案例展示

1某省市某金融集团金安全在可控范围内，提高收益

。通过大屏展示投资情况

、投资金融

、投资客户数

、历史盈利等信息向外界彰显公司形象及整通过数据可视化的展现形式，使得投资项目的收益及变化态势一

目了然

，实现无人工的节点监控跟踪，最大程度保证用户的资体实力

。规划

、财务

、教务

、人事以及全校核心数据等11个方面全面展示有效信息，并且横向覆盖各学院及各部门的数据信息和工作内容

。通过对接校方数据中心保证数据事实的准确性

、及时性

，为管理团队科学决策提供了有效的数据支撑

。

2某省