用户指南 取消(C)

使用 3D 变换创建透视设计

是否正在寻找关于在 Adobe XD 中创造沉浸式和交互式体验时如何模拟 3D 效果的信息?您来对地方了!

3D 变换功能让您能够毫不费力地模拟设计中的对象深度和透视。结合沿水平轴和垂直轴旋转任何对象的能力,并在 Z 轴上应用深度,您可以模拟视觉效果,例如 3D 动画、透视中的模型、卡片翻转交互等。

使用 3D 变换
使用 3D 变换创建翻转交互

继续操作之前

确保熟悉 XD 中的设计和原型工作流以及这些限制。

模拟对象深度和透视

可将 3D 变换应用于复杂的合成,如滚动组重复网格堆叠填充。启用 3D 变换后,可控制对象沿 X 和 Y 轴的方向以及沿 Z 轴应用深度

要模拟 3D 效果,请先在“属性检查器”中启用 3D 变换,然后使用线框 图标微调方向,最后向设计对象应用深度

启用 3D 变换

要启用 3D 变换,选择所需对象并点击属性检查器中的 3D 变换 图标。

启用 3D 变换

移动线框

变换部分中会出现新对象控件,并且可在所选对象的中心使用线框 图标。将 图标向左、向右、向顶部、向底部移动。 
您可以在“属性检查器”中修改轴值,或旋转线框 图标以沿轴旋转对象。

沿 X 或 Y 轴旋转对象

在“属性检查器”中启用 3D 变换 图标后,请按照以下步骤沿 X 和 Y 轴微调对象方向:

  1. 选择要旋转的对象。 
  2. 在“属性检查器”中输入方向值,或者单击并拖动在对象中心出现的线框 图标。
  3. 在调整值时,请观察对象开始沿所需的轴旋转。 

围绕 X 轴旋转对象

围绕 X 轴旋转对象

将所选对象定位在水平 X 轴上。

围绕 Y 轴旋转对象

围绕 Y 轴旋转对象

沿垂直 Y 轴放置所选物体。

沿 Z 轴应用深度

现在您已经学习了如何启用 3D 变换以及沿 X 和 Y 轴旋转对象,请继续探索如何使用第三个维度 — Z 轴。 

在用透视法设计一叠卡片或创建卡片翻转交互时,可在 Z 轴上移动物体,为图层营造深度感。观看此动画插图以了解如何沿 Z 轴应用深度。

沿 Z 轴移动物体

  1. 选择所需物体。
  2. 将鼠标悬停在线框 图标的中心点上。
  3. 锚点 图标将会出现,您可以上下移动所选对象。

注意事项

  • 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 变换。可继续学习如何将其制成动画以及与设计人员或利益相关者共享它们以获取反馈。

有疑问或想法?

询问社区

如果您有问题要问或要分享想法,欢迎加入 Adobe XD 社区。我们很乐意倾听您的心声并欣赏您的创意作品。

更快、更轻松地获得帮助

新用户?