小窍门
怎样使用 ProtoPie 的 Handoff 功能
了解如何使用 ProtoPie 的交付功能，将交互规范传达给开发人员
Jeff Clarke, UX Designer & ProtoPie Educator
October 18, 2024
本文将介绍一个非常有用的 ProtoPie 功能——handoff（之前称为 Interaction Recipes）。
所需内容
ProtoPie 允许基础和免费版用户进行一次交互录制，订阅专业版或企业版后，你可以与团队录制并分享无限次的录像。
你将学到的内容
在本教程中，你将学会如何：
- 将 Pie 文件上传到团队空间
- 录制交互操作
- 查看交互录制内容
- 与您的团队分享交互录制
ProtoPie 的 Handoff 功能是什么？
ProtoPie 的 Handoff 功能弥合了设计与开发之间的差距，确保交互设计能够准确地转化为代码。
通过 Handoff，你可以创建展示用户流程、元素动效和交互的录制。Handoff 不仅仅是简单的交接文档，它是一个完整的交互规范，包含可滑动的时间线、缓动参数、起始和结束属性以及精确的时间点。通过这些详细信息，开发人员可以获得逐帧的设计指南，消除其中的不确定性，使你的设计意图能够清晰呈现。
步骤 1：将你的 Pie 上传到 ProtoPie Cloud
- 在 ProtoPie Studio 中打开你的 Pie。
- 点击 Studio 界面右上角的 Handoff 图标。
- 选择一个团队空间或个人空间，将你的 Pie 保存到 ProtoPie Cloud。交互录制也会保存在同一个位置。
- 上传完成后，您将被带到 Pie 的云页面。
步骤 2：录制您的交互
- 在云页面的右上角找到 Handoff 按钮。
- 点击 Record 按钮开始录制。
- 与您的 Pie 互动，展示你想要交给开发团队的特定交互。当你完成后，点击页面顶部的“停止”按钮。
- 您的交互录制默认将保存为“新录制”。您可以通过点击交接菜单中的铅笔图标来重命名它。
就是这样！仅仅几秒钟，你就创建了第一个交互录制。
步骤 3: 评审您的交互录制
- 在停止录制后，您可以查看刚刚录制的内容。交互录制包含一个时间轴，显示你录制的所有内容，并且会同步更新显示你的Pie的视觉预览。
- 时间轴上的交互会被分组为触发器（Triggers）和响应（Responses），这与你在 Studio 中看到的相同。
💡 你可以进行以下操作：
- 通过拖动播放进度条逐帧预览动画：将红色倒水滴形控件（即播放头）左右拖动，你可以逐帧预览刚刚录制的交互动画。
- 以不同速度回放动画：你可以使动画的回放速度更快或更慢。点击回放速度图标，选择一个速度，然后点击 play 图标开始动画。播放时图标会变成 pause 图标，点击暂停可停止播放。回放将从当前播放进度位置继续，你可以随时通过拖动播放进度条或点击时间轴顶部来重新定位播放进度条。
- 调整界面尺寸：通过拖动预览和时间轴之间的分隔线，你可以使时间轴变高或变短。
- 检查特定响应的动画：点击时间轴中的任何响应，右上角会弹出一个检查器窗口，显示动画起始和结束点的属性值、动画曲线的缓动参数，以及你正在检查的特定属性的“当前”值。当前值会与播放进度条同步，实时更新。
- 检查特定图层：预览左侧显示图层堆栈。点击任意图层后，右侧的检查窗口将实时更新，显示与播放进度条同步的该图层属性。
步骤4：分享你的交互录制
最后，你需要将交互录制分享给你的团队。你可以通过以下两种方式进行分享：
- 分享整个 Pie 的云链接：拥有此链接的任何人都可以通过点击 "Handoff" 按钮访问为该 Pie 创建的所有交互录制。要分享云 Pie 链接，点击紫色的 "Share" 按钮，配置分享选项，然后点击 "Copy link" 复制链接。
- 分享特定录制的直接链接：前往 Pie 云页面，点击 "Handoff" 按钮，从列表中选择你想要分享的交互录制。点击录制以打开页面。你可以从地址栏复制链接，或者点击“复制链接”按钮，将其分享给你的团队。
交互录制小技巧
- 你的交互录制受与 Pie 相同的访问设置保护。你可以通过点击 Pie 页面上的分享按钮来修改这些设置。
- 当你创建交互录制时，该录制不会自动更新以反映到你之后上传到 ProtoPie 云的任何更改。它代表你在录制时的 Pie 版本。因此，如果你所做的更改影响了特定的录制，你需要创建一个新的录制并分享给相关人员。旧的录制不会被自动删除，它将与你创建的新录制一起显示。因此，你可能需要养成在录制名称中包含录制日期的习惯，类似于这样：
当然，你不必保留旧的录制。如果删除它能帮助你更好地整理项目，你随时可以删除它。但请注意：一旦删除录制，它将永久消失，无法恢复。
短短几分钟内，你已经学会如何使用 ProtoPie 的 Handoff 功能为你的原型创建可交付的视频和规格，并与开发团队共享。