从2D到3D：为空间计算时代设计的UI与动效交付工作流

摘要

本文旨在解决传统2D UI/UX设计师在转向VR/AR等空间计算（Spatial Computing）界面设计时，所面临的思维模式转换困难与交付流程断裂的核心痛点。我们将介绍一套结合了 Figma、Adobe After Effects 与 Unreal Engine 的“升维”工作流，详细拆解如何将2D的设计习惯，扩展至包含深度（Z轴）信息的3D空间动效原型制作中，并最终产出一套开发人员能够清晰理解并精准实现的、标准化的交付物（包含动效视频参考、空间参数清单与资源文件），帮助UI设计师平滑过渡到全新的三维交互设计领域。

一、问题背景

最近公司接了一个给VR头显开发企业级应用的活儿，我是负责UI/UX的。一开始，我还是老习惯，在Figma里画好了一堆非常漂亮的2D界面，然后就准备打包切图、做标注，准备交付给开发。

结果，开发的同事拿到设计稿后直接就懵了，跑来问我一连串“灵魂拷问”：“Anna，你这个按钮，在空间里离用户眼睛多远？这个信息面板，是像窗户一样贴在墙上，还是像个平板一样悬浮在空中？它弹出的时候，是沿着哪个轴、用什么样的动画曲线飞过来的？”

我当时也懵了。我这才意识到，我们所熟知的、基于二维平面的设计和交付方式，在一个拥有真实“深度”的三维空间里，已经完全失灵了。开发人员无法仅凭一张静态的Figma截图，去“猜”一个三维物体的空间位置、大小和动态。

今天，我就分享一下我后来在项目中摸爬滚打，最终总结出的这套，能让2D UI设计师平滑过渡到3D空间设计的“升维”工作流。

二、核心技术与工具栈

• 2D界面布局设计: Figma

• 3D空间动效原型: Adobe After Effects 2026