点开文章学套路,轻轻松松做大屏

 

大师兄今天就用实际案例来教大家按套路做大屏驾驶舱,依葫芦画瓢即可~...



大师兄上次写了篇大屏数据可视化的文章——大屏做成这样,领导不重用你都难,围绕布局排版、配色、点缀以及动态效果等方面,阐述了帆软的一些经验。





结果文章中酷炫的大屏效果引起了非常大反响,非常多热心的用户留言咨询是怎么做的。于是乎,大师兄的朋友圈被刷屏了。



  红哥 Keira

这样的大屏太炫了啊,求问怎么做的?



















66分钟前



帆软大师兄、城市课堂蛋总、铁杆番薯、小付隔壁的老王



  数据应用研究院总编

帆软真牛,大屏效果非常好













66分钟前

帆软大师兄、马云Jack Ma、小付、Gartner、帆软传说哥、这个司机不太老


为了满足大家如此热忱的求知欲,大师兄今天就用实际案例来教大家按套路做大屏驾驶舱



上图是一张视觉设计稿,也是大师兄今天要教大家实现的内容。开做之前,我们先做点准备工作:确认需求、准备数据、整理素材。这里假定需求已由业务部敲定,数据IT部也整理好了,而需要的背景、边框等素材大师兄事先都整理过,如下图所示:



OK,准备工作就绪,那就开始动手了。按照上次帖子的总结,我们设计大屏驾驶舱遵循四个基本套路:

1.布局排版  2.色彩  3.点缀效果  4.动画

下载地址),按照布局样式,从组件栏拖入对应的图表元素到指定区域并绑定数据,如下图所示。



点击预览按钮,浏览器端的效果如下图所示。到这里第一版效果就出来了,主次排版让界面看上去很规范,但配色没有经过改良所以效果一般。



点击此处,我们会有专人和您联系。

戳这里,获取demo模板


    关注 帆软软件


微信扫一扫关注公众号

0 个评论

要回复文章请先登录注册