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

所以在大屏设计之前,需要先和客户确认他们想要传达给目标用户的重点,这个重点是他们希望用户在读完这个大屏之后能够理解并记住的主要信息,很多公司都错误的认为,把多个数据塞进一个大屏中可以帮助提高公司的专业度,实际上这只能显示他们有很多数据。

为什么重点这么重要,试想一下,看大屏的人可能只会驻足在屏幕前一分钟,他们和大屏仅有的互动就是快速扫过整张图,在这一分钟内,到底能记住多少信息?设计师在每个设计环节都要牢牢记住这一点。

可以尝试着问客户两个问题:

(1)如果整个大屏只能展示一个最重要的信息,你希望是什么?

(2)你希望展现这些信息的理由是什么?通过客户的回答,你能了解他希望用户的关注点在哪里,从而提炼出设计重点。如果只有一个重点,放在最显眼的位置,如果有几个重点,尽量集中放置,吸引视觉焦点。

没有什么比加粗高亮数字更简单直接,保险大屏想传递的重心在于

(1)保费总额 。

(2)各地贡献的保费情况。

 

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

 

网络安全大屏,首先让用户通过直接的数字感知总体安全情况,其次详细查看当前攻击发生的源头和目的地。

 

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

 

整个客户服务的场景中,员工们是非常忙碌的,可能只有偶尔休息的间隙查看一下实时的服务情况,最希望传达给客服的信息集中设计在左半屏,

(1)呼叫量。

(2)满意度。其他信息的优先级相对较低。

 

 

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

 

2.选择图表

明确需要表达的信息和主题后,需要根据这个信息的数据关系,决定选择何种图表类型,以及要对图表作何种特别处理。

图表种类各式各样,有些图表很难界定是属于哪种关系,我见过讲图表关系和图表功能比较好的平台是Ant v的墨者学院,有兴趣的小伙伴可以了解一下。

 

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

Ant v把数据关系分成了9个大类,当你确定了某个数据关系类型后,就可以根据该数据的使用场景查找出相对应的图表和使用建议,并在其中进行选择。

以一份购物城数据为例:

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

 

3.制作图表

 

当确定了要使用哪些图表做图后,开始进入制作流程,影响最终图表展现效果的元素一般分为两个层面:

 

非数据层:

 

不受数据影响样式的元素,比如说背景、网格线、外边框等等。这类元素起到的是辅助阅读作用,但如果不加处理全部放出,视觉上会显得杂乱和不够简洁,干扰到你真正想展示的信息。对于这类元素,应该尽量隐藏和弱化。

 

隐藏

 

·      去除不必要的背景填充

 

·      去掉无意义的颜色变化

 

·      去掉不必要的外框

 

弱化

 

·      坐标轴淡色或隐藏

 

·      网格线淡色或隐藏

 

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

数据层:

受数据影响样式的元素,比如说柱状图的柱条长度,柱条颜色,柱条展示个数,气泡图气泡大小等等,这类元素的展示效果和图表本身的数据息息相关,一旦图表本身的数据比较极端,有可能会使得最终视觉展现不尽如人意,我们无法改变具体的数据,是否就完全无法操控这些元素了呢?

这里挑选了几个大屏中应用较多的图表,总结了其数据层样式的调整方式。

 

调整范围

 

·      截断超大值

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

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