数据可视化设计怎么做(设计风格及案例分享)

seoxin 09-07 11:24 10次浏览

关于可视化大屏的制作,帆软君了解到许多朋友关于数据可视化大屏的痛点问题,如缺少美工素材、不知如何构建数据可视化大屏场景、可视化细节调整困难、可视化多屏自适应问题等等。

超全干货:数据可视化的设计总结,工具,技术要点统统都有
超全干货:数据可视化的设计总结,工具,技术要点统统都有
超全干货:数据可视化的设计总结,工具,技术要点统统都有
超全干货:数据可视化的设计总结,工具,技术要点统统都有
超全干货:数据可视化的设计总结,工具,技术要点统统都有
超全干货:数据可视化的设计总结,工具,技术要点统统都有

为了帮大家快速上手可视化大屏的开发,今天用FineReport为例详细讲解一下:

超全干货:数据可视化的设计总结,工具,技术要点统统都有

场景规划

大屏场景的需求规划,必定是大屏开发的第一步。我们可以把大屏场景需求分数据需求和风格需求两部分,同时兼顾大屏展示需求。

超全干货:数据可视化的设计总结,工具,技术要点统统都有

1、数据需求

在大屏开发前,必须确定清楚需要展示的数据具体有哪些内容,同时探明每部分数据对实时性的要求,从而一一确定数据对应的可视化元素。

超全干货:数据可视化的设计总结,工具,技术要点统统都有

以这张公司综合展示大屏为例,大屏数据展示的内容可分为“公司简介”、“产品介绍”、“经营状况”和“人力资源”4个部分,每个部分对应的数据实时性要求可能各不相同,例如公司和产品简介需要半年或者一年以上才需要手动更新,而公司规模、销售额等数据可能以月份甚至更大的频率刷新,公司新签单用户等数据,则可能每日更新。

对简介信息,我们用报表块里的图片结合文字展示;对公司规模、销售额,我们用指标卡展示;对公司新签单用户,我们则用了可监控刷新的表格;市场占有率、项目完成状态等涉及百分比的数据,我们使用仪表盘或者水球图展示……

2、风格

在明确数据需求后,我们还需要规划大屏风格。

在色系风格方面,首先给大家的第一条建议是“大屏尽量使用深色调”,除了深色比浅色用在大屏上更具科技感、更酷炫外,还有以下原因:

1.深色比浅色造成的视觉疲劳更少,更容易形成视觉聚焦;

2.深色可减少屏幕色差、拼接屏缝隙带来的影响;

3.深色大屏比浅色大屏耗费的能源更少,更环保。

超全干货:数据可视化的设计总结,工具,技术要点统统都有

对于大屏主色调的选择,我们最常用的是蓝色系,其次是青色,再次是红、黄、绿等偏亮的颜色,其它色系并非不可用,但对新手而言是很难把控的。

除此之外,色调还需要考虑使用场景和行业属性,例如IT、公安、水利行业重蓝色调,电网、能源、环保行业重青绿色调,零售、电商行业的购物节数据大屏多用欢快的红黄色调,党建主题大屏多用红色调等等。

超全干货:数据可视化的设计总结,工具,技术要点统统都有
超全干货:数据可视化的设计总结,工具,技术要点统统都有
超全干货:数据可视化的设计总结,工具,技术要点统统都有

在布局排版方面,我们常见的布局方式有以下几种。主要信息可以居中、居左、居右或者偏上展示,次要信息环绕主要信息。其中用大屏的“中心呈现主要信息、周围对称分布次要信息”是最稳定、最好上手的结构,也是最推荐刚上手大屏的用户使用的布局方式。

超全干货:数据可视化的设计总结,工具,技术要点统统都有

大屏开发工具

我所用的FineReport大屏依托决策报表制作,先新建一张决策报表,并选择大屏常用的「绝对布局」方式;紧接着设置画布大小,使之符合场景规划中的大屏模板比例;然后就可以拖拽需要的组件到画布中了。

超全干货:数据可视化的设计总结,工具,技术要点统统都有

大屏实践开发

1、选取模板:

进入帆软大屏官方demo系统,从大屏业务场景、数据指标、整体风格上综合评估你需要的大屏模板。

超全干货:数据可视化的设计总结,工具,技术要点统统都有

2、下载模板:

进入帆软市场-模板库下载选中的模板,在设计器中打开这个模板,你可以另存为并基于这个模板的框架改造出你需要的大屏,或者参考这个模板的结构、内容重制一张大屏。

超全干货:数据可视化的设计总结,工具,技术要点统统都有

效果打磨

对于通过复用的方式制作好的大屏模板,我们需要经历更换数据源、调整图表样式、调整所有组件、补充特效4个步骤。

超全干货:数据可视化的设计总结,工具,技术要点统统都有

1、更换数据源

需要把复用过来的示例组件中的数据改为真实的大屏业务数据

2、调整图表样式

首先去掉大屏中不常用的图表元素,如图表原配的标题、单系列图表的图例、密密麻麻的标签、图表特效中的工具栏以及坐标轴线、系列框线和背景的横线等;

超全干货:数据可视化的设计总结,工具,技术要点统统都有

最后再根据大屏的色彩风格调整系列配色,可以使用设计器内置的配色方案,其中「xx高亮」系列为大屏专属的配色;

超全干货:数据可视化的设计总结,工具,技术要点统统都有

3、调整所有组件

在我们将图表调整成大屏适合的样式后,还需要统一为组件添加背景、标题,调整组件的文字、位置和大小。

4、补充效果

经过以上效果调整后,大屏已经基本满足展示需要了,再添加一些跑马灯、组件轮播、图表高亮的效果,一张完整的大屏模板就制作成功了。

  • 暂无推荐