加入收藏 | 设为首页 | 会员中心 | 我要投稿 辽源站长网 (https://www.0437zz.com/)- 云专线、云连接、智能数据、边缘计算、数据安全!
当前位置: 首页 > 创业 > 点评 > 正文

案例分享:数据可视化大屏设计经验分享(高级篇)

发布时间:2020-03-02 01:17:34 所属栏目:点评 来源:做站长
导读:本期分享的是工作中实际案例——首都国际机场数据可视化大屏设计,下面将从板式风格元素、图表、文案、3D效果技法、以及开发落地等方面,进行层层分析讲解。 案例解析 下图是我们优秀的技术人员利用模版直接布局出来的页面,也可以理解为需求页面,接下里

案例分享:数据可视化大屏设计经验分享(高级篇)

问题标题

上图左右两个标题唯一的区别就是一个是“进”字,一个是“出”字,这两个字如果不仔细看很难一眼出左右的区别,所以我们在设计标题的时候,一定要提炼关键词,把可以作为明显区别的关键词置前。

案例分享:数据可视化大屏设计经验分享(高级篇)

调整后标题

调整后的标题把重点区别的关键词置前,观者能够快速识别。

第二处修改:

案例分享:数据可视化大屏设计经验分享(高级篇)问题标题和数据格式问题

此图表数据体现是延误航班数据,所以标题的关键词应该是“延误”,延误放在标题中间没能起到快速识别数据类型作用。

再者就是图表上的数据格式错误,航班数量不该有小数点,因为航班数都是整数呈现。

案例分享:数据可视化大屏设计经验分享(高级篇)

调整后

调整后关键词置前“延误进出港机场-今日前五”用横杠隔开“今日前五”能够过度信息,更直观。

4. 3D效果技法

3D地球效果:

原图上进出港途中详情是上下分开的:

案例分享:数据可视化大屏设计经验分享(高级篇)

开始想用进出港切换的方式呈现,就是一个大地球,一个小的缩略图,可以点击切换,也可以自动轮播大小切。

案例分享:数据可视化大屏设计经验分享(高级篇)

初稿

后考虑到此产品是没有任何交互操作的,这里设计交互行为是不合理的,所以要换一种形式。

案例分享:数据可视化大屏设计经验分享(高级篇)

案例分享:数据可视化大屏设计经验分享(高级篇)

定稿(数据15分钟刷新一次)

调整后让两个数据都呈现在地球上,用两种不同光线颜色表示进出港班次。

  • 青色:北京扩散的方向代表出港
  • 蓝色:聚焦北京的方向代表进港

如果细心查看页面会发现,所有关于进港的都是青色,例如进港总航班量、进港人数、即将进港航班;同样关于出港的都是蓝色,目的就是要建立观者颜色对数据类型的认知。

3D地球技法教程:

3D地球动画效果,纯用C4D软件完成:

案例分享:数据可视化大屏设计经验分享(高级篇)

  1. 地球用一个世界地图贴图
  2. 地球的凹凸效果用了材质的置换和凹凸
  3. 小飞机动画用的是对齐曲线动画
  4. 国家之间样条生成用的是插件 LON—LAT Connection
  5. 光线粒子用的是插件 X-Particles

下面我们一一介绍:

首先找一张世界地图,这里称为“球皮”,ps调整色调,满意为止。

案例分享:数据可视化大屏设计经验分享(高级篇)

调色球皮

把球皮放入材质,表面的凹凸效果用置换和凹凸。

案例分享:数据可视化大屏设计经验分享(高级篇)

材质设置

小飞机动画用的是对齐曲线动画,打关键帧转一圈,记得勾选切线,不然飞机会横的飞。

案例分享:数据可视化大屏设计经验分享(高级篇)

飞机绕地球动画

国家之间样条生成用的是插件 LON—LAT Connection,这一步很关键,插件使用很简单就是选择:洲-国家-城市~洲-国家-城市,tab切换有设置可以设置样条曲线的高度弧度等。

(编辑:辽源站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

推荐文章
    热点阅读