如何做一张科技感、实用性兼备的大屏
提到可视化大屏，我们脑海中往往会有两个词：动态直观、统筹监控。
很多企业和团队在开展大屏项目的时候都是基于这两个词，基本诉求也就是两个部分：
- 对内，要监控公司运营，实时统筹全局掌握关键数据；
- 对外，要为客户展示公司运行情况，从而维护客户关系，增强信任；
因此，大屏不仅要求做到视觉上美观炫目，更要突出与数据契合的科技感，方便查看数据，使需要被关注的重点突出。
而更多时候我们在视觉、数据方面有会更高的要求，需要大屏美观与实用性并存：在视觉方面，需要不同大屏的排版标新立异，所用素材与数据体现形式不可重复；在数据方面，高层领导对大屏的要求更侧重实用性和实时性，且对指标的摆放顺序有独到的见解。
一言概之，老板的需求简单明了：“我要5张大屏，展现科技感、亦兼具实用性、实时性。”
于是针对这两个需求，我们团队将最终成果摆在了老板面前：
大屏经验分享
这次大屏效果在同行业内部交流过程中反响不错，在这次大屏的开发过程中，我亦总结了一些独家的大屏技巧略作分享。
首先要说一下我们制作大屏使用的工具——FineReport10.0，是采用最新的可视化大屏图表，默认采用深色背景+荧光配色，非常符合浸入式的大屏体验；而且能根据图表类型和数据要求，提供 '轮播'或'刷新'两种动画形式，能够满足不同场景下的业务需求。
同时FineReport10.0最厉害之处，在于它基于webgl等技术，对动画不断优化调整，能让做出来的效果更加简洁炫酷。
一、 灵活使用图片修饰
1、插入系列法：
概述：让图表摆脱常见的柱形填充效果，通过自选的图片丰富大屏的创意。
操作：在图表->系列->样式中，将已经设计好的图片作为要素填充进图表中。
2、背景图修饰法
概述：灵活使用绝对布局，通过报表快叠加美化图表效果。
比如，老板想要一个这样的仪表盘（左图1），在FineReport10.0的仪表盘不符合需求的情况下，应用了360度仪表盘实现了类似效果（右图1），后经过修改，利用仪表盘上方叠加饼图的方式实现了最终效果（右图2）。
二、 散点图、气泡图也能玩出花
思路：
- 灵活使用组合图的各个图表组合。
- 对于分类数已知的图表来说，可把每个分类当做一个图表来单独设计，能灵活设置颜色、背景、提示点位置。
三、图表的”创新”
概述：通过设计师设计的图片作为背景来拓宽图表样式，实现3D柱形图、3D圆环图等效果
步骤：
- 设计师设计自定义图片，图片为具有一定特效的图表，把数据去掉。
- 通过上文提到的报表块叠加，将图片作为底层背景，上层叠加数据，即可实现自制图表效果。
四、自定义地图
概述：通过自定义图片作为地图背景，重新描点形成json文件，实现地图的3D倾斜效果。
步骤：
- 设计师设计自定义地图，输出地图图片（压缩到1M以内最好，不然加载太慢）
- 设计器点击服务器->地图数据，进入地图编辑页面，自建自定义地图，放入压缩好的图片
- 对地图描点，根据实际业务情况描点（可按省份描也可按大区描）
- 保存json文件，重启设计器即可在地图图层中选到自定义地图。
最终效果
1、首页
首页分析了银行整体的信贷质量、存贷款、不良贷款情况。
2、对公二级屏
对公二级屏分析商业银行比较重视的公司业务的风险情况，包括贷款余额情况、逾期率、不良率、已暴露风险趋势等核心指标。
3、零售二级屏
零售二级屏分析零售业务比较关注的风险指标，主要包括零售业务余额、不良贷款余额，个人贷款余额、信用卡余额等。
4、金融市场二级屏
金融市场二级屏分析金融市场业务比较关注的风险监测指标，主要包括金融市场业务余额、贷款余额分布、自营业务余额、理财业务余额、贷款变动趋势等。
5、实时监控屏
实时监控屏相较于前四屏，本屏重在数据的实时监控，监控的预警客户数、大额交易记录也具有较强时效性。
总结
现在很多企业已经不满足于传统的固化报表了，而是更想要通过更直观的动态数据来做业务决策，却不知道大屏项目该如何下手。像我们团队这一次做出的大屏成果，直观而且震撼，能够覆盖从需求分析、方案设计、项目落地、项目运维全生命周期，保证了大屏项目的完成。
如何做一张科技感、实用性兼备的大屏相关推荐
- 那些黑科技感爆棚的可视化大屏，是怎么做出来的？模板直接套用
在电影里我们经常会看到一些极具黑科技感和炫酷的可视化大屏,比如<钢铁侠>里托尼的这一幕一定让人难以忘记: 其实严格意义上讲,电影中的这种还不属于可视化大屏的范畴,仅仅是将一些动态图表组件进 ...
- 我为大家带来了10张“科技感满满”的可视化数据大屏，收藏等于学会~
☀️ 前言 相信大家平时工作中做大屏做得多了但难免也遇到被吐槽边边角角细节没有科技感的时候
- 体感互动ar交互大屏设计方案
AR大屏互动又称体感AR互动,是通过硬件大屏显示屏幕.体感互动系统软件以及三维数字内容,通过感应装置来感应站在大屏前的参与者的动作手势时,大屏里面的内容变随着参与者的动作发生变化. AR大屏互动利用图 ...
- 【029】Weavesilk–便捷绘制科技感背景图
甲方想要的黑色背景炫酷光效的科技感图片如何5秒制作一张,让甲方随便选?想拥有一张属于自己的电脑桌面壁纸?做PPT缺一张科技感背景?这些问题都可以在Weavesilk解决. 地址:参见文末图 打开Wea ...
- 别人家的防疫实时监控大屏是怎么做的？方法和技巧都在这里了
复工返学高峰季是疫情防控的要紧时期,引起了全国企业和高校的高度重视.不少公司和学校将信息化手段应用到了防疫工作中,数字大屏可以用做防疫数据监控的前端平台,也能通过数据展示警醒大家不可放松警惕,在防疫数 ...
- 知乎万赞回答：什么工具能做可视化大屏，还能做数据地图？
好多人跟我说vue.python.Pyecharts做可视化大屏,绝对有一套. 我看了一下,其实一般般,就像我在问答里说的那样,门槛不低,基本上是程序员在做. 现在对于可视化的要求,大屏是一方面,数据 ...
- 15个小时做10个可视化大屏，科技感爆棚，我把方法和工具教你
一谈到数据可视化,很多人就会联想到各种精美的图表.炫酷的数字大屏: 其实数据可视化,并不仅仅指数据可视化产品,在工作中,除了数字大屏.数据 BI.可视化分析工具之外,日常我们写报告.PPT 都需要用到 ...
- 如何设计出高端大气、有黑科技感的可视化大屏？
只要一提起可视化,很多人第一个想到的,肯定就是火得一塌糊涂的大屏了. 从我身边很多从事可视化的朋友来看,越来越多的公司都将可视化大屏作为企业数据工作展示的"高级手段"和" ...
- ai如何旋转画布_Ai绘制科技感晶格球体！
来源:学UI网 作者:岚岚 完成效果 步骤很简单,通过这次学习可以掌握AI中的一些设计技巧, 并举一反三,在今后的设计进行运用哦. 首先新建800X600px的画布,然后用矩形工具画出同样大 小 ...
最新文章
- (转)@ContextConfiguration注解说明
- SAP SD 基础知识之Cash Sales和Rush Order的区别
- 主宰全球的10大算法
- 【微职位公开课】老学长自述：如何成为年薪50W的技术工程师
- head first系列PDF资源
- java分页查询_面试官：数据量很大，分页查询很慢，有什么优化方案？
- vue2.5.2版本 ：MAC设置应用在127.0.0.1:80端口访问； 并将127.0.0.1指向www.yours.com ；问题“ Invalid Host header”
- 华为手机下拉菜单没了_这才是华为正确的截图方式！别不当回事，白白浪费这么强大的手机...
- vs2019加载调试动态库dll文件
- 《C++ Primer》读书笔记
- 带有分页的列表的跳转后，返回时怎么实现保留分页的页数等信息
- 4. PHP 操作 memcache(1)
- eclipse 汉化
- 统计学 常用的数据分析方法大总结，推荐收藏
- 自己在inode客户端的大量问题（不断更新中）(2012-02-23 21:24 )
- 2020计算机行业就业职位及分析
- java cap 反编译_应用 JD-Eclipse 插件实现 RFT 中 .class 文件的反向编译
- 《霍乱时期的爱情》摘要
- mac辅助功能授权无效
- python里2f是啥意思_Python 字符串前面加u,r,b,f的含义