zoukankan      html  css  js  c++  java
  • 如何设计出高端大气、有黑科技感的可视化大屏?

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

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

  • 相关阅读:
    windows的80端口被占用时的处理方法
    Ansible自动化运维工具安装与使用实例
    Tomcat的测试网页换成自己项目首页
    LeetCode 219. Contains Duplicate II
    LeetCode Contest 177
    LeetCode 217. Contains Duplicate
    LeetCode 216. Combination Sum III(DFS)
    LeetCode 215. Kth Largest Element in an Array(排序)
    Contest 176 LeetCode 1354. Construct Target Array With Multiple Sums(优先队列,递推)
    Contest 176
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13325753.html
Copyright © 2011-2022 走看看