跳到主要内容

在交互中使用变量

变量可以保存原型运行时的状态。交互触发后,通过动作修改变量,绑定该变量的图层或组件会立即更新,从而用较少的画板实现更接近真实产品的流程。

设置变量值​

  1. 选中交互触发源,在交互设置面板中添加“设置全局变量”动作。
  2. 选择目标变量。
  3. 在值控件中输入要写入的值,保存交互。

值可以直接填写,也可以通过绑定变量按钮读取其他变量。绑定变量时,选择器会按变量类型过滤可用项;目标变量与来源变量类型必须兼容。

数字表达式 fx​

数字变量的值控件支持表达式模式。点击值输入框旁的 fx,在表达式编辑器中组合数字常量、其他数字变量和可读取的图层数据。例如:

  • 数量 + 1:点击“加一”按钮递增数量。
  • 总价 + 商品价格:将商品价格累加到总价。
  • 进度 - 10:点击返回时减少进度。

表达式结果必须是数字,并且要符合目标变量可接受的范围。无法得到数字结果时,动作不会产生预期更新。需要恢复普通输入时,在值控件中切回普通模式。

切换变量集模式​

要在交互中切换一整组变量:

  1. 添加“设置全局变量集”动作。
  2. 选择目标变量集。
  3. 在“模式”中选择明确的目标模式。
  4. 在“作用域”中选择“全局”,或选择当前画板内的指定图层。

“全局”会在当前原型范围内切换该变量集;选择指定图层时,仅从该图层开始按新模式解析。变量集的默认模式只决定初始或自动模式下的值,不等同于运行时自动切换。

在预览或演示模式中验证时,建议先确认页面确实引用了该变量集,再点击切换按钮。若只有部分图层变化,检查这些图层是否设置了单独的模式映射;若全部不变,检查动作选择的变量集、目标模式和作用域是否正确。切换变量集或复制动作后,应再次检查作用域,避免影响范围过大。

典型场景​

深色模式按钮​

建立“主题色”变量集,设置“浅色”和“深色”模式;将页面背景、文字和按钮绑定颜色变量。给切换按钮添加“设置全局变量集”动作,选择对应模式。预览时点击按钮,整套界面一起换肤。

数量步进器​

创建数字变量 购物车/数量,默认值为 1。给“+”按钮添加“设置全局变量”动作,目标为该变量,使用 数量 + 1 表达式;给“-”按钮使用 数量 - 1,并根据需要增加边界判断或禁用按钮。数量文本或组件状态绑定该变量后,点击即可看到变化。

技巧:把展示值和计算值分开。 例如保留 购物车/数量、购物车/单价、购物车/总价 三个数字变量,让不同按钮只更新它们负责的值。这样比在每个动作里写死最终金额更容易检查和维护。

表单开关​

创建布尔变量 表单/已同意,给复选框点击交互添加“设置全局变量”动作,在 true 和 false 之间写入值。将变量绑定到需要显示或隐藏的提示、按钮或图层,并可让交互同时切换组件状态,模拟勾选与提交按钮可用状态。

多语言预览​

为文本变量设置“中文”和“英文”模式,在语言切换交互中设置变量集模式。将标题、按钮文案绑定文本变量,检查不同语言长度下的布局。

可以再添加“长文案”模式,专门放入接近最大长度的标题、提示和错误信息。演示时先切换该模式,再完成注册、支付或搜索等关键流程,能更早发现按钮截断和弹窗溢出。

教程、导览与功能开关​

创建布尔变量 新手引导/已完成 或 功能/显示筛选器,在“跳过”“完成”“重新开始”等节点写入不同值。将变量与支持状态呈现的图层或组件组合,可用一套画板演示首次进入、已完成引导、功能开启与关闭等流程。每个布尔变量应只描述一个明确状态,避免一个 是否显示 同时控制多个无关区域。

变量动作与其他动作组合​

同一触发器可以先设置变量,再执行显示/隐藏、跳转或组件状态切换。动作按列表顺序执行;依赖新变量值的动作应放在设置变量动作之后,并在演示模式中验证最终状态。

多个动作的执行顺序​

同一触发器可以添加多个动作。变量动作会按动作列表顺序执行;如果后续动作依赖变量的新值,请将设置变量动作放在前面,并在预览中验证最终状态。

常见问题​

  • 切换模式没有效果:确认图层确实绑定了该变量,并且动作选择的是正确变量集、模式和作用域。
  • 表达式无法保存:检查表达式是否只返回数字,以及引用的变量是否仍存在。
  • 动作中的变量显示已删除:变量被重命名或删除后,重新打开变量选择器,选择当前有效变量并保存动作。

更多触发方式和动作参数请查看交互动作。