点开文章学套路,轻轻松松做大屏
大师兄今天就用实际案例来教大家按套路做大屏驾驶舱,依葫芦画瓢即可~...
大师兄上次写了篇大屏数据可视化的文章——大屏做成这样,领导不重用你都难,围绕布局排版、配色、点缀以及动态效果等方面,阐述了帆软的一些经验。
结果文章中酷炫的大屏效果引起了非常大反响,非常多热心的用户留言咨询是怎么做的。于是乎,大师兄的朋友圈被刷屏了。
红哥 Keira
这样的大屏太炫了啊,求问怎么做的?
66分钟前
帆软大师兄、城市课堂蛋总、铁杆番薯、小付隔壁的老王
数据应用研究院总编
帆软真牛,大屏效果非常好
66分钟前
帆软大师兄、马云Jack Ma、小付、Gartner、帆软传说哥、这个司机不太老
为了满足大家如此热忱的求知欲,大师兄今天就用实际案例来教大家按套路做大屏驾驶舱。
上图是一张视觉设计稿,也是大师兄今天要教大家实现的内容。开做之前,我们先做点准备工作:确认需求、准备数据、整理素材。这里假定需求已由业务部敲定,数据IT部也整理好了,而需要的背景、边框等素材大师兄事先都整理过,如下图所示:
OK,准备工作就绪,那就开始动手了。按照上次帖子的总结,我们设计大屏驾驶舱遵循四个基本套路:
1.布局排版 2.色彩 3.点缀效果 4.动画。
下载地址),按照布局样式,从组件栏拖入对应的图表元素到指定区域并绑定数据,如下图所示。
点击预览按钮,浏览器端的效果如下图所示。到这里第一版效果就出来了,主次排版让界面看上去很规范,但配色没有经过改良所以效果一般。
点击此处,我们会有专人和您联系。
戳这里,获取demo模板
关注 帆软软件
微信扫一扫关注公众号