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

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

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

场景规划

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

1、数据需求

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

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

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

2、风格

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

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

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

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

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

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

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

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

大屏开发工具

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

大屏实践开发

1、选取模板：

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

2、下载模板：

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

效果打磨

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

1、更换数据源

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

2、调整图表样式

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

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

3、调整所有组件

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

4、补充效果

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

超全干货：数据可视化的设计总结，工具，技术要点统统都有相关推荐

超全的数据可视化大屏设计组件库 sketch格式
随着大屏可视化设计需求的发展,可视化sketch矢量素材变得越来越受欢迎,它可以为设计师提供丰富的设计元素,帮助他们更高效更快速的完成设计任务. 大屏可视化sketch数量素材是B端可视化设计师们最佳 ...
d3中文案例_D3js初探及数据可视化案例设计实战
摘要:本文以本人目前所做项目为基础,从设计的角度探讨数据可视化的设计的方法.过程和结果,起抛砖引玉之效.在技术方案上,我们采用通用web架构和d3js作为主要技术手段:考虑到项目需求,这里所做的可视化 ...
提升逻辑！APP数据可视化界面设计灵感
如何将繁复的数据转化为更加简洁明朗的可视化图表内容?不同领域的数据处理逻辑能力和网格框架的使用能力都必不可少,集设网www.ijishe.com设计师交流社区带来逻辑满分!12款数据可视化界面设计 ...
UI设计灵感|逻辑感十足的数据可视化界面设计
如何将繁复的数据转化为更加简洁明朗的可视化图表内容?不同领域的数据处理逻辑能力和网格框架的使用能力都必不可少,看看集设网 www.ijishe.com 设计师交流社区带来的逻辑感十足的数据可视化界面设 ...
基于大数据的消费者能力的数据可视化平台设计与实现
摘要大数据时代的来临,为了提高企业核心竞争力,首先需要解决电子商务大数据领域中,本设计主要为解决商家无法找到精准客户的问题,通过科学的方式对目标市场中形态各异的消费者进行精细的划分,根据每个用户不 ...
如何进行数据可视化图表设计？
如何进行数据可视化图表设计? 对数据人来说,数据可视化是分析理解数据,并最终呈现数据的必修课.本文从以下几个点来说明,如何进行数据可视化图表设计.1.数据背后的故事2.充分理解数据3.多种图表类型设计 ...
关于数据可视化的方法和工具介绍
这一篇给大家全面介绍下关于数据可视化的方法和常用工具. 1. 数据可视化简介数据可视化,是指用图形的方式来展现数据,从而更加清晰有效地传递信息,主要方法包括图表类型的选择和图表设计的准则. 随着互联 ...
数据可视化系列-06数据分析工具QuickBI
文章目录数据可视化系列-06数据分析工具QuickBI 一文介绍QuickBI Quick BI 的基本对象快速入门 Quick BI产品架构界面说明菜单栏我的看板工作台首页通过仪表板分析 ...
数据可视化的方法和工具V1.1
公众号后台回复"图书",了解更多号主新书内容作者:林骥来源:林骥最近,我开始修订一些以前发表过的文章. 对我来说,这是一种复习和复盘,从中发现可以改进的地方,并完善自己的知识体系 ...

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

超全干货：数据可视化的设计总结，工具，技术要点统统都有相关推荐

最新文章

热门文章