用户指南 取消(C)

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

  1. Adobe XD 用户指南
  2. 简介
    1. Adobe XD 的新增功能
    2. 常见问题
    3. 利用 Adobe XD 进行设计、原型创建和共享
    4. 颜色管理
    5. 系统要求
      1. 硬件和软件要求
      2. Adobe XD、Big Sur 和 Apple Silicon | macOS 11
    6. 工作区基础知识
    7. 在 Adobe XD 中更改应用程序语言
    8. 访问 UI 设计套件
    9. Adobe XD 中的辅助功能
    10. 键盘快捷键
    11. 提示和技巧
  3. 设计
    1. 画板、参考线和图层
      1. 开始使用画板
      2. 使用参考线和网格
      3. 创建可滚动画板
      4. 使用图层
      5. 创建滚动组
    2. 形状、对象和路径
      1. 选择对象、调整对象的大小和旋转对象
      2. 移动、对齐、分布和排列对象
      3. 为对象分组、锁定、重复、复制和翻转对象
      4. 为对象设置描边、填充和投影
      5. 创建重复元素
      6. 使用 3D 变换创建透视设计
      7. 使用布尔运算编辑对象
    3. 文本和字体
      1. 使用绘图和文本工具
      2. Adobe XD 中的字体
    4. 组件和状态
      1. 使用组件
      2. 使用嵌套组件
      3. 向组件添加多个状态
    5. 蒙版和效果
      1. 创建一个形状蒙版
      2. 使用模糊效果
      3. 创建和修改渐变
      4. 应用混合效果
    6. 版面
      1. 响应式调整大小和约束
      2. 为组件和组设置固定的内边距
      3. 使用堆叠创建动态设计
    7. 视频和 Lottie 动画
      1. 使用视频
      2. 使用视频创建原型
      3. 使用 Lottie 动画
  4. 原型
    1. 创建交互式原型
    2. 制作原型动画
    3. 自动制作动画支持的对象属性
    4. 使用键盘和游戏手柄创建原型
    5. 使用语音命令和播放创建原型
    6. 创建定时过渡
    7. 添加叠加
    8. 设计语音原型
    9. 创建锚点链接
    10. 创建超链接
    11. 预览设计和原型
  5. 共享、导出和审阅
    1. 共享选定的画板
    2. 共享设计和原型
    3. 为链接设置访问权限
    4. 使用原型
    5. 审阅原型
    6. 使用设计规范
    7. 共享设计规范
    8. 检查设计规范
    9. 设计规范导航
    10. 审查和评论设计规范
    11. 导出设计资源
    12. 导出和下载设计规范中的资源
    13. 企业版的组共享
    14. 备份或转移 XD 资产
  6. 设计系统
    1. 带 Creative Cloud Libraries 的设计系统
    2. 在 Adobe XD 中使用文档资源
    3. 在 Adobe XD 中使用 Creative Cloud Libraries
    4. 从链接资源迁移到 Creative Cloud Libraries
    5. 使用设计令牌
    6. 使用 Creative Cloud Libraries 中的资源
  7. 云文档
    1. Adobe XD 中的云文档
    2. 协作与协同编辑设计
    3. 协同编辑与您共享的文档
  8. 集成和插件
    1. 使用外部资源
    2. 使用 Photoshop 中的设计资源
    3. 从 Photoshop 中复制和粘贴资源
    4. 导入或打开 Photoshop 设计
    5. 在 Adobe XD 中使用 Illustrator 资源
    6. 打开或导入 Illustrator 设计
    7. 将矢量从 Illustrator 复制到 XD
    8. 用于 Adobe XD 的插件
    9. 创建和管理插件
    10. XD 的 Jira 集成
    11. XD 的 Slack 插件
    12. XD 的 Zoom 插件
    13. 将设计从 XD 发布到 Behance
  9. iOS 和 Android 版 XD
    1. 在移动设备上预览
    2. 适用于移动设备的 Adobe XD 常见问题解答
  10. 故障排除
    1. 已知问题和已修复问题
      1. 已知问题
      2. 已修复的问题
    2. 安装和更新
      1. XD 似乎与 Windows 不兼容
      2. 错误代码 191
      3. 错误代码 183
      4. 安装 XD 插件时出现问题
      5. Windows 10 上提示卸载并重新安装 XD
      6. 迁移首选项有问题
    3. 启动和崩溃
      1. XD 在 Windows 10 上启动时崩溃
      2. XD 在您注销 Creative Cloud 时退出
      3. Windows 上订阅状态相关问题
      4. 在 Windows 上启动 XD 时出现“应用程序被阻止”警告
      5. 在 Windows 中生成故障转储
      6. 崩溃日志收集和共享
    4. 云文档和 Creative Cloud Libraries
      1. XD 云文档相关问题
      2. 链接组件的问题
      3. 库和链接的问题
    5. 创建原型、发布和预览
      1. 无法在 macOS Catalina 上录制原型交互
      2. 工作流程发布相关问题
      3. 浏览器中未显示发布的链接
      4. 浏览器中的原型呈现不正确
      5. 共享链接上意外出现评论面板
      6. 无法发布库
    6. 导入、导出和使用其他应用程序
      1. 在 XD 中导入和导出
      2. XD 中的 Photoshop 文件
      3. XD 中的 Illustrator 文件
      4. 从 XD 导出到 After Effects
      5. XD 中的 Sketch 文件
      6. 第三方应用程序在导出中不可见

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

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

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

继续操作之前

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

  • 无法为经过 3D 变换的组编辑画布上用于内边距、堆叠和重复网格的空间。 
  • 无法通过拖放对画布上的堆叠元素重新排序。您只能从图层面板中重新排列元素。
  • 以 3D 方式旋转图像时,某些图像发生图像质量下降的情况。
  • 如果合成中的对象在滚动画板、可滚动的组或嵌套的 3D 变换上具有固定对象,则预览表面上的阴影看起来略有不同。
  • 调整组的大小时,经过 3D 变换的对象的大小不变。
  • 经过 3D 变换的对象不支持矢量编辑和对象翻转。 
  • 3D 变换在 SVG 导出/导入工作流中尚不可用。
  • 3D 变换无法应用于画板,只能应用于其内容。
  • 开发人员规范尚不支持 3D 变换。
  • 将经过 3D 变换的内容转换为主组件时,它自动重置为 2D。
  • 可在组件实例上覆盖 3D 变换,但无法从主组件进行全局编辑。
  • 无法在组件内应用 3D 变换。
  • 将 3D 变换应用于悬停或点击状态时,变换将应用于该对象的所有状态。

模拟对象深度和透视

可将 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 社区。我们很乐意倾听您的心声并欣赏您的创意作品。

更快、更轻松地获得帮助

新用户?