ProtoPie中文教程：从设计稿到可评审的高保真交互原型。本文按照一个真实项目的工作顺序，讲清ProtoPie是什么、ProtoPie怎么用，以及触发器、响应器、变量和传感器应该怎样组合。你也会看到ProtoPie与Pixso、Figma等设计工具的分工边界，避免把一段演示动效误当成完整产品交付。
1. ProtoPie是什么，适合什么场景
ProtoPie是一款面向高保真交互原型的工具，重点是把“用户做了什么”与“界面如何回应”连接起来。它适合验证移动端手势、页面转场、复杂反馈、设备传感器和需要现场演示的产品概念。ProtoPie官方将交互拆成触发器（Trigger）和响应器（Response）：前者描述事件，后者描述事件发生后的变化。详细规则可查看ProtoPie官方触发器文档。
它最有价值的地方不是让页面“动起来”，而是让团队在开发之前验证任务是否成立：用户是否知道下一步做什么，操作后是否得到明确反馈，失败后能不能恢复。对于已经有视觉稿、但需要验证交互细节的项目，ProtoPie比单纯展示静态页面更有说服力。
ProtoPie负责交互验证；完整产品还需要数据、接口、权限、埋点、性能和安全测试。把工具边界写清楚，反而能让评审更快聚焦在真正的决策上。
2. 开始前：把需求写成可验证任务
不要从“做一个炫酷动画”开始。先写一条用户能够完成、团队能够复核的任务，例如“用户在播放列表中切换歌曲，看到封面、进度和下载状态同步变化”。一条合格的任务至少包含以下五项：
- 起点：用户从哪个页面、哪个状态进入。
- 动作：点击、长按、拖动、滑动、输入或设备动作。
- 反馈：文字、位置、颜色、进度、声音或震动怎样变化。
- 异常：无网络、权限拒绝、空数据、重复操作如何处理。
- 结束条件：用户如何知道任务已完成，评审人如何确认结果。
再把任务拆成“页面—图层—状态—事件—验收语句”五列。这样做的好处是，后面每新增一个响应器，都能回答它服务于哪一个状态，而不是在画布上不断叠加无法复用的动效。
3. ProtoPie入门：从设计稿到第一个交互
下面是一条适合第一次使用ProtoPie的最短路径。先完成一条主流程，再补充复杂状态，学习成本会比同时搭建多个页面低很多。
- 建立场景：创建一个清晰的场景名称，标注设备尺寸、方向和目标任务。一个场景只负责验证一段连续流程。
- 整理素材：在Pixso中确认页面、组件、文字和图片的命名，导出或准备需要的素材。不要把整张长图当作所有状态，后续很难单独验证。
- 确定图层关系：将可操作区域、反馈区域和装饰层分开，给按钮、列表、弹层和状态提示使用稳定名称。
- 先做一个触发器：从Tap、Long Press、Drag或Scroll中选最符合任务的事件。触发器只回答“什么时候发生”，不要同时塞入所有视觉变化。
- 添加响应器：为位置、透明度、尺寸、旋转、文本或变量赋值，先让反馈清楚，再调整曲线、时长和延迟。
- 补齐状态：为成功、加载、空、失败、禁用和返回路径各做一次检查。长文案和异常数据要用接近真实的内容复测。
- 在目标设备上复核：桌面预览只能验证大致逻辑，触控命中、滚动惯性、横竖屏、系统权限和传感器体验要在实际设备上检查。
第一次练习建议只做一个页面和一个状态变化，例如“点击播放后按钮变成暂停，进度条开始移动”。完成后再加入列表切换、拖动进度和错误反馈。每轮只改变一个变量，才能知道问题来自图层、触发器还是响应参数。
4. 触发器、响应器、变量与传感器
ProtoPie的交互逻辑可以用一句话概括：事件触发响应，状态由变量保存，设备输入提供更真实的条件。理解这四类对象，比记住某个按钮的位置更重要。
- 触发器 Trigger：描述交互何时启动，例如点击、长按、拖动、滚动、键盘输入或传感器事件。一个事件可以触发多个响应，但要保持顺序清晰。
- 响应器 Response：描述界面如何改变，例如移动、缩放、旋转、透明度、文本、滚动或声音。建议先用一个响应证明逻辑成立，再逐步增加细节。
- 变量 Variable：保存数字、文字、颜色或状态值。官方文档说明，变量可以通过Assign响应修改，也可以被Detect触发器监听；使用前应给默认值、允许范围和修改来源。
- 传感器 Sensor：把设备的倾斜、距离等输入映射到图层属性。涉及陀螺仪、麦克风、定位或蓝牙时，必须准备权限拒绝后的替代路径，不能把传感器输入当成所有设备都可用。
- 组件与消息：可复用的交互组件应写清可覆盖变量、Send消息和Receive触发器，团队成员拿到组件后才能知道它如何接入场景。
变量与传感器越多，原型越接近真实产品，也越容易失控。建议为每个变量建立一行说明：名称、类型、默认值、修改动作、影响范围和重置方式。评审时先关闭非必要传感器，确认主路径稳定后再增加真实设备输入。更多概念可参考ProtoPie官方变量文档。
5. 案例：做一个可评审的移动端播放器
用播放器做练习，比做一段孤立的转场更适合学习。它同时包含点击、拖动、列表滚动、加载和失败状态，能够覆盖ProtoPie的主要思路。
- 定义页面：准备播放列表、播放器底栏和全屏详情三种视图，先确定默认播放歌曲和进度值。
- 连接主路径：点击播放按钮后，将图标、进度和播放状态同步切换；再次点击时回到暂停状态。
- 处理拖动：拖动进度条时，用变量保存进度值；松手后触发播放位置更新，并限制进度不超出歌曲长度。
- 加入列表状态：列表滚动时保留当前歌曲；点击另一首歌时更新封面、标题和进度，并给出加载反馈。
- 补充失败路径：网络不可用时显示重试入口，重试期间保留用户已经选择的歌曲，避免页面直接回到空状态。
- 安排评审：让评审人只完成任务，不先解释实现方式。记录他们在哪一步犹豫、误触或找不到反馈，再回到对应的触发器和响应器修改。
这个案例的验收标准不是“动画看起来流畅”，而是“用户能否完成播放任务，并能理解每个状态”。如果动效很漂亮却让用户不知道按钮是否生效，应该优先减少装饰，强化反馈。
6. 团队评审、版本与交付
原型一旦进入团队评审，就不再是个人演示文件。建议把每一轮评审都绑定到任务、版本和结论：
- 评审前：写明本轮只验证什么，准备成功、失败和返回路径。
- 评审中：按“目标—操作—反馈—风险”记录意见，不用“感觉不够好”作为唯一结论。
- 评审后：给每条意见分配负责人、优先级和复核日期，保留原型版本与变更原因。
- 交付时：同步场景名称、设备尺寸、字体、素材来源、变量表、动效时长和未决问题，不能只交一段录屏。
视觉资产和页面结构可以在Pixso UI设计协作中统一维护，交互探索再交给ProtoPie。这样既方便多人编辑，也能让研发看到可复用组件、真实内容和完整状态。
7. ProtoPie、Figma与Pixso怎么配合
选工具时先看交付物，不要只看品牌名称。需要维护页面、组件、设计系统、权限和评审记录时，应使用完整的设计协作平台；需要验证高保真手势、设备输入和复杂反馈时，再使用ProtoPie做交互原型。
- ProtoPie：更适合高保真交互、设备体验、触发器与响应器组合，以及评审阶段的行为验证。
- Figma或Sketch：更适合界面资产、组件和视觉设计，文件兼容和版本能力应在项目开始前核对。
- Pixso：适合把页面、组件、设计系统、原型和团队评审放在同一工作流中。可先查看ProtoPie中文指南，再根据团队的交付物决定如何衔接。
如果团队已经有Figma或Sketch文件，迁移前先抽取页面、组件、字体、变量和原型连接清单，再决定哪些内容进入Pixso、哪些内容在ProtoPie中重建。不要把截图、录屏或单个导出文件当成可编辑交付。
需要比较协作边界时，可继续阅读ProtoPie和Pixso怎么选；需要了解完整的页面、组件和评审流程，可查看Pixso原型设计与Pixso设计系统。
8. 设备、性能与可访问性验收
原型的可信度来自可复核，而不是屏幕上的视觉冲击。发布或评审前，至少完成以下检查：
- 设备：在桌面、手机和平板分别检查触控命中、滚动方向、横竖屏和返回路径；至少复测390px和360px窄屏。
- 性能：高分辨率视频、连续传感器事件和复杂粒子会增加设备负担，为评审准备压缩素材和静态回退。
- 可访问性：不要只用颜色或动效表达成功与失败；为键盘、触控、低动效偏好和权限拒绝准备替代反馈。
- 隐私：演示数据使用脱敏示例，共享前确认访问权限和期限，不把客户姓名、联系方式、内部截图或临时密钥放入原型。
- 交付：图片、字体和第三方素材保留来源与授权范围，页面链接、版本、变量说明和问题列表一起交付。
9. ProtoPie常见问题
- ProtoPie适合新手吗？
- 适合。先用一个页面、一个触发器和一个响应器完成最短路径，再学习变量、组件和传感器，循序渐进比直接搭建复杂动画更容易定位问题。
- ProtoPie怎么导入设计稿？
- 先根据目标版本和官方支持范围准备设计文件，再检查字体、图片、图层命名和组件结构。导入后要逐页核对，不要假设所有视觉和交互关系会自动保留。
- ProtoPie可以做网站或App成品吗？
- 它主要用于交互原型与体验验证。真实网站或App仍需要前端、后端、数据、权限、安全和发布流程。
- ProtoPie的变量有什么用？
- 变量用于保存状态或数值，并通过Assign等响应进行修改；适合处理播放进度、表单输入、选择状态等需要在多个反馈之间保持一致的场景。
- 传感器原型在所有手机上都一样吗？
- 不一定。设备传感器、系统权限和浏览器或播放器环境都会影响结果，必须在目标设备上复测，并准备没有传感器时的替代路径。
- ProtoPie和Pixso应该先学哪个？
- 如果任务还在页面结构和视觉探索阶段，先整理设计资产和组件；如果需要验证复杂手势或设备反馈，再进入ProtoPie。两者按交付物配合使用，不必互相替代。
完成一次教程练习后，建议把任务说明、页面结构、变量表、原型链接和评审结论保存到同一个项目空间。下一次迭代从已有证据继续，而不是重新解释一段只能播放一次的演示。
