随着数字时代影响力的不断扩大，音乐和视频已稳固地成为我们最主要的娱乐来源。当你需要设计一款以音视频体验为核心的应用时，一个关键因素便凸显出来：高级原型设计。
想想那些每天占据我们屏幕的应用：Netflix、Spotify、TikTok 和 Facebook。它们的核心都离不开一个可靠的媒体播放器，具备播放、暂停、流畅进度控制以及精准音量调节等基础功能。
尤其是在 ProtoPie 这位可靠伙伴的帮助下，高级原型设计比你想象的更容易上手。在本教程中，我们鼓励你站在顶尖应用设计师的角度思考。我们将展示，如何轻松打造既吸引人又适合新手设计师实现的多媒体体验。
概览
媒体播放器是如何工作的
开始之前
使用 ProtoPie 创建交互式媒体播放器
在你的原型中使用视频
从悬停效果开始
添加基础播放与暂停控制
跟踪视频进度
调节视频音量
就是这样！你的原型完成了
加入我们的电视与视频流媒体大师课
媒体播放器原型是如何工作的
虽然我们的演示聚焦于视频播放器，但我们将介绍的步骤同样适用于音频播放器。在深入细节之前，先快速看看你将能够创建的交互：
基础播放/暂停控制——你可以直接点击播放/暂停按钮来开始或停止播放。或者，点击视频任意位置也能实现相同的播放/暂停操作。
跟踪视频进度——要导航视频进度，你可以点击进度条上的任意位置，或直接拖动进度条本身。
音量控制——调节音量就像拖动音量滑块一样简单。值得注意的是，音量图标会根据音量大小改变外观。或者，你也可以直接点击音量按钮将视频静音。
开始之前
这是你将学到内容的预览。不过在开始前，先把氛围拉满。请确保你已在手机上安装好 ProtoPie Player 应用。这个应用是你测试并验证即将实现的强大媒体播放器控制功能的关键！
下载下方的起始 Pie 文件，并在 ProtoPie Studio 中打开我们的媒体播放器原型。
媒体播放器原型预览
准备好了吗？开始学习吧！
使用 ProtoPie 创建交互式视频播放器
1. 在你的原型中使用视频
借助 ProtoPie 内置的媒体图层，你可以轻松将视频和音频无缝整合到原型中。ProtoPie 支持多种媒体文件类型，包括：
.mp4（H.264），最大 100 MB。.wav、.mp3和.m4aLottie
JSON
2. 从悬停效果开始
当你打开起始 pie 文件时，会注意到模板中已经预设了一组交互。这些交互包含了覆盖层、按钮及各种功能的悬停效果，通过 Mouse Over 和 Mouse Out 触发器实现。
如果你刚接触这些功能，ProtoPie School 提供了一个便捷的 快速入门课程，帮助你更快熟悉。
让我们打开预览窗口，仔细看看你现在可以使用的内容：
将鼠标悬停在视频播放器上会触发覆盖层，展示不同功能。
每个功能（如播放/暂停、快进）都有各自的悬停效果。
如果你将光标移出视频播放器，只需等待 3 秒，覆盖层就会平滑淡出。
“起始 Pie”文件预览
3. 添加基础播放与暂停控制
当然，我们先从配置原型开始：视频一加载就自动播放。只需对视频图层做一个简单设置即可实现。
选中视频图层，然后进入其属性面板。在这里启用 Play Automatically 选项。
自动播放选项
现在打开预览后，你会看到视频加载完成后会自动开始播放。
💡 专业提示！ ProtoPie 会在你编辑时刷新预览窗口，便于你及时查看更新。但在处理媒体图层时，这可能导致频繁刷新和声音重复播放。如果你希望更可控的体验，可以在预览窗口设置中关闭 Auto Restart 选项。
预览窗口设置中的“Auto Restart”选项。
在我们的示例中，有两种播放或暂停视频的方法。第一种是使用专门的播放/暂停按钮，第二种是点击视频任意位置实现同样操作。
先从第一种开始——使用播放/暂停按钮。
为简化交互过程，我们先确保覆盖层可见。找到 Overlay Functions Bottom 组并将其不透明度设为 100。这样更容易找到需要的图层。
覆盖层功能。
在图层面板中，找到名为 Play/Pause 的组。组内有两个图标：Play 图标和 Pause 图标。当前 Play 图标被设置为透明（Opacity = 0），因此在预览窗口中你只会看到 Pause 图标。
播放/暂停图标的不透明度。
先给 Play/Pause 组添加一个 Tap 触发器。接着创建一个条件：Play 图标的不透明度等于 0。在该条件下，为 Video 图层添加一个 Playback 响应，将其暂停。
同时我们还需要切换图标。将 Play 图标不透明度设为 100，将 Pause 图标不透明度设为 0。
播放/暂停按钮图标不透明度。
同样地，我们还需要第二个条件：当 Play 图标不透明度已经为 100 时。为简化操作，可直接复制第一个条件并修改。选中第一个条件后按键盘 ⌘ + D（Windows 为 ctrl + D）。
在第二个条件中，我们将 Play 的不透明度 设为 100。随后的响应是播放视频，将 Play 图标不透明度改为 0，Pause 图标不透明度改为 100。
将 Play 图标不透明度改为 0，Pause 图标不透明度改为 100。
现在看看预览窗口。你会看到播放/暂停控制运行得非常完美。
第二种方法——点击视频任意位置——其交互与我们刚配置的第一种方法非常相似。
触发点是在视频任意位置点击。所以我们给 Video 图层添加一个 Tap 触发器。然后就很简单了！直接复制播放/暂停按钮的交互并粘贴到这里。
复制播放/暂停按钮交互并粘贴。
再做一些收尾。在图层面板中你会看到一个名为 Large Play Button 的组。我们希望视频暂停时它可见，视频播放时它隐藏。可通过 Opacity 响应来控制显示与隐藏。
大播放按钮。
最后还有一个细节。虽然我们说是点击视频任意位置，但严格来说，我们仍希望避开顶部和底部功能区域。
避开顶部和底部功能区域。
为此，选中 Overlay Functions Top 和 Overlay Functions Bottom 两个组，并在其属性面板中关闭 Make Lower Layers Touchable 选项。
关闭 Make Lower Layers Touchable 选项。
恭喜！你已成功实现完整可用的播放/暂停控制系统。无论点击专用按钮还是屏幕任意位置，你都能流畅控制视频播放。做得很棒！
4. 跟踪视频进度
现在，我们来设置进度条交互。这包含一系列操作：
根据视频显示当前播放时间和总时长。
确保视频播放时，进度条同步移动并反映当前时间。
允许用户拖动进度条在视频中导航。
提供点击视频任意位置导航的替代方式。
我们逐个来完成。
显示视频时间
先添加一个 Detect 触发器。触发属性选择 Video 图层的 Time 属性。这样会持续监听视频当前播放时间变化，并在变化时触发相应交互。
添加 Detect 触发器。
接着，给 Play Time 图层添加一个 Text 响应。这里我们使用 Formula。公式为 ``Video
.currentTime.这样图层就能准确显示视频当前播放时间。
为 Play Time 图层分配 Text 响应。
预览时你可能会看到时间以带两位小数的秒数显示。这种格式可能不够理想。我们将把它格式化为更友好的展示形式。
时间以带两位小数的秒数显示。
为了实现目标时间格式，我们将创建两个仅用于当前场景的变量。一个变量 min 表示分钟位，另一个 sec 表示秒数。
然后在两个变量中都勾选 Use Formula 选项，并按如下方式设置公式。
在两个变量中勾选“Use Formula”选项。
对于 **min **变量，使用
floor(Video.currentTime/60)。该公式通过将当前播放时间除以 60 并向下取整来计算分钟位。
min 的公式设置。
对于 sec 变量，使用
floor(Video.currentTime-min*60)。该公式通过“当前播放时间减去分钟值乘以 60”并向下取整来计算秒位。
sec 的公式设置。
变量配置完成后，先快速调试检查。点击 ladybug 图标可将变量显示在屏幕上。在预览窗口中你会看到变量显示在绿色框内。
进行一次快速调试检查。
最后回到 Text 响应，调整其中公式为：
lpad(min,2,"0")+":"+lpad(sec,2,"0")。该公式可确保时间按目标格式显示，并在需要时补零保持一致。
修改公式。
要显示总时长，你可以点击视频图层，在属性面板中找到总时间。利用该信息即可在设计中按所需格式展示总时长。
你可以相应调整设计，以所需格式显示总时长。
做得好！时间显示设置已完成。现在预览一下目前成果，看看它们如何协同工作。
与进度条交互
接下来处理进度条。首先，我们希望进度条能反映当前视频进度。
为了将视频时间与进度条关联，给 Video 图层添加一个 **Chain **触发器。触发属性选择 Time。
给 Video 图层添加 Chain 触发器。
现在我们希望视频时间驱动进度条。给 Knob 图层添加一个 Move 响应，Knob 即用于拖动进度条的小圆点（教程后面会进一步介绍）。
给 Knob 图层添加 Move 响应。
Video 的范围从开始时间到结束时间。Knob 的 X 位置应从最左移动到最右，因此这里范围是 0px 到 1200px。这样即可让进度条与视频播放时间同步。
我们还希望 Active Fill 图层随 Knob 的移动而缩放。在这种情况下，再添加一个针对 ’s X position 的 Chain。然后给 Active Fill 一个 Scale 响应。
再添加一个针对 ’s X position 的 Chain，并给 Active Fill 添加 Scale 响应。
该设置将确保 Knob 沿进度条移动时，Active Fill 图层同步缩放。
让我们在预览窗口中看一下效果。
播放时间显示预览。
现在让进度条可拖动。拖动交互将应用在进度条的 Knob 上，使你可以在视频进度中定位。同时，视频将调整播放位置，Active Fill 图层也会相应填充进度条。
给 Knob 图层添加一个 Drag 触发器。
在 Drag 交互下，为 Knob 配置一个 Move 动作。该 Move 动作需限制为仅水平移动。同时设置边界，确保 Knob 不会移动到进度条外部。具体限制为 0px 到 1200px，保证其始终在进度条范围内。
为 Knob 配置 Move 动作。
当我们完成拖动并松开鼠标时，希望视频跳转到 Knob 当前拖到的位置。因此给 Knob 图层添加一个 Touch Up 触发器。
给 Knob 图层添加 Touch Up 触发器。
对于 Touch Up 动作，我们给 Video 图层设置一个 Playback 响应。在 Playback 中选择 Seek，并使用以下公式：
Knob`.x / 1200 * Video.totalTime`
为 Video 图层设置 Playback 响应。
这个公式涉及一点数学计算。本质上，它通过 Knob.x / 1200` 得到当前进度比例（即 Knob 在进度条中的当前位置），再乘以视频总时长。
现在预览看看。你会发现可以拖动进度条上的小圆点，精准控制视频进度。
进度条拖动操作预览。
在进度条区域内，我们还希望支持点击任意位置，直接将视频进度设置到该点。
给 Progress Bar 组添加一个 Tap 触发器，然后给 Video 图层添加一个 Playback 响应。
对于 Playback，仍使用 Seek 和公式。公式为
toLayerX(Progress bar,$touchX,$touchY) / 1200 *Video`.totalTime```
给 Progress Bar 组添加 Tap 触发器，然后给 Video 图层添加 Playback 响应。
在这个公式中，$touchX 和 $touchX 会获取相对于整个场景的触摸位置。借助 toLayerX()，我们将 X 坐标转换为相对于 Progress Bar 容器的位置。
预览目前成果。可以看到，点击进度条任意位置都能轻松拖动到对应视频进度。
进度条点击操作预览。
进度条交互就到这里。干得漂亮！现在你已经拥有一个像主流媒体播放器一样可用的进度条。
5. 调节视频音量
为了让体验更完整，我们来添加音量控制。由于这部分交互与前面类似，我们会采用更精简的方式讲解，保持简单清晰。
拖动音量滑块——该功能与我们为进度条设置的拖动操作类似。在起始原型中，你可以在名为 Drag Volume Slider. 的组里找到它。
点击音量滑块——该操作与进度条的点击交互类似。在起始原型中，你可以在名为 Tap Volume Slider. 的组里找到它。
根据音量等级显示不同音量图标——我们使用 Range 触发器检测音量等级并显示不同图标。查看这个关于 Range 触发器的 快速入门课程，可更好理解该功能。
音量滑块交互预览。
在这里，我们重点实现流畅的静音与取消静音体验。
给 Volume Button 组添加一个 Tap 触发器。
给 Volume Button 组添加 Tap 触发器。
和处理 Play/Pause 按钮类似，在 Volume Button Group 中你会看到 Muted 与 Unmuted 组。它们包含表示不同状态的图标。
Muted 和 Unmuted 组。
先设置一个条件：当 Muted 组的不透明度为 0 时，表示视频当前有声音。满足条件时，将 Volume Level 图层的宽度设置为 0。
设置一个条件。
在我们的起始 pie 中，你会看到视频音量与 Volume Level 的宽度是链式关联的，因此这会把音量降到 0。
我们再创建一个条件：当 Muted 组的 Opacity 为 100 时，表示视频已静音。在这个条件中，将 Volume Level 图层宽度恢复到静音前的状态。
创建另一个条件。
这需要让 ProtoPie 记住 Volume Level 在被降为 0 之前的宽度。变量可以帮我们实现。创建一个名为
volumeResumeLevel的变量。在第一个条件（
Opacity of Muted = 0）下，将 Volume Level 的 Width 赋值给新建变量。
将 Volume Level 的 Width 赋值给新建变量。
完成这一步后，当你点击 Volume Button 将视频静音时，点击瞬间的 Volume Level 值会被 volumeResumeLevel 变量记住。
接着在第二个条件（
Opacity of Muted = 100）下，对 Volume Level 图层添加一个 Scale 动作。该动作将图层缩放到volumeResumeLevel中存储的值，从而把音量恢复到静音前水平。
对 Volume Level 图层实现 Scale 动作。
最后回顾一下静音/取消静音体验。正如你所见，当取消静音时，音量会恢复到静音前的原始水平。
静音/取消静音体验最终预览。
就是这样！你已经做出了一个可用的视频播放器原型
恭喜你成功在 ProtoPie 中实现媒体播放器的交互控制！你已经学会如何创建流畅的用户体验，让用户轻松完成播放、暂停、调整进度、控制音量以及静音/取消静音。这些技能可应用于多种设计项目，显著提升应用的交互性与功能性。
提升你的高级原型设计技能
ProtoPie 提供了一个强大的平台来创建复杂交互，还有更多内容等待探索。如果你想进一步加深知识与技能，欢迎来到 ProtoPie School，学习我们的综合课程 ProtoPie 101 course。已有至少 10,000 名学员报名，他们同样希望成为原型设计专家，并将交互设计提升到新高度。
加入我们的电视与视频流媒体大师课
应大家的强烈要求，我们终于推出了 电视原型设计与视频流媒体应用 UX 大师课。立即在下方报名，开始在 ProtoPie School 学习，并及时掌握与影视、电视和制作相关的最新功能动态。
祝你设计与原型创作愉快！
