本篇文章内含大量gif图

适合pc端享用

由于上传限制

gif图不代表最终颜色、效果呈现

很开心看到"易览世遗"从一个idea孵化成一个落地项目，经过一次次的优化迭代，从一个网页端项目再到移动端产品，也因为在站酷上分享，得到了很多设计师小伙伴的关注，非常感谢！同时，有很多小伙伴私信想了解关于"易览世遗"的搭建方法、项目流程以及需要用到哪些工具等...所以也借这个机会，我们系统地整理了关于"易览世遗"的制作过程，希望通过这篇教程，可以让更多人对可视化有进一步的认识

极简流程

作为"易览世遗"诞生的见证人，最令我们感到自豪的不是项目最终上线，而是从开始到上线的过程中，我们一直在积极探索一种极简、便于项目高效迭代优化的流程，从而解放生产力

刚开始，我们也是按照传统互联网产品的开发流程推进，但由于每次上线的内容都需要经过开发和测试，其涉及的制作环节之多、沟通成本之高，让我们一直想要找到一个更好的解决方案，直到我们尝试使用自主研发的数据可视化编辑工具——RayData 专业版来制作，并参与了第一轮的内测，发现这个工具极大简化了开发流程，设计师摇身一变成为了项目的中坚力量，终于可以和开发说拜拜了

前期易览世遗开发流程

RayData专业版开发流程

1、数据策划表整理

每个项目的前期都离不开一份策划表，这是一个项目的基础和重点，"易览世遗"也不例外，项目制作前，"易览世遗"策划团队，会先梳理整个项目的重点内容，并输出一份完整翔实的内容策划表，这份神奇的文档，会给之后参与制作的模型和渲染团队很多重要的参考和帮助

下一步就是根据以上的参考资料来进行建模和渲染

易览世遗策划表示例

2、三维场景设计

上传模型

模型和渲染工作结束后，就到了最重要的一步----上传模型到RayData专业版，上传模型的流程不算复杂，仅需根据RayData专业版的模型规范来输出模型即可

上传模型流程

上传成功后 可为模型添加渲染材质

场景搭建

上传好模型，在模型库-我的资源里选择使用，就可以开始项目搭建了，需要注意的是，RayData专业版为了提供更便捷的搭建体验，将整个界面分为场景层和UI层，像场景模型、信息标记这类功能都需在场景层进行搭建

选择场景 

可以根据需求调整画面的光影以及镜头参数

在场景视角中，除了上帝视角，RayData专业版还提供了第一人称视角可供选择

视角设置

除了世界遗产，RayData专业版的模型库中提供了更多种类的模型和场景供用户直接使用，包括省级板块、城市、交通工具、楼宇建筑、公共设施等，同时也可以选择场景的昼夜样式，满足各种各样的模型风格需求

RayData专业版场景、模型库

创建模型

选择好模型场景后，接下来就可以在模型场景中添加多种场景功能，例如我们熟悉的信息标记，标记样式可以进行替换，并且支持更改颜色、大小和高度，也可以在各个标记之间添加关联线

创建信息标记

创建关联线

同时我们可以为场景或模型添加3D-BOX热区，方便进行之后的交互事件

2D热区和3D热区(box)的区别

创建3D-BOX热区

3、UI设计

UI搭建

场景搭建完成后就可以进行UI搭建了，前期我们会输出原型和设计稿，方便之后的搭建，UI界面的搭建同样在RayData专业版中进行，搭建的时候注意要选择UI层在进行操作

 UI层中可添加图表、形状、文本、装饰、按钮、媒体、控件等，同时，你可以自行调节组件的基础设置，自主上传多媒体等元素，像天气这类小组件，还会根据所添加的地点自动获取天气信息，图表组件也可以更改配色方案，满足多种场景下的颜色合理性

组件介绍

图表设置

除了Box热区，在UI搭建中也可以为按钮等可交互元素添加上面介绍过的2D热区功能

创建二维热区

组建库中还有丰富的icon元素供选择

icon组件库

交互事件

搭建好界面后，可对二维/Box热区部分添加多种联动交互事件，包括跳转、跳转外链、显示隐藏、切换视角等等，通过不同的界面需求去选择合适的交互联动

交互事件 - 跳转

交互事件 - 摄像机注视

项目测试

以上全部操作完毕后，我们就可以对搭建好的项目进行测试了，重点要确认模型是否有穿模问题，如果有就要更改镜头参数，检查交互事件逻辑跳转是否合理，界面整体效果是否满意，实时数据信息内容是否正确，确认没有问题后就可以直接发布项目了

最终效果展示（最终效果展示为上线版本）

RayData专业版优势

这样看下来，你可能会发现，搭建一个精美的可视化项目并不是一件太难的事情，其实"易览世遗"的整个制作，只用到了RayData专业版的一小部分功能，还有更多的可能性等待探索，除了"易览世遗"这样的文旅项目，还有更多的行业，比如教育、金融、房地产等等，都可以用RayData专业版快速实现出不同的可视化需求

随着新基建时代的到来，可视化在不同领域的价值渐渐被人挖掘，越来越多的行业和职业都把可视化当作一个表达基础，但想要制作一个完整的可视化项目，对于一些非技术出身的小白或企业，往往需要花费大量的时间在相关内容的学习上，付出很多技术、金钱和时间成本，而RayData专业版无疑能打破这一状态，让更多的人快速步入可视化领域，亲自感受到可视化的强大

本篇只以世界遗产为例，列举了小部分功能使用说明，还有其他更多彩蛋功能可以去亲自体验和探索，后续，我们也会在RayData实验室公众号上发布更多使用教程和案例，以帮助有需要的小伙伴深入了解RayData专业版功能以及可视化项目的设计思路

目前，RayData专业版正在内测中，仅开放部分试用名额邀请设计师小伙伴试用，如果感兴趣的小伙伴可以查看主页，扫码加入RayData可视化研习社，可获得绿色审核通道，快人一步试用功能强大、实用又兼具美学的数据可视化编辑工具

Powered by Froala Editor