如何设计出高端大气、有黑科技感的可视化大屏？
只要一提起可视化，很多人第一个想到的，肯定就是火得一塌糊涂的大屏了。
从我身边很多从事可视化的朋友来看，越来越多的公司都将可视化大屏作为企业数据工作展示的“高级手段”和“对外平台”，这就苦了这些做大屏的人，甚至造成很多IT人最怕听到老板的一句话就是：“给我做一个高端大气的可视化大屏！”
其实，可视化大屏不仅是要在视觉上美观炫酷和与数据契合的科技感，更重要地是突出重点数据，做到美观性与实用性共存的效果。我之前也曾经在一个团队里为公司做过可视化大屏，经历了与需求方的不断交涉、修改，最终做出了几张比较满意的大屏：
FineReport大屏
FineReport大屏
FineReport大屏
这样的大屏不仅拥有着高端的科技感，而且都是经过了多次的版面设计和修改，这次大屏效果在同行业内部交流过程中反响不错，在这次大屏的开发过程中，我亦总结了一些独家的大屏技巧略作分享。
做大屏的一点经验分享
首先要说一下我们制作大屏使用的工具——FineReport 10.0，是采用最新的可视化大屏图表，默认采用深色背景+荧光配色，非常符合浸入式的大屏体验；而且能根据图表类型和数据要求，提供 '轮播'或'刷新'两种动画形式，能够满足不同场景下的业务需求。
同时FineReport10.0最厉害之处，在于它基于webgl等技术，对动画不断优化调整，能让做出来的效果更加简洁炫酷。
通用的大屏设计原则
一个大屏的设计主要可以分为两块，一个是数据指标的选用，一个是与这些指标对应的组件的使用。
其中我们首先要明确要分析的指标有哪些：
- 比率类指标：指两个值相除后的指标，如销售额完成率，产品达标率等。
- 时间序列类指标：指按照时间粒度排序的指标，如分月销售额统计等。
- 数字总计类指标：表现形式为一个总的数字，如销售总额，用户总量等。
- 文本类指标：这一类是以纯文本展示的指标，如词云图，人员名单等。
- 子部分布类指标：这一类指标是指将一个主要指标按照不同地区，不同分公司，不同产品线等子部分布展示的指标，如地图和各分公司销售额分布图等。
明确了指标之后，就要选择这些指标对应的组件，一般来说要遵循下面几个原则：
1、大屏指标在8-12个为宜
FineReport大屏
大屏上的展示空间是有限的，我们不能将所有的数据都堆到大屏中，领导想要看到的也只是一些关键数据，因为大屏上的指标数量最好在8到12个之间，这也是数据指标数量的主流配置，这个数量的时候，大屏整体看起来不空也不挤。
少于8个的话，大屏就会显得空旷，而且也不经济；多于12个的话，这么多的数据指标挤在在一个张大屏上，要做到井然有序，确实很考验设计者的功力。
但是如果数据指标真的很多，实在是不能删减，那么我建议使用报表块，将这些数据整合到一起。这样，多个数据指标就可以在一个报表里面展现出来，不用占用很多空间。比如像下面这样：
2、比率类、数字类和子部分布类指标要合理布局比率类、数字总计类和子部分布类指标就像食物中的碳水化合物、脂肪和蛋白质，既要保证摄入量，也要营养均衡。
比率，数字总计和子部分布这三类指标在每张大屏中几乎必然出现，并且出现的次数也很多，次数分布也比较均匀，究其原因是这样的：
一般大屏都需要有数字总计类的指标，而且往往是核心指标，这样方便领导知道核心指标目前的总体状况。但是仅仅一个数字并不能反映出当前指标的完成情况，所以也需要有比率指标，它反映了部分占总体的占比。
另外，比率也只能体现一个占比情况，要想知道总计类指标的各个组成部分的具体情况，还需要子部分布类指标，例如用地图展示出全国营业额中各个地区的营业额情况。
所以大家要善用这三类指标，都要有，而且数量要均衡。
3、时间序列指标、文本指标不可过量
时间序列类指标和文本类指标就像食物里的微量元素，是必须摄入的营养，但是不可过量。
对于文本类的指标，因为领导们看大屏就是想摆脱枯燥的传统表格类报表，如果在大屏上还是大量出现，领导肯定是要发火的。
而时间序列指标的出现概率甚至跟数字总计类指标的概率一样，这是因为时间序列类的指标可以反应某个数据随着时间变化的趋势，这是相当直观而有意义的。不过，虽然我们可以通过季度，月度和日这些不同的粒度将一个数据指标用多个图表展示，但是这样并没有意义，选择最合适的一个粒度就好，多了没有必要。
4、高频组件尽量减少重复
报表块、饼图、柱形图、仪表盘、折线图、条形图和地图这几个组件出现的频率都非常高，可以说是大屏图表组件里面的常规武器了。
很多同学可能都觉得这些组件大家都用烂啦，这有什么可说的啊？
我本来也这样以为，但是看完了所有的这些经典大屏后，我发现自己还是tooyoung,too simple！原来这些常见的组件也可以千变万化，玩出花来，比如地图可是是这种：
仪表盘也可以做成这种：
还有这些
其他的组合图，饼图，折线图等等也有好多千变万化的玩法，大家在以后做大屏的时候可以多尝试变换一个样式，可能会有意想不到的效果哦。
5、使用3D效果
通过设计师设计的图片作为背景来拓宽图表样式，实现3D柱形图、3D圆环图等效果，设计师设计自定义图片，图片为具有一定特效的图表，把数据去掉。
或者，可以通过上文提到的报表块叠加，将图片作为底层背景，上层叠加数据，即可实现自制图表效果。
6、自定义地图
通过自定义图片作为地图背景，重新描点形成json文件，实现地图的3D倾斜效果。
- 设计师设计自定义地图，输出地图图片（压缩到1M以内最好，不然加载太慢）
- 设计器点击服务器->地图数据，进入地图编辑页面，自建自定义地图，放入压缩好的图片
- 对地图描点，根据实际业务情况描点（可按省份描也可按大区描）
- 保存json文件，重启设计器即可在地图图层中选到自定义地图。
总结
其实大屏的设计一方面需要不断积累经验，另一方面也需要善用大屏工具，一个好的可视化工具能够让你做起大屏来得心应手，像我这一次用的FineReport就完全没有涉及编程，换成是数据小白也一样能够做出高端大气的大屏。
如何设计出高端大气、有黑科技感的可视化大屏？相关推荐
- 数据可视化demo_火出圈的大屏你真的会做吗？这才是老板最爱的可视化大屏
人们一提到数据可视化这个词,很多人大脑会直接闪过两个字,那就是"火"出圈的大屏. 数据大屏,对内是企业运维透明化的看板.业务决策的驾驶舱,对外是展现运营形象的窗口.它 可是,你真的 ...
- 怎样用迅捷画图绘制高端大气的思维导图
绘制思维导图不仅是在工作中在学习中也有很大的帮助,可以让我们的思路更加的清楚明了,但是有的同事绘制的思维导图不管在外观还是内容都是十分精彩的,那怎样操作才可以制作出高端大气的思维导图呢?下面是分享的操 ...
- 高端大气述职报告PPT模板
模板介绍 精美PPT模板设计,高端大气述职报告PPT模板.一套述职报告幻灯片模板,内含灰色多种配色,精美风格设计,动态播放效果,精美实用. 一份设计精美的PPT模板,可以让你在汇报演讲时脱颖而出. 希 ...
- 数据可视化之设计经验分享：轻松三步教你学会制作数据可视化大屏思路
当看到屏幕上一个个炫酷,具有科技感的数据大屏时,很多人都会好奇这是怎么做出来的.自己在制作大屏时明明按着需求做了,可是做出来后总是觉得画面不好看,不够炫,感觉很糟糕. 那要如何才能设计那样的数据可视化 ...
- 数字孪生城市可视化大屏设计，智慧楼宇开源项目
纵观城市发展历史,技术的革命必然会带动城市内部的变革.当前,以数字孪生为代表的前言信息技术飞速发展,必然会使社会对数字城市的深度和广度有着更为清晰的认知.加快构建数字孪生城市管理平台,通过三维可视化大 ...
- 更好的设计 | 苹果cms10《 SKRN》自适应影视站绿色清新精品模板高端大气宽屏轮播
苹果cms10< SKRN>自适应影视站绿色清新精品模板高端大气宽屏轮播 可以拿来做影视站的经典侧栏样式模板.自定义幻灯,包含了专题.剧情.明星.留言页面等样式及全部功能 此款为私人10k ...
- word2vector数据集样式_这样做数据可视化驾驶舱，高端大气，一目了然，领导不点赞都难...
2020年了,数据可视化已经不是个新鲜词了,把数据以可视化图表的形式展示并没有多神奇,用Excel等传统的办公工具就可以轻松实现. 以前传统数据分析报告就是ppt里贴图表,再配上分析结论,这种形式的数 ...
- json符号解释大全_牛年汪姓男孩高端大气的名字大全
牛年汪姓男孩高端大气的名字大全 张桉宁起名分享 牛年汪姓男孩高端大气的名字大全:给男孩起名有很多的讲究,需要从多个方面考虑.牛年汪姓男孩如何起一个高端大气的好名字,是家长朋友们都十分重视的.给牛年的汪 ...
- 这样做数据可视化驾驶舱，高端大气，一目了然，领导不点赞都难
2020年了,数据可视化已经不是个新鲜词了,把数据以可视化图表的形式展示并没有多神奇,用Excel等传统的办公工具就可以轻松实现. 以前传统数据分析报告就是ppt里贴图表,再配上分析结论,这种形式的数 ...
最新文章
- Linux下进程通信知识点学习笔记（一）
- 你必须会的 JDK 动态代理和 CGLIB 动态代理
- python笔记2（函数 面向对象 文件编程 上下文管理器）
- sklearn 图片相似
- Mybatis映射文件动态SQL语句-01
- 升级glibc的影响_Java 11 升级：“债务”“危机”
- 面试官：不会看SQL执行计划，简历也敢写精通SQL优化？
- mysql 交叉统计_Mysql静态行列转换交叉查询
- 【Python】python学习笔记day1
- Cover开启投票是否对Yearn漏洞提供保险
- windows10上Eclipse运行MapReduce wordcount程序遇到的坑
- html 链接 vf,vfp 超链接
- 《HelloGitHub》第 52 期
- CADD课程学习（7）-- 模拟靶点和小分子相互作用 （半柔性对接 AutoDock）
- 遗传算法matlab_【优化求解】遗传算法解决背包问题
- JVM - 类加载器
- balabala视频格式转换器
- CDA数据分析师认证考试模拟题库
- ad域时间源配置_Windows Server 2008 R2 域控制器的时间同步配置
- 常用的cmd命令与Linux命令