使用视频创建原型

上次更新日期： 2022年1月11日

打开应用程序

Adobe XD 用户指南
简介
设计
1. 画板、参考线和图层
2. 形状、对象和路径
3. 文本和字体
  1. 使用绘图和文本工具
  2. Adobe XD 中的字体
4. 组件和状态
5. 蒙版和效果
6. 版面
7. 视频和 Lottie 动画
原型
共享、导出和审阅
设计系统
云文档
集成和插件
iOS 和 Android 版 XD
1. 在移动设备上预览
2. 适用于移动设备的 Adobe XD 常见问题解答
故障排除
1. 已知问题和已修复问题
  1. 已知问题
  2. 已修复的问题
2. 安装和更新
3. 启动和崩溃
4. 云文档和 Creative Cloud Libraries
5. 创建原型、发布和预览
6. 导入、导出和使用其他应用程序

了解如何在 Adobe XD 中使用视频为交互式体验制作原型。

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

开始之前

了解如何导入视频并调整设置。

设置播放选项

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

在“设计”模式下，在画布上选择该视频。
在“属性检查器”的视频部分中，选择一个预设：
- 点击播放（默认选项）
- 自动播放
- 不播放

播放选项及其关联的交互

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

点击播放

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

自动播放

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

不播放

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

自定义视频播放

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

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

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

选择下列触发器之一：时间（将延迟设置为大于 0 秒）、按键和游戏手柄或语音。

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

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

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

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

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

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

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

了解交互和视频播放行为

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

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

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

在任意给定的画板上：

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

原型制作示例

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

使用示例文件练习用视频制作原型：

下载示例文件

示例 1：为视频的最大化按钮制作原型
示例 2：原型播放
更多示例

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

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

Ex 1-artboard 1

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

Ex 1-artboard 2

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

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

示例 2：原型播放

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

Ex 2-artboard 1

在“设计”模式中，导入“简介”视频，并将该视频放置在“简介”部分中。将视频设置为“不播放”。
导入“提示 1”和“提示 2”视频，并将它们放置在“提示”部分中。将视频设置为“不播放”。
在所有视频上放置“播放”按钮的副本（包含在“图标”部分中）。
在“原型”模式中：

将“简介”视频上的“播放”按钮连接到 Ex 2-artboard 2。
将“提示 1”视频上的“播放”按钮连接到 Ex 2-artboard 3。
将“提示 2”视频上的“播放”按钮连接到 Ex 2-artboard 4。

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

Ex 2-artboard 2

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

Ex 2-artboard 3

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

Ex 2-artboard 4

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