行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

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]