如果您有问题要问或要分享想法,欢迎加入 Adobe XD 社区。我们很乐意倾听您的心声并欣赏您的创意作品。
- 画板、参考线和图层
- 文本和字体
- 组件和状态
- 蒙版和效果
- 版面
- 视频和 Lottie 动画
- 已知问题和已修复问题
- 安装和更新
- 启动和崩溃
- 云文档和 Creative Cloud Libraries
- 创建原型、发布和预览
- 导入、导出和使用其他应用程序
- Adobe XD 用户指南
- 简介
- 原型
- 共享、导出和审阅
- 设计系统
- 云文档
- 集成和插件
- iOS 和 Android 版 XD
-
故障排除
- 已知问题和已修复问题
- 安装和更新
- 启动和崩溃
- 云文档和 Creative Cloud Libraries
- 创建原型、发布和预览
- 导入、导出和使用其他应用程序
是否正在寻找关于在 Adobe XD 中创造沉浸式和交互式体验时如何模拟 3D 效果的信息?您来对地方了!


继续操作之前
确保熟悉 XD 中的设计和原型工作流以及这些限制。
模拟对象深度和透视
要模拟 3D 效果,请先在“属性检查器”中启用 3D 变换,然后使用线框 图标微调方向,最后向设计对象应用深度。
启用 3D 变换
要启用 3D 变换,选择所需对象并点击属性检查器中的 3D 变换 图标。


变换部分中会出现新对象控件,并且可在所选对象的中心使用线框 图标。将
图标向左、向右、向顶部、向底部移动。
您可以在“属性检查器”中修改轴值,或旋转线框 图标以沿轴旋转对象。
沿 X 或 Y 轴旋转对象
在“属性检查器”中启用 3D 变换 图标后,请按照以下步骤沿 X 和 Y 轴微调对象方向:
- 选择要旋转的对象。
- 在“属性检查器”中输入方向值,或者单击并拖动在对象中心出现的线框
图标。
- 在调整值时,请观察对象开始沿所需的轴旋转。
围绕 X 轴旋转对象


将所选对象定位在水平 X 轴上。
围绕 Y 轴旋转对象
沿垂直 Y 轴放置所选物体。
沿 Z 轴应用深度
现在您已经学习了如何启用 3D 变换以及沿 X 和 Y 轴旋转对象,请继续探索如何使用第三个维度 — Z 轴。
在用透视法设计一叠卡片或创建卡片翻转交互时,可在 Z 轴上移动物体,为图层营造深度感。观看此动画插图以了解如何沿 Z 轴应用深度。


- 选择所需物体。
- 将鼠标悬停在线框
图标的中心点上。
- 锚点
图标将会出现,您可以上下移动所选对象。
注意事项
- 3D 变换
图标仅显示或隐藏控件和线框。它无助于创建 3D 环境或禁用已在设计中应用的变换。
在调整进行了 X 或 Y 旋转的对象大小时,Z 深度值也将自动变化,从而导致内容重新排序。例如,在用透视法设计一组卡片时,每张卡旋转相同角度,但深度不同。如果多选这些卡片并选择调整其大小,则它们将按需调整大小。但是,每个卡片的 Z 值将发生变化,导致内容重新排序。
在更改任何物体的 Z 深度值时,XD 不支持“置为顶层”、“置为底层”等图层排序方法以及从“图层”窗格中重新排序。
视频:如何在 XD 中使用 3D 变换?
“借助 Adobe XD 中的 3D 变换,只需在设计画布上单击几下即可模拟对象深度和透视”- Adobe XD 首席产品经理 Dani Beaumont。
观看此视频,了解如何使用 XD 中的 3D 变换。
观看时长:3 分钟。
提示和技巧
现在您已了解如何在 XD 中使用 3D 变换,下面是一些便利的提示和技巧:
- 随时都能快速地将物体重置回其 2D 状态。右键单击所选物体,然后选择“重置 3D 变换”。或者,还可使用 macOS 上的 ⌥⌘T 和 Windows 上的 Alt + Ctrl + T 重置 3D 变换。
- 可选择显示或隐藏 3D 变换控件。使用 macOS 上的 ⌘T 和 Windows 上的 Ctrl + T 显示或隐藏 3D 变换。
接下来学什么?
我们已向您介绍了如何在设计中启用和使用 3D 变换。可继续学习如何将其制成动画以及与设计人员或利益相关者共享它们以获取反馈。
有疑问或想法?