如何设计出高端大气、有黑科技感的可视化大屏?

自作多情 提交于 2019-11-28 07:22:02

只要一提起可视化,很多人第一个想到的,肯定就是火得一塌糊涂的大屏了。

从我身边很多从事可视化的朋友来看,越来越多的公司都将可视化大屏作为企业数据工作展示的“高级手段”和“对外平台”,这就苦了这些做大屏的人,甚至造成很多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就完全没有涉及编程,换成是数据小白也一样能够做出高端大气的大屏。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!