本期以3D可视化项目UI设计为例，拆解UI搭建思路，助力用户快速复用。

前言

项目背景和项目目标

3D可视化项目为什么需要做UI设计？

为了提高用户沉浸感和信息传递效率，需要向用户传递必要的UI信息，提升互动。这也是衡量项目完整性的要素之一。

需要注意的是，怎么在保障3D项目沉浸感的同时，来添加上必要的UI信息实现高效传递，需要综合考虑搭建方式和呈现效果。

UI驱动用户体验项目产品

在项目产品角度，一方面UI可以通过标签等方式，为用户直接呈现与可视化内容相匹配的内容，另一方面UI可助力项目构建出一个系统的平台，以满足用户需求实现更大价值应用目标。

对于UI搭建来说，更侧重如何通过有机串联3D可视化场景，激发用户行为发生，以实现项目交互、转化等活跃度的提高。

区别于平面项目，3D可视化场景的UI搭建更加复杂，需要考虑实时联动、实时交互等效果的呈现。所以寻找一个合适的平台/工具来高效完成UI搭建，也是3D开发设计师们一直关注的重点。

搭建思路&流程

AMRT3D是眸瑞科技自研的轻量化图形引擎，为用户提供了三维场景、UI搭建等3D可视化功能，免费使用，所见即所得。

下面以AMRT3D引擎的UI玩法为例，来拆解搭建思路：

第一步：新建UI控件

进入AMRT3D，在资源管理处新建UI文件夹，并在此文件夹中新建UI控件，UI控件记录UI的编辑场景，双击控件图标即可进入UI编辑页面。

第二步：设置UI画布

画布为UI显示的区域，也是UI根节点，UI组件都将搭载在画布之下。画布可以手动设置尺寸，自由灵活。

第三步：添加UI组件

AMRT3D提供了丰富的UI基础组件和图表，点击即可添加到画布内，右侧面板可以设置组件详细参数，如位置、轴心、锚点等。

A3D资源库还为用户提供了一些常用的UI图片、组件、图表等资源，下载即可灵活使用。

UI组件还支持添加文字、按钮、复选框、下拉框、输入框、进度条等基础UI组件，并提供个性化功能设置，均可以在可视化场景中实时预览。

除了基础组件外，还支持添加图表UI，用户可以自行编辑图表数据，不仅呈现效果好，应用起来也非常方便，无需复杂操作，一键就能完成添加。

第四步：UI应用到场景

设置的UI素材保存后，切换到场景编辑面板，将之前保存的UI拖拽到场景编辑区，即可实现应用。

这里可以选择设置2D/3D UI，2D为独立遮罩，3D则为立体组件会随着场景变化。

第五步：数据对接

UI界面需要展示业务数据时，就需要用到数据对接功能了，在文字组件中，选择【数据】，支持对接静态数据和动态数据，根据需求选择即可，然后在样式中勾选【关联数据】，就能对应展示了。

第六步：事件交互

重点功能来了，一般UI组件都需要进行交互，在【事件设置】下就能完成，比如单击某按钮后实现摄像头移动旋转、特定速度呈现等等。引擎提供了丰富的功能操作可以灵活组合应用。