概览
快速开始
在开始创建该 pie 的流程之前，请确保你已访问我们为你准备的所有必要设计资源：
访问包含说明的起始 Pie 文件。
点击文件链接并在 ProtoPie Studio 中打开。
创建滚动交互
让我们先从最基础的滚动交互开始。在你的原型设计旅程中，你会经常使用它们来增加真实感与层次感。
步骤：
选择你希望滚动的分组图层。
点击Container并选择Scroll。
设置Direction（垂直或水平）。
小技巧：将内容分组放在滚动容器内，可获得更流畅的交互效果。
掌握触发器与响应
接下来，让我们将用户输入（触发器）连接到视觉行为（响应）。
示例：咖啡杯型选择器（Curto、Medium、Venti）
选择 Curto 卡片。
添加一个Tap触发器。
添加一个Border响应，将 Curto 边框不透明度设为100。
再添加两个 Border 响应，将 Medium 和 Venti 的边框设为0。
对Medium和Venti重复此流程。
提示：重置边框不透明度可确保选择状态清晰。
使用条件与逻辑
现在让我们通过条件与逻辑，高效添加类似配料选择的切换交互。
示例：奶油顶与冰块选择
选择奶油顶卡片。
添加一个Tap触发器。
添加一个Condition：
如果边框不透明度 = 0，则设为100。
否则，将不透明度设为0。
对Ice重复相同逻辑。
提示：条件和变量是实现切换效果的关键。
配置变量并计算价格
要创建真正的高保真原型，你会希望该 pie 不仅仅有视觉响应。大多数原型都需要一些逻辑来把信息串联起来！
在 ProtoPie 中，你可以使用变量和动态计算轻松管理选择状态。
步骤：
添加场景专用变量：CURTO、MEDIUM、VENTI、WhippedCream、Ice、total_price。
启用调试模式以验证变量值。
分配变量：
杯型（CURTO、MEDIUM、VENTI）：将选中项设为1，其余设为0。
配料（Whipped Cream、Ice）：变量初始设为1，若再次选中则切换回0。
计算总价：
在每个触发器下分配此公式：
(CURTO * 4.59 + MEDIUM * 5.39 + VENTI * 6.79) + (WhippedCream * 3.06) + (Ice * 2.00)
添加与 total_price 关联的Text响应。
高亮按钮颜色（可选）：
检测 total_price 的变化以高亮选择项（例如颜色 #D8FF99）。
提示：使用调试控件验证你的逻辑。
特别优惠
分享你的创意原型，即可领取 ProtoPie Pro 计划首月免费！
方式：通过我们的问卷提交，或在社交媒体使用标签#SimplePie！
