行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

菜单

变量

变量可以被描述为装有宝贵信息的“篮子”。你可以将姓名、密码或账户余额等各种数据存放在这些篮子里,以便后续使用。通过修改变量中的值并检测其变化,你可以灵活地创建动态交互。

完全不了解变量?查看本页示例,充分利用这一强大功能。

  • 预定义变量 — 一组在你的原型中始终可访问的变量。它们存储的值会自动更新。

  • 使用场景 — 一系列涉及变量的实用场景。

变量与公式的区别

公式和变量可以无缝协作,以增强你的原型。以下是它们关系的简要说明:

  • 变量:可将变量看作方便的“篮子”,用于保存数值。它们允许你存储和检索数据,使你更容易在整个原型中复用信息。变量既可以独立使用,也可以与公式结合使用。例如,你可以使用公式来获取存储在变量中的值。

  • 公式:公式是用于计算并“返回”结果的表达式。它们是创建动态交互的强大工具。你可以使用公式进行计算、处理文本并完成各种任务。公式也可以包含变量,以访问已存储的值。

公式与变量之间的协同作用可以让你的原型更上一层楼。变量存储可供公式使用的值,而公式甚至也可以存储在变量中,以便在多个场景中复用。

总之,公式和变量相辅相成,在你的原型开发过程中提供灵活性与效率。

了解更多 关于公式。

选择变量作用域

你可以在两种变量类型中进行选择。

用于所有场景

用于所有场景的变量可在原型中的每个场景中访问。它非常适合在场景之间传递数据。例如,如果你在场景 A 中修改了一个用于所有场景的变量值,那么该变化会影响整个原型中所有使用该变量的地方。

用于此场景

用于此场景的变量仅适用于你创建它的那个场景。如果它是在场景 A 中创建的,就不能在场景 B 中使用。此外,这类变量也可以保存公式。

使用数据类型

一个变量可以存储三种数据类型:文本数字颜色

文本

文本变量用于存储文本值。如果你使用数字作为值,文本变量会将其作为文本处理。

数字

数字变量用于存储数字。它们不能保存非数字数据。

颜色

颜色变量用于存储十六进制颜色代码值。它们不能保存非十六进制颜色代码数据。

使用 Assign 与 Detect

变量通常通过 Detect 触发器和 Assign 响应来操作。

Assign 响应

它用于为变量分配新值。值可以是文本、数字或颜色数据类型。此外,这些值既可直接输入,也可通过公式动态生成。

了解更多 关于 Assign。

Detect 触发器

它用于跟踪变量中的变化。它允许你根据特定变量中发生的任何变化来触发响应。

了解更多 关于 Detect。

显示变量

通过使用专用调试器,变量中的值可以显示在 ProtoPie Studio 的画布和预览窗口中。你可以点击变量面板中变量名称旁的 bug 图标来启用它们。这样,你就能随时检查变量存储的值是否被正确更新。


{'_type': 'localeString', 'en': 'displaying-variables', 'ja': 'displaying-variables', 'ko': 'displaying-variables', 'zh': 'displaying-variables'}

学习基础

在 ProtoPie 中使用变量创建交互比你想象的更简单。本视频将向你展示如何使用变量快速创建动态动画。

通过示例练习

制作一个 Spinner

你可以使用变量为一个简单的 spinner 制作动画。该示例将向你展示如何将变量的值增加或减少 1。随后,文本图层会显示该变量的值——每次变化都会更新。


{'_type': 'localeString', 'en': 'making a spinner'}

制作涟漪效果

使用预定义变量制作快速的涟漪效果动画。该示例将向你展示如何基于触摸事件发生的位置创建涟漪效果。

了解更多关于预定义变量的信息。


{'_type': 'localeString', 'en': 'ripple effect'}

在寻找实用使用场景?通过一些涉及变量的实用场景,了解更多

准备好让你的技能更上一层楼了吗?加入 ProtoPie Masterclass,释放变量在原型中的强大能力。学习如何使用文本、数字、颜色和预定义变量创建动态交互。

加入 ProtoPie Masterclass 后,你将快速提升技能,并轻松创建高级原型。不要错过这个升级机会!