企业级数据大屏设计如何实现,div+html+echarts

大屏设计是最近比较流行的概念,一般按照功能来分有几种:

1. 可交互的触摸屏,大多运用在互动教学课程或者报告演示现场,用户可结合交互操作来阐述具体内容。设计师需要对交互形式和传达内容作统一思考设计。

 

2. 为某些特定的大型活动设计的专属大屏,比如说产品发布会、双11购物狂欢节。这类大屏需要结合音乐、场景、动效、灯光等多方面元素统一烘托,最终效果酷炫震撼,所有展现的内容都是定制化设计和开发的。

 

3.专为企业提供服务的可视化数据大屏,这一类大屏在商业中有其应用价值,它的特性是数据展示能力强,用一些较为常见的图表,如柱状图、饼图等来展现业务情况,使客户快速读懂数据背后的含义。

 

企业级数据大屏设计如何实现,div+html+echarts

 

数据大屏为客户提供了政务、电商、客服、安全、金融等多个应用场景。

 

企业级数据大屏设计如何实现,div+html+echarts

 

数据大屏和数据报告的区别是什么?

先来看一下业务场景中的报告和大屏是如何展现的:

报告

 

企业级数据大屏设计如何实现,div+html+echarts

 

大屏

 

企业级数据大屏设计如何实现,div+html+echarts

1.用户

数据报告的用户一般是数据分析师,分析师制作完报告,会把结果反馈给业务人员或者公司高层,为决策提供参考。而大屏的用户会更广,整个企业内的有关人员甚至所有员工都能够看大屏。

 

2.交互

一份完整的报告一般包括详细的分析过程,用户无法在不交互的情况下了解完整数据,比如说筛选、钻取、查看详情等等,都是很常用的分析功能。而大屏依靠视觉、动效,来传递有效信息,用户并不需要交互即可直观迅速了解内容。

 

3.时间

报告偏向展示一段时间内的数据,某些企业甚至能通过报告的日期筛选查询到从接入系统开始所有的历史数据。大屏更多起到的是监测职能,反馈的是实时信息,显示的是当下的数据。

 

4.展示

报告的阅读场景决定了它展示的侧重点在“精确”和“完整”,要达到这两点,不可避免有时候会牺牲一些视觉表现。例如:数据项过多的情况下,视觉感受比较拥挤。

 

企业级数据大屏设计如何实现,div+html+echarts

 

对于大屏来说,即使只有当下的数据,用户也很难在短时间内get到关键,所以重要的是如何在有限的时间内传递出有效信息,即如何迅速提炼出重点数据并展示,即使这样会牺牲数据的完整性。

如果用一句话总结数据大屏的设计的关键:重点突出大于面面俱到。

 

大屏产生的过程

大部分人制作大屏的方式,只是一种图表的堆砌,先把需要的单个图表做完,然后简单地罗列组合在一起,最后改变一下整体颜色,就完成了。整个过程虽然不能说错,但并没有把大屏的优势发挥出来。一个完整的大屏设计过程应该包括以下步骤:

 

企业级数据大屏设计如何实现,div+html+echarts

 

1.提炼信息

首先,我们要对数据进行分析,得出自己的结论。同样一份数据,因为不同的角度和思考方式,可能得出的观点很不一样。例如同样都是关于销售额的数据,有人希望知道各地销售额对比,有人希望了解销售额排名前五的商品类型,拿来数据就画图会让设计显得杂乱无章,读者也不知道要读什么数据。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpgfgx.html