用户指南 取消(C)

制作原型动画

  1. Adobe XD 用户指南
  2. 简介
    1. Adobe XD 的新增功能
    2. 常见问题
    3. 利用 Adobe XD 进行设计、原型创建和共享
    4. 系统要求
      1. 硬件和软件要求
      2. Adobe XD、Big Sur 和 Apple Silicon | macOS 11
    5. 工作区基础知识
    6. 在 Adobe XD 中更改应用程序语言
    7. 访问 UI 设计套件
    8. Adobe XD 中的辅助功能
    9. 键盘快捷键
    10. 提示和技巧
    11. XD 入门计划的更改
  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. 使用 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. 导出和下载设计规范中的资源
  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. 云文档
      1. XD 云文档相关问题
    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. 第三方应用程序在导出中不可见

了解如何使用自动制作动画来创建微交互。

借助自动制作动画功能,您可以创建沉浸式过渡,以便呈现内容在画板之间的移动。

它同时提供“拖动”“时间”触发器的功能,可以帮助您创建各种效果(例如 YouTube 滑动和拖动效果),以便您更好地讲述原型故事。

网站中的涟漪互动效果
网站中的涟漪效果

触屏设备上的滑动和拖动效果
触屏设备上的滑动和拖动效果

要创建动画原型,请按照下列步骤操作:

  1. 在开始之前,请通过以下简单规则了解对象会在动画过程中经过哪些处理:

    • 如果对象没有出现在目标画板上,则该对象会淡入。
    • 如果对象没有出现在源画板上,则该对象会淡出。
    • 如果对象的图层名称和组均匹配,则系统会对属性进行动画处理。要全面了解哪些属性和过渡受支持,请阅读对象属性
    • 如果要构建水平或垂直滚动效果的原型,请使用滚动组
  2. 在原型模式下连接画板。 

  3. 单击连接器以查看“属性检查器”中显示的交互面板,并设置以下选项:

    • 触发器:选择一个选项以触发动画。例如,要模拟点击卡体验,请选择“点击”
    • 操作:选择“自动制作动画”。 您现在可以在单个触发器中分配两个操作,如点击。要进行这一操作,请将“属性检查器”中的第一个“操作 +”按钮设置为“过渡”“自动制作动画”“叠加”“滚动至”“上一个画板”,然后将第二个“操作 +”按钮设置为非过渡性操作,例如“音频播放”“语音播放”。 请注意,如果选择“音频播放”或“语音播放”作为第一个操作,则无法添加第二个操作。
    • 目标:选择目标画板以过渡动画。
    • 缓动:选择一个选项来模拟缓动效果。例如,如果您希望自己的动画实现从原型渐出的效果,请选择“渐出”
    自动制成动画工作流程
    自动制成动画工作流程

    A. 选择触发器类型 B. 选择要自动制作动画的操作 C. 选择目标画板 D. 选择缓动效果 

  4. 要为一个对象定义更多的交互,请选择已定义交互的对象,然后单击画板上的“+”按钮;或者,您也可以在“属性检查器”上单击“+”。

    请记住,您可以应用一次点击、拖动、悬停时间触发器,而应用多次语音按键和游戏手柄

  5. “受支持的浏览器”中选择“预览动画”。 

    请记住,在预览通过自动制作动画功能制作的画板时,XD 不支持滚动。

示例和示例文件

想了解自动制作动画的具体细节吗?开始使用此 UI 套件,它提供基本的交互、UI 元素、拖动示例等等。

您也可以使用更多这样的示例文件,试验自动制作动画功能。

希望实现 YouTube 滑动效果而不必费力地使用时间线和关键帧?

连接画板并在“属性检查器”原型中选择以下选项:

  • 触发器:选择“拖动”
  • 操作:选择“自动制作动画”
  • 目标:选择目标画板以创建动画过渡效果。
  • 缓动:选择一个选项来创建缓动效果。例如,选择“渐入渐出”可实现从原型渐入渐出的动画效果。

请下载示例文件并亲自尝试,或者观看本视频以了解更多信息。

观看时长:1 分钟。

希望了解如何使用渐入效果创建动画移动菜单?

  1. 下载示例文件。
  2. 在原型模式下,将汉堡菜单连接到 home_expanded 画板,然后在“属性检查器”原型中选择以下选项:
  • 触发器:选择“点击”
  • 操作:选择“自动制作动画”
  • 目标:选择目标画板以创建动画过渡效果。
  • 缓动:选择“渐入”效果。
  • 持续时间:将持续时间选择为 0.8 秒。

希望向您的设计中添加高级动画?观看此视频以使用 After-Effects。 

从 Adobe XD 导入 After-Effects(观看时长:1 分钟)

了解详情

要了解有关 XD 中的自动制作动画的更多信息,请观看此视频。
观看时长:6 分钟

Adobe 徽标

登录到您的帐户