ProtoPie 变量、公式与条件教程

ProtoPie 变量是用于保存并传递文本、数值或颜色信息的容器。变量与公式、条件、Assign 响应和 Detect 触发器配合后，原型可以根据用户输入与状态变化给出不同反馈。依据 ProtoPie 官方文档，变量既能服务于当前场景，也能在全部场景中共享，是制作登录校验、购物车金额、进度状态和数据展示等可测试交互的基础。

变量、公式和条件分别解决什么问题

变量负责保存信息，公式负责计算或转换信息，条件负责判断何时执行某条响应。三者并不是互相替代的功能。例如，购物车原型可以用数值变量保存商品数量，用公式计算总价，再用条件判断数量是否达到上限。这样建立的逻辑可以随操作实时变化，而不是依赖预先制作的固定画面。

变量：记录可变化的状态

ProtoPie 支持文本、数值和颜色等变量类型。文本变量适合保存名称、输入内容或提示语；数值变量适合计数、金额和进度；颜色变量可用于动态状态。创建变量时应选择清晰名称，并确保数据类型与后续公式一致，避免数字被当作文本处理。

公式：把已有数据转换为结果

公式是一段返回结果的表达式，可以进行数值计算、文本处理或读取其他对象属性。公式经常引用变量，也可以把计算结果重新写入变量。为了便于排查，建议从短公式开始，并用调试器观察输入值和输出值是否符合预期。

条件：为不同状态选择响应

条件用于判断某个值、文本或对象属性是否满足要求。登录表单可以判断输入是否为空，分页组件可以判断当前页码是否到达边界，价格计算可以判断优惠条件是否成立。每个条件分支都应设计明确反馈，避免用户操作后没有可见响应。

如何选择变量作用域

“For This Scene”变量仅用于创建它的场景，适合局部动画状态和临时计数；“For All Scenes”变量可在多个场景访问，适合用户名称、登录状态、购物车数量或跨场景进度。选择作用域时应遵循最小范围原则：只在当前场景使用的数据不必扩大到全局，这能降低命名冲突和维护难度。

• 当前场景变量：局部标签切换、单页输入、临时动画进度。
• 全部场景变量：账户状态、跨页选择、总金额、全流程步骤。
• 组件内部逻辑：优先封装在组件中，通过消息或可覆盖属性传递必要信息。

用 Assign 与 Detect 建立状态循环

Assign 响应用于给变量写入新值，Detect 触发器用于监听变量变化。常见流程是：用户点击加号，Assign 将数量变量增加一；Detect 发现数量改变后，更新数量文本并重新计算总价。状态、显示和后续响应由同一变量连接，能减少多个图层分别维护数据造成的不一致。

示例：制作可验证的数量选择器

1. 创建数值变量 quantity，初始值设为 1。
2. 点击加号时，用 Assign 把 quantity 更新为 quantity + 1。
3. 增加条件，只有 quantity 小于设定上限时才允许增加。
4. 用 Detect 监听 quantity，并把当前值显示在文本层。
5. 测试最小值、最大值、连续点击和场景返回后的状态。

这个方法同样适用于评分、步进器、页码和商品数量。关键是把“真实状态”集中在变量中，再让界面读取该状态，而不是仅改变文本外观。

调试变量与公式的实用方法

ProtoPie Studio 可以在画布和预览中显示变量调试信息。遇到结果异常时，先确认变量是否被触发，再检查类型、作用域和公式返回值。若一个交互包含多个计算步骤，可拆成几个中间变量逐步验证。命名中加入用途，例如 cartQuantity、unitPrice 和 totalPrice，也比 var1、number2 更利于团队协作。

• 检查变量初始值是否与测试前提一致。
• 确认公式引用的是正确变量和图层属性。
• 核对文本与数值之间的类型转换。
• 验证条件边界，包括等于、空值、零和最大值。
• 使用重置功能重复执行同一测试脚本。

变量逻辑如何支持用户测试和交付

带有真实状态变化的原型能让参与者输入内容、尝试错误路径并看到连续反馈，因此研究结果更接近产品行为。对开发沟通而言，变量名称、条件分支和交互记录也能清楚表达设计意图。原型不是生产代码，但它可以帮助团队在开发前发现流程遗漏、反馈延迟和边界冲突。

常见问题

官方资料与相关阅读

• ProtoPie 官方变量入门与作用域说明
• ProtoPie 条件、变量与交互组件库实践
• ProtoPie AI 高保真交互原型：从生成到精修