大屏数据可视化-地图3例

如今数据可视化非常的火爆，而3D动画又是营造炫酷效果重要设计手法之一。

数据可视化向三维发展是必然趋势，从二维到2.5维再到三维。

世界万物皆有三维组成，通过平面或2.5维所表现出来的三维，我们的大脑必需从二维图像中重构事物原本的形态，容易产生思维错觉，限制对图像处理的效率；三维图像更接近于真实的世界。

对于页面设计最大的要求就是信息层级准确、精准易读、高效操作。

考虑到大屏的使用场景和不同的观看人群以及操作人员的长时间观看等情况。色调上不能特别活跃，布局和展示上数据逻辑、层级关系要非常明确，易于操作，屏幕中显示的数据不能过多，避免数据之间的影响。

定义色系时有几方面的考虑

1、考虑到大屏面对的用户年龄段跨度大，不同年龄段对颜色的接受程度不同，所以选择蓝色、绿色。这两类颜色是适应人群比较广的色。

2、采用日常认知颜色，降低用户学习成本

3、用户长时间使用，突发事件紧盯屏幕，采用暗色调，减少对观者眼睛的刺激。

4、在一个暗色调省电。

页面布局时的考虑

采用左中右\左右布局形式，左侧为整体的统计信息，中部为城市的实时动态展示区域（视觉中心、交互中心）,右侧为数据分析区域，数据的更细分信息。

思路其实都是一样的：把模型导入ae将做好的贴图都贴在对应位置，运用E3d插件做效果。

关于用到的地图网站\软件有

获取json/svg地图源文件格式：https://datav.aliyun.com/portal/school/atlas/area_selector

获取地图高程：http://www.gscloud.cn/search

获取河流、道路信息软件：Google Earth Pro、QGIS

制作模型软件：C4D（将SVG导入Ai,再将Ai格式导入C4D生成模型,然后导出obj格式模型导入Ae的E3D里）

处理贴图软件：Ai（svg+GGIS导出的河流/道路/高程,合成蒙版制作贴图）

制作页面软件：PS（页面图表等，可直接拖入Ae）

制作动画软件：Ae、E3D（模型+贴图+素材）

关于开发对接

一般这种效果都会有好多种实现方法，threeJS，webgl，U3D，Ue4，Ventuz等等，如何对接开发，这都取决于开发使用的工具和实现的方式，做之前充分跟开发沟通想要的效果，让他们做个调研方案，这样会事半功倍。

不管是基于什么实现的，基本都是会需要设计师提供地图模型、UV贴图、烘焙贴图、材质参数等等。

这些东西对接其实跟咱们自己建模贴图然后在处理材质灯光（有些不支持灯光渲染，就需要把灯光的效果烘焙到贴图上直接给贴图）这些参数是一个原理，把基础模型和对应的参数和贴图，给到开发就可以了。