用户指南 取消(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. Adobe XD 订阅选项
    12. 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. 使用视频创建原型
      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. 企业版的组共享
  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 中使用视频为交互式体验制作原型。

您可以为视频选择预设或自定义播放选项,并定义其他交互如何作用于该视频。在探索视频播放选项和交互时,请查看一些与视频相关的原型制作逼真示例。

开始之前

设置播放选项

设置视频的播放选项
设置视频的播放选项

将视频导入到 XD 中后,可控制视频将在何时播放。执行以下步骤可设置播放选项:

  1. 在“设计”模式下,在画布上选择该视频。
  2. 在“属性检查器”的视频部分中,选择一个预设:

播放选项及其关联的交互

在“设计”模式下设置视频的播放选项时,将自动在“原型”模式下设置关联的交互。

点击播放

在选择点击播放时,将自动设置点击触发器,其默认操作为切换播放/暂停

点击播放 - 设计模式

点击播放 - 原型模式

自动播放

当选择自动播放时,时间触发器会自动设置为 0 秒延迟。

自动播放 - 设计模式

自动播放 - 原型模式

不播放

当选择不播放时,将不会在“原型”模式下创建任何交互。

自定义视频播放

选择“编辑播放”以自定义播放
选择“编辑播放”以自定义播放

要自定义视频播放,请在“属性检查器”的“视频”部分中选择“编辑播放”

当选择“编辑播放”时,将自动切换到“原型”模式。

在“原型”模式下,可选择以下这些自定义的任何一个:

选择下列触发器之一:时间(将延迟设置为大于 0 秒)、按键和游戏手柄语音

选择“时间”触发器并将“延迟”设置为大于 0 秒
选择“时间”触发器并将“延迟”设置为大于 0 秒

点击触发器的视频播放操作从切换播放/暂停更改为播放暂停

通过选择“点击”触发器并以“播放”或“暂停”作为其操作而自定义播放
选择“点击”触发器并以“播放”或“暂停”作为其操作

您不能将视频设置为使用“拖动”触发器播放。

将视频播放与其他交互结合使用

带过渡到画板的“播放结束”触发器的视频
带过渡到画板的“播放结束”触发器的视频

在为视频设置播放选项后,探索如何将视频与其他交互连接:

  • 为视频设置“播放结束”交互以在视频播放后触发操作。
  • 同时播放视频与多个 Lottie 文件

要详细了解如何在 XD 中制作原型,请参阅创建交互式原型

了解交互和视频播放行为

根据您为其他对象设置的交互,您的视频将停止或继续播放:

  • 在触发自动制作动画和 Lottie 播放以外的操作时,视频将停止播放。
  • 如果您希望在将鼠标悬停在其他对象上或点击其他对象时,视频继续播放,请使用自“动制作动画”作为“悬停”和“点击”触发器的操作。

“视频”和“时间”触发器

在任意给定的画板上:

  • 您可以拥有多个“时间”触发器,这些触发器按其时间延迟排序。
  • 您可以将一个视频和多个 Lottie 动画设置为在同一时间延迟后一起播放。还可以将它们设置为一起自动播放(时间延迟设置为 0 秒)。
  • 如果在画板、视频和 Lottie 上设置具有相同时间延迟的“时间”触发器,则优先级为:“画板”>“视频”>“Lottie”。

原型制作示例

现在您已了解如何为视频设置播放选项并将它与其他交互连接,下面我们尝试一些示例。

下载示例文件

示例 1:为视频的最大化按钮制作原型

了解如何为视频的最大化按钮制作原型。

Ex 1-artboard 1

  1. 在“设计”模式中,导入"提示 1"视频,并将该视频放置在画板上。将视频设置为“点击播放”。
  2. 将“最大化”图标(包含在画板右侧的“图标”部分中)放置在视频的右下角。 
  3. 在“原型”模式中,将“最大化”图标连接到 Ex 1-artboard 2,并将它设置为“点击”触发器且“操作类型”为“自动制作动画”。

Ex 1-artboard 2

  1. 在“设计”模式中,导入"提示 1"视频,并将该视频放置在画板上(全屏视频)。将视频设置为“点击播放”。
  2. 将“最小化”图标(包含在“图标”部分中)放置在视频的右下角。 
  3. 在“原型”模式中,将“最小化”图标连接到 Ex 1-artboard 1,同时将它设置为“点击”触发器,并将“操作类型”设置为“自动制作动画”。

在连接完交互后,预览原型并检查交互。

示例 2:原型播放

了解如何在 XD 中连续播放视频。

Ex 2-artboard 1

  1. 在“设计”模式中,导入“简介”视频,并将该视频放置在“简介”部分中。将视频设置为“不播放”。
  2. 导入“提示 1”和“提示 2”视频,并将它们放置在“提示”部分中。将视频设置为“不播放”。
  3. 在所有视频上放置“播放”按钮的副本(包含在“图标”部分中)。
  4. 在“原型”模式中:
  • 将“简介”视频上的“播放”按钮连接到 Ex 2-artboard 2。
  • 将“提示 1”视频上的“播放”按钮连接到 Ex 2-artboard 3。
  • 将“提示 2”视频上的“播放”按钮连接到 Ex 2-artboard 4。 

将视频全部设置为“点击”触发器,并将“操作类型”设置为“过渡”。

Ex 2-artboard 2

  1. 在“设计”模式中,导入“简介”视频,并将该视频放置在“提示”部分的上方。将视频设置为“自动播放”。
  2. 在“原型”模式中,将视频连接到 Ex 2-artboard 3,同时将它设置为“播放结束”触发器,并将“操作类型”设置为“过渡”。

Ex 2-artboard 3

  1. 在“设计”模式中,导入“提示 1”视频,并将该视频放置在“提示 1”部分的上方。将视频设置为“自动播放”。
  2. 在“原型”模式中,将视频连接到 Ex 2-artboard 4,同时将它设置为“播放结束”触发器,并将“操作类型”设置为“过渡”。

Ex 2-artboard 4

  1. 在“设计”模式中,导入“提示 2”视频,并将该视频放置在“提示 2”部分的上方。将视频设置为“自动播放”。
  2. 在“原型”模式中,将视频连接到 Ex 2-artboard 1,同时将它设置为“播放结束”触发器,并将“操作类型”设置为“过渡”。

在连接完交互后,预览原型并检查交互。

更多示例

探索与视频、Lottie 动画和组件状态相关的更多示例。

了解详情

观看这段为时 2 分钟的视频,了解有关在 XD 中使用视频的一些专业技巧。

相关资源

有疑问或想法?

咨询社区

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

Adobe 徽标

登录到您的帐户