ProtoPie AI 已上线——现已进入 Beta 版。了解更多

ProtoPie AI 已上线——现已进入 Beta 版。了解更多

ProtoPie 学校

10

阅读时间

第2课:如何使用接力功能

了解如何使用 ProtoPie 的 Handoff 功能,将交互规范交付给开发人员。

尤利娅·索罗多克, ProtoPie 的产品营销经理

欢迎来到 ProtoPie School 的第二期课程,我们将帮助你快速上手 ProtoPie。本文将介绍 ProtoPie 的一项强大功能——Handoff(此前称为 Interaction Recipes)。

你需要准备什么

ProtoPie 让该功能对设计师更易用:Basic 和 Free 套餐用户最多可录制一个交互录制。订阅 Pro 或 Enterprise 套餐后,你可以录制并与团队共享不限数量的录制内容。

你可以使用任意 Pie,但如果你想跟着我一起操作,可以使用这个:

[Handoff Pie 文件]

你将学到什么

在本教程结束时,你将知道如何:

  • 将 Pie 上传到团队空间

  • 录制交互录制

  • 查看交互录制

  • 与团队共享交互录制

完成时间:≤15 分钟

视频

什么是 ProtoPie 的 Handoff 功能?

ProtoPie 的 Handoff 功能弥合了设计与开发之间的鸿沟,确保你的交互能够被准确地转换为代码。

借助 Handoff,你可以创建交互录制,展示原型中的用户流程、元素行为和交互。交互录制不仅仅是简单交付——它是完整的交互式规格说明,包含可拖动时间轴、缓动参数、起始和结束属性以及精确时序。这能消除猜测,让开发者清晰地逐帧理解你的设计意图。

步骤 1:将你的 Pie 上传到 ProtoPie Cloud

  • 在 ProtoPie Studio 中打开 Pie。

  • 点击 Studio 界面右上角的 Handoff 图标。

  • 选择 Team SpacePersonal Space,将 Pie 保存到 ProtoPie Cloud。交互录制也会保存在同一位置。


click handoff
  • 上传完成后,你将进入该 Pie 的云端页面。

步骤 2:录制你的交互

  • 在云端页面右上方找到 Handoff 按钮。

  • 点击 Record 按钮开始录制。


start recording handoff
  • 在你的 Pie 中进行交互,演示你希望交接给工程团队的具体交互。完成后,点击页面顶部的 Stop 按钮。

  • 你的交互录制默认会保存为“New Recording”。你可以在 Handoff 菜单中点击铅笔图标为其重命名。


rename interaction recording

就是这样!仅需几秒钟,你就创建了第一个交互录制。

步骤 3:查看你的交互录制

  • 停止录制后,你就可以查看录制内容。一个 交互录制 由你所录制内容的时间轴,以及与时间轴同步更新的 Pie 可视化预览组成。


review interaction recording
  • 时间轴中的交互会被分组为 Triggers 和 Responses,和你在 Studio 中看到的方式一致。


interaction recording specs

💡 你可以做的几件事:

  • 拖动查看动画: 左右拖动红色倒水滴形控制点——这就是播放头(play head)。这样你就可以逐帧查看刚录制的交互。

  • 以不同速度回放动画: 你可以让动画回放更快或更慢。点击回放速度图标并选择速度,然后点击 Play 图标开始播放——它会变为 Pause 图标,便于你暂停播放。回放将从播放头当前位置继续。在交互播放时,你可以随时通过拖动播放头,或点击时间轴顶部栏来重新定位播放头。

  • 调整界面大小: 你可以拖动预览区与时间轴之间的分隔线,让时间轴更高或更矮。

  • 检查某个特定 Response 的动画: 点击时间轴中的任意 Response,屏幕右上角会弹出检查器窗口。这里会显示动画起点和终点的精确属性值、动画曲线缓动参数,以及你正在查看的该属性“当前”值。当前值会与播放头同步实时更新。


inspect triggers and responses
  • 检查特定图层: 预览区左侧提供 Layers 图层栈。点击任意图层后,右侧检查器窗口会实时更新并显示其属性,与播放头同步。


inspect a layer

步骤 4:共享你的交互录制

最后,你需要将交互录制分享给团队。你有两种方式:

  • 共享整个 Pie 的云端链接。任何拥有该链接的人都可以点击 Handoff 按钮访问这个 Pie 的所有交互录制。要分享云端 Pie 链接,请点击紫色的 Share 按钮,配置共享选项,然后点击 Copy link.


share the cloud pie
  • 共享某个特定录制的直达链接。进入 Pie Cloud 页面,点击 Handoff 按钮,并在列表中选择你要分享的交互录制。点击它打开录制页面。然后你可以从地址栏复制链接,或点击“Copy link”按钮,再分享给团队。


sharing an interaction recording

关于 ProtoPie 交互录制的提示

  • 你的交互录制受与 Pie 相同的访问设置保护。你可以在 Pie 页面点击 Share 按钮修改这些设置。

  • 当你创建交互录制后,即使你上传到 ProtoPie Cloud 的 Pie 有新改动,已有录制也不会自动更新。它仅代表你录制当时那个版本的 Pie。因此,如果你的改动会影响某个录制,你需要重新录制并将新录制分享给相关人员。旧录制不会自动删除——它会和你创建的新录制一起显示在列表中。所以你可以养成在录制名称中加入录制日期的习惯,例如:


add dates
  • 当然,你不一定要保留旧录制。如果有助于更好地整理内容,你可以随时删除它。但请注意:录制一旦删除,就会永久消失,无法恢复。

只需几分钟,你就学会了使用 ProtoPie 的 Handoff 功能,为原型创建完整的交互式规格说明,并与开发团队共享。

[免费开始使用 ProtoPie]