图稿创作人：Matt Rae
Adobe XD 支持从图像和矢量图形，到音乐和音频文件的多种媒体类型，让您能够轻松地设计和创建原型，创造出令人惊叹的数字体验。
将视频和 Lottie 添加到 Adobe XD 中
在学习本教程之前，了解视频和 Lottie 媒体如何在 Adobe XD 中呈现将有助于您后面的学习。就像图像和矢量图形一样，视频和 Lottie 文件也可以直接从计算机的文件系统拖放到画布上。然后，在画布上将文件移动到合适的位置。您还可以在“设计”模式的“属性检查器”中调整设置。
与拖放图像的方式相同，将其中一种文件类型拖放到矢量形状或矢量路径上时，会自动将文件遮盖在形状边界内，所以视频和 Lottie 内容可以轻松填充占位块的形状。在使用高保真资源填充线框布局时，效果非常好。将视频或 Lottie 文件添加到形状后，双击蒙版可以调整文件在蒙版内的位置。
Adobe XD 目前仅支持不超过 15MB 的 MP4 视频文件，以优化速度和性能。Lottie 文件采用 JSON 格式，可以从 LottieFiles 下载，或者使用 LottieFiles 插件从 Adobe After Effects 导出。
在上述的入门文件中，您可以找到一个文件夹，里面有几个视频和 Lottie 文件，可在本教程项目中使用。
入门文件里有许多资源、组件和 UI 元素，您可以使用这些素材来设计和创建原型，模拟浏览短视频片段的移动视频体验。本指南将重点介绍如何添加视频和 Lottie 文件，因此您可以发现有几个页面已经布置好了，可以随时使用。
创建应用程序登录流程
首先要创建的体验是登录流程，用户将从这一步开启他们的移动体验之旅。登录流程从带有应用程序动画徽标的起始页面开始，然后进入一系列登录界面，界面带有在背景中自动播放的视频。
应用程序动画徽标
首先，从“文档资源面板”中找到“动画徽标”组件，然后将实例拖放到第一个页面上，替换画板中间的临时占位矩形。动画徽标组件包括在 After Effects 中创建并导入 Adobe XD 的 Lottie 文件。
为确保徽标动画自动播放，需要在“属性检查器”中更新播放设置。在“交互式媒体”部分，从下拉菜单中选择“自动播放”。在预览窗口打开时预览设计，可看到 Lottie 动画自动播放。
由于此徽标动画模拟的是应用程序的加载，因此在动画结束后，原型会进入下一个页面。所以需要再次选择 Lottie 动画，并切换到“原型”模式。在“交互”菜单中选择“+”，然后用“播放结束”触发器添加新的交互。不要覆盖“时间”触发器，因为此交互是让动画自动播放的触发器。
在选择“播放结束”作为触发器后，将该目标设置为登录流程的第一个页面（“主页”页面加载）。这可以让原型在动画结束后进入下一流程。
背景视频
接下来是添加视频文件，作为注册流程的背景。注册流程有多个页面，在一个页面上设置背景后，可以便捷地复制并粘贴到其他页面上。
在第一个页面上，从“图层”面板中选择“视频占位块”图层，并将其移动到堆叠的顶层（这样可以更轻松地添加视频，并且可以使用键盘快捷键快速添加）。然后从“示例文件”文件夹中拖入 HomeScreen.mp4 文件，并将其置于矩形形状中（当矩形变蓝时释放鼠标）。
双击矩形，根据需要调整蒙版。调整好后，导航到“属性检查器”并打开视频设置。在本例中，视频需要循环播放，因此点击“循环”使其启用。在“视频设置”下拉菜单中选择“自动播放”。
现在，将此视频元素复制到剪贴板上，在注册流程中选择其余画板，然后粘贴到上面（XD 会自动粘贴到所有选定的画板上）。
最后，将各个实例移动到各个画板上图层堆叠的底层（可按下键盘快捷键“Shift + [”来实现）。此注册流程中的画板已经与“自动制作动画”关联，因此在预览窗口打开时，点击预览将看到视频自动播放，并在用户与原型交互期间保持播放状态。在最后两个画板上，将视频的播放设置为“不播放”，因为视频在这两个页面上是不可见的。
创建加载进度条
在注册完成后，应用程序会显示正在加载，然后过渡到应用程序的主页。要创建此效果，可在注册和主页之间的页面上添加另一 Lottie 动画。
在标题为“应用程序加载”的画板上，从文档资源中将“加载进度条”Lottie 文件拖入到占位矩形上。与前面设置动画徽标的方法相同，将动画设置为“自动播放”，并在播放结束后，导航到中间阶段画板，随后将自动过渡到“主页”页面。
要创建从上一个页面平滑过渡的效果，需要在注册流程的最后一个页面上放置一个加载进度条的副本，但应缩小尺寸，并将不透明度设置为 0%。当“自动制作动画”引起页面过渡时，加载进度条的动画会开始播放，看上去就像进度条在变长一样。
创建垂直视频轮盘
注册流程完成后，就可以去设置应用程序的“主页”页面了。这一页面就像是垂直的视频轮盘，在一个视频播放结束后滚动到下一个视频。此轮盘的创建方式与基于图像的轮盘的创建方式类似，都是使用 Adobe XD 来创建交互元素。但在这里，视频播放将被设置为一次只播放一个视频，并在视频结束后自动播放下一个视频。
创建视频组件
此元素的组件是现成的，请在练习文件的“组件”部分找到“主组件”。我已经为要包含在播放源中的四个视频分别创建了实例。
首先，选择标记为“发布元素”的第一个实例，然后像之前一样选择占位图像矩形。从“资源”文件夹中拖入 Berg.mp4 视频，并根据需要调整蒙版。其它设置暂时不用调整，因为这些设置可以在组件的各个状态中调整。
对页面上的其他三个实例重复此操作，将 Walk.mp4、Dive.mp4 和 River.mp4 视频分别添加到各个视频占位矩形中。
最后，将所有视频元素整合成一个组件，即将它们垂直堆叠起来，组成一个名为“视频源”的组件。
在此视频源中，需要让用户能通过拖动来播放下一个视频，或者等视频播放结束后自动播放下一个视频。要实现此效果，需要使用单独的画板，而不是运用组件状态功能，并且组件的位置会根据要播放的视频简单地上下移动。
放置已整合的组件
首先，找一个已整合的组件的实例（因为每个组件都会有覆盖），并将其放在主页源的第一个画板上。使用方括号键盘快捷键，或“图层”面板，将其放置在图层堆叠的底层，并确保组件顶层（堆叠中的第一个视频）放置在最上面。
接下来，双击组件，将第一个视频设置为“自动播放”。对于每个画板，都只应将视图中的视频设置为“自动播放”，因此您需要确保这些更改仅应用于已整合组件的实例，而非主组件。
创建视频交互原型
最后，要将视频连接起来，您需要在每个视频上都创建两个交互。第一次交互应创建在视频上，即第一个视频上，在“图层”面板中选择视频。在“原型”模式中，设置与“播放结束”触发器的新交互，以及系列中下一个画板的目标。使用“自动制作动画”作为操作类型，然后选择您需要的缓动。第一个视频播放结束后，此交互将自动跳转到下一个视频。
如果视频较长，或者用户希望跳过并观看下一个视频，则可以添加“拖动”交互。要实现此功能，选择已整合的视频组件本身，并在“原型”模式中用“拖动”触发器添加交互。再次使用“自动制作动画”，并选择系列中的下一个画板。当用户向上拖动视频组件时，原型会显示视频向上滚动的动画效果，并开始播放下一个视频。
连接应用程序的其他部分
画布上还提供其他了画板，其中嵌入有视频。尝试用这些提供的资源来从配置文件页面创建视频详情视图，或者创建您自己的资源来完成视频应用程序体验。
学习这些原型创建教程，了解更多关于使用 Adobe XD 创建原型的信息，以及学会如何创建其他类似的体验。
