4步教你玩转可视化大屏设计｜内附实际操作
小编上次写了篇大屏数据可视化的文章《大屏做成这样，领导不重视你都难！》，围绕布局排版、配色、点缀以及动态效果等方面，阐述了帆软的一些经验，文章中酷炫的大屏效果引起了很大反响，非常多热心的用户留言咨询是怎么做的。为了满足大家如此热忱的求知欲，小编今天就用实际案例来教大家按套路做大屏驾驶舱。
上图是一张视觉设计稿，也是小编今天要教大家实现的内容。开做之前，我们先做点准备工作：确认需求、准备数据、整理素材。这里假定需求已由业务部敲定，数据IT部也整理好了，而需要的背景、边框等素材小编事先都整理过，如下图所示。
OK，准备工作就绪，那就开始动手了。按照上次帖子的总结，我们设计大屏驾驶舱遵循四个基本套路：1）布局排版2）色彩3）点缀效果4）动画。
一、 布局排版
业务部门的需求，是要重点展现集团销售总额数据以及各地区的数据，其他次要内容包括历年销售对比、各产品线销售、热门产品、实时交易、新老客户占比等。我们从常见的几种主次分布排版样式里挑选了一种作为此次的版面，如下图所示。
由于集团业务遍布全国，所以区域销售数据我们认为用地图展示比较直观，而全国的总销售额这一数字叠加在地图上进行展示。另外，对比类的数据适合用柱形图，占比类的数据适合用饼图，交易明细数据适合用表格。这样，我们就确定了布局里的几个主要元素：地图、数字、柱形图、饼图、表格。打开finereport设计器中，按照布局样式，从组件栏拖入对应的图表元素到指定区域并绑定数据，如下图所示。
点击预览按钮，浏览器端的效果如下图所示。到这里第一版效果就出来了，主次排版让界面看上去很规范，但配色没有经过改良所以效果一般。
二、 色彩
在上次帖子里，我们总结过，大屏的主体背景建议用深色系，这样可以有效避免视觉刺激。如此，我们把第一版demo背景调一下，小编从五个推荐的背景颜色里头随便选了一种（R6 G64 B102），得到第二版效果。
由于整体背景是深色的，使得我们的一些标题文字还看上去不明显，而且图表有种沉闷的感觉，小编稍微调整了下，把文字内容改成浅色、图表则换稍微明亮一点的颜色，得到第三版效果。
到第三版，其实demo已经做的差不多了，排版合理有层次、色彩也符合多数人的阅读习惯。但是，做人要有追求，不能就此止步，小编要把demo改造得更炫一点。根据上次帖子里的总结，用一些带有星空、条纹等的图片作为整体背景，可以让效果富有科技感。于是小编从自己事先整理的素材库里，挑选了几张图片进行尝试，果然分分钟变得高大上了呀。如下图所示第四版效果，顶部标题处的光耀有木有非常nice？ ！
三、 点缀
在第四版效果基础上，我们还可以更进一步，为各个组件、标题添加一些边框来提升细节处的观感。
首先是改造顶部大标题，在大标题两侧各拖入一个报表块，为报表块添加背景图片（注意：添加的图片最好是对称的）。
预览，大标题改造后的效果如下，左右对称线条极大提升美感。
其次是改造各个组件的小标题，方法很简单，直接为小标题所在的报表块组件添加合适的背景就行。小编又又又从事先准备好的素材库里挑了个元素出来，最后选定效果如下。
再接下来，我们给各个组件添加边框元素，小编叒又从事先准备好的素材库里调了几个边框出来（现在知道为啥小编在文章开头就强调素材的重要性了吧），最后我们得到第五版效果如下。
四、 动效
在第五版效果之后，我们整个demo基本上可以交付了，但是由于大屏本身场景特殊，纯粹静态展示让人感觉大屏是死的，缺乏活力。为此，小编给demo加上一些动画效果，提升一下demo的活力及视觉观感。
首先我们来为销售总额设置数据监控，让其每隔1秒获取最新数据，这样销售总额数字会实时动态变化，操作如下图所示。
然后呢，再给图表添加闪烁动画，设置起来非常简单哈，不涉及到任何代码。
再接着，咱们来给地图添加一个数据监控，让各区域数据在地图上自动弹出提示。
最后，右下角的明细数据展示，小编觉得，如果用滚动轮播的形式会更好，于是就加上了。由此，第六版，也就是本次demo的最后一版终于可以交付啦，大家看GIF效果，求好评！！！
小结
肿么样，是不是按照套路做大屏驾驶舱，很容易做出漂亮的效果呢？其实在第四步动效环境，我们还可以加入更多交互效果，比如地图钻取，点击某个省份穿透到市级地图；或者比如联动，点击左上角的区域排名柱形图，则产品类别占比饼图联动显示具体省份的数据。
其实，做任何事情都有一些基本的套路，就看你有木有用心发现、用心总结。如果你对大屏数据可视化感兴趣，有类似的项目需求希望合作，或者是有更多的想法和经验愿意跟我们分享，又或者是有任何的疑问，都可以在下方评论。
4步教你玩转可视化大屏设计｜内附实际操作相关推荐
- 职场IT老手教你3步教你玩转可视化大屏设计，让领导眼前一亮！
我是制造企业的IT中心的研发人员,平常工作就是配合业务部门出出报表,选型一些商业软件,并在内部负责实施运维.最近领导出去参观了一些数字化转型比较领先的工厂和制造企业,回来就甩给我几张图,问能不能我们也 ...
- 数据可视化大屏设计步骤，有3步流程
数据可视化大屏设计步骤,有3步流程 大屏工程师经常碰到那样的窘境:竭力设计方案的大屏,数据精确.視覺酷炫,可是用户满意度一般.究竟哪些的大屏才算是客户必须的呢?回答是:重点突出.层级清楚.怎样设计那样 ...
- 数据可视化大屏设计经验分享 【进阶篇】
前言 说起数据可视化设计,如今绝对是热门的设计之一,而真正懂数据可视化设计的设计师却不多,随着大数据产业的蓬勃发展,很多企业都开始应用数据可视化.很多UI设计师突然会接到公司数据可视化设计的需求,如果 ...
- 大数据可视化大屏设计经验，教给你！
前言 大数据产业正在用一个超乎我们想象的速度蓬勃发展,大数据时代的来临,越来越多的公司开始意识到数据资源的管理和运用,大数据可视化大屏展示被更多的企业青睐,身为UI设计师的我们,也要紧跟时代的 ...
- 11.11数据可视化大屏设计揭秘
万众期待的京东11.11全球热爱季落下帷幕,巅峰狂欢中,多少人的购物车在这一天成为了GDP野马,创造的商业价值年年翻新,节节拔高,这背后的数据和流量,让消费者和企业更加直观.明确地捕捉到最新的消费风向 ...
- 大数据可视化大屏设计经验分享
前言 大数据产业正在用一个超乎我们想象的速度蓬勃发展,大数据时代的来临,越来越多的公司开始意识到数据资源的管理和运用,大数据可视化大屏展示被更多的企业青睐,身为UI设计师的我们,也要紧跟时代的步伐学习 ...
- 可视化大屏设计尺寸_可视化大屏设计_酷炫不是最高效的大屏展示的唯一标准...
目前市面上有众多做大屏的可视化BI工具,有的部分企业为了要实现其功能效果而令人感到枯燥乏味,或者是为了看上去绚丽多彩而显得极端复杂,从而实现对于相当复杂而又冗余数据的深入分析,让企业决策者难以理解数据 ...
- 可视化大屏设计_最高效的大屏展示不只是酷炫
目前市面上有众多做大屏的可视化BI工具,有的部分企业为了要实现其功能效果而令人感到枯燥乏味,或者是为了看上去绚丽多彩而显得极端复杂,从而实现对于相当复杂而又冗余数据的深入分析,让企业决策者难以理解数据 ...
- 【产品】可视化大屏设计思路
可视化大屏设计思路: 根据大屏面向的用户和使用的场景,确定中心主题. 大体分两种类型,一种是信息数据展示类型,另一种是实时监控决策类型.一定要思考清楚用户看到大屏后可以收获到哪些信息,规划好大屏的整条 ...
最新文章
- 华人博士提出原型对比学习，非监督学习效果远超MoCo和SimCLR
- 给.net程序打内存补丁-转
- POJ 2075 Tangled in Cables
- AWS_EC2_Oracle安装教程
- 使用jQuery图表插件Sparklines来开发一个实用的网站PV(page view)实时监控应用
- P1141 01迷宫(BFS+记忆化)
- 《DLL木马进程内幕大揭秘》
- '#selector' does not refer to an '@objc' method,No method declared with Objective-C selector 'compos
- TP5：缩短访问路径和路由的使用——2
- nginx加载html目录下图片,nginx配置访问图片路径以及html静态页面的调取方法
- c语言中 字符串常量的界定符,c语言题库2
- TCP协议之三次握手与四次挥手
- python对数据进行统计分析_python获取ELK数据进行统计分析
- 关于RecyclerView（二）设置EmptyView
- python yield详解
- 注册github账号详细中文版教程【精选】
- 爬虫进阶：CrawlSpider爬取169ee全站美女图片
- 计算机基础：13、计算机CPU--运算器
- 关于Raster的理解
- C#基础+面向对象学习