行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

ProtoPie 学校

10

阅读时间

第8课:使用变量 II

了解如何在 ProtoPie 中结合使用变量和公式,提升你的原型,并让交互更加真实。

杰夫·克拉克, 用户体验设计师与 ProtoPie 培训师

在变量课程的第 1 部分中,我们通过一个非常简单的示例演示了变量的工作方式。现在让我们更进一步。

你需要准备

为了跟着本教程操作,请下载这个示例 Pie,并在 Studio 中打开:

[Using Variables Pie File]

你将学到什么

在本教程结束时,你将学会:

  • 创建变量时“仅此场景”和“所有场景”的区别

  • 当结果不符合预期时如何排查问题

  • 使用变量的限制

完成时间:≤15 分钟

在另一个场景中使用变量

与其在用户点击 Next 时只显示名字,不如跳转到下一个场景,并给用户一个正式的问候。打开你上次保存进度的 Pie 文件。

  • 更改 Tap 触发器的行为。移除 Text 响应(点击它并按键盘上的 Delete),然后添加一个 Jump 响应。


add jump response
  • 选择名为 protopie_welcome 的场景,并用你喜欢的任意过渡来配置 Jump。何不试试全新且超棒的 Smart Jump 过渡?(查看更多示例

    。)


smart jump
  • 在场景面板中点击 protopie_welcome 场景以打开并编辑。


scenes panel
  • 我们希望该界面在场景开始时按名字问候用户。添加一个 Start 触发器。


add start trigger
  • 为名为 Name 的图层添加一个 Text 响应。在 Content 下选择 Formula。点击 Formula 下方的框以显示 ∫x 图标,并展开公式输入框。


add formula
  • 在公式框中输入 "Hi, " + name + "!"。你可以使用我们上一课中探索过的相同技巧来插入变量。


add text in formula box

注意 ProtoPie 用红色波浪线标出了“name”这个词吗?这是因为 ProtoPie 找不到此场景可用的名为“name”的变量。红色波浪线在处理变量和公式时非常有帮助。这是第一个提示,说明有地方需要修复。

如你很快会看到的,我们的问题出在别处。所以现在先点击 OK 提交你的公式。ProtoPie 会继续用琥珀色高亮你的公式,表示仍有问题需要修复。


formula content

如果你还记得,在我们的第一个示例中,我们创建了一个新变量并选择了 For This Scene

这意味着我们创建的变量在创建它的场景中可用。我们希望变量能在多个场景中复用。因此创建变量时应该选择 For All Scenes

让我们回去修复它。

  • 在 Scenes 面板中点击 input 场景以打开编辑。然后点击左下角 Variables 面板中的 name 变量。你会注意到没有办法把它改成 For All Scenes 变量。这个选项只能在创建变量时选择。我们需要删除该变量并重新创建。

  • 点击 + 控件创建新变量。这次选择 **For All Scenes。**再次将新建变量重命名为 name.

💡 专业提示:复用与之前完全相同的名称。否则任何使用该变量的触发器和响应都会失效。


text variable


在右上角将变量类型配置为 Text。

为了让它生效,我们需要做的应该就这些。让我们再次预览。输入一个名字并点击 Next. 你应该会在后续场景中看到按名字的问候。


preview window

故障排查

如果没有像上面那样工作怎么办?以下是一些可帮助你定位问题的步骤。

  • 查看触发器和响应上的琥珀色高亮,以及公式中的红色波浪线下划线。这些都清楚地表示有内容需要修复。


formula typo

在这个例子中,我把变量名拼错了。ProtoPie 会给它加下划线,因为找不到名为 nme 的变量。

  • 确认你的变量被设置为用于所有场景。变量名旁边的图标:all-scene 变量是实心,this-scene 变量是空心。另外,all-scene 变量会出现在所有场景的变量面板中,而 this-scene 变量只会出现在创建它的场景中。


verify scene variable
  • 如果你没有看到变量的预期值,可以开启它的 debug feature. 当你将鼠标悬停在变量面板中的变量上时,其右侧会出现一个瓢虫图标。点击它,场景中会出现一个绿色框(再次点击可关闭)。预览 Pie 时,它会显示变量的当前值。


debug variable
  • 你可以在场景中拖动这个绿色调试框,并将其放在方便的位置。


debug box
  • 预览时你应当能看到变量值会随着输入而更新。


debug box
  • 如果变量没有更新,请检查第一个场景中的 Detect 触发器,确保它设置为 Your name 文本图层的 text 属性。


check detect trigger
  • 还要检查 Assign 响应,确保其配置如下:


check assign response
  • 如果以上都正常,让我们切换到 second scene 并确保我们正确使用了变量。你应该有一个 Start 触发器和一个按如下配置的 Text 响应:


variable check
  • 如果你在两个场景之间使用了动画过渡,可能会在第二个场景中看到问候语出现前有非常短暂的延迟。如果出现这种情况,请查看 protopie_welcome 场景中的 Start 触发器。如果 Options for Multiple Scenes 设置为 Start After Jump,请改为 Start With Jump。这样 Start 触发器下的响应会在过渡动画开始时触发,而不是在动画完成后。


options for multiple scenes

使用变量的限制

使用变量时,有一些注意事项需要了解。

  • 我们已经讨论过设置正确的类型。如果类型与你要存储的信息不兼容,你会得到意料之外的结果。

  • 我们也谈到了设置变量是仅用于一个场景还是用于所有场景的重要性。由于之后无法更改,提前明确你计划如何使用变量很重要。如果不确定,选择“For All Scenes”,因为它最灵活。

  • 变量名不能包含空格。如果你有编程经验,这可能很明显;但对其他人来说,这是一个重要细节。若你尝试给变量取无效名称,ProtoPie 会提醒你。


invalid variable name format

如果你希望在变量名中使用多个单词以便更具描述性,可以使用几种常见约定。

  • 使用下划线 - 字符分隔多个单词。例如:first_nameshoe_lace_color。这有时称为 snake casepothole case

  • 将后续单词首字母大写。例如:firstNameshoeLaceColor。这通常称为 camel case

“Easy as “ + type_of_pie + “ Pie!”

现在你知道如何使用变量在 Pie 中存储一些信息。你也学会了如何在多个场景中使用同一个变量,并掌握了一些当结果不如预期时可用的实用排查技巧。

资源

在本教程视频中,你将了解 ProtoPie 中可用的内置变量,例如 $touchX、$touchY,以及如何在你的原型中使用它们。


在本教程视频中,学习如何在一个场景中将信息存入变量,然后在另一个场景中取出并使用。

[需要更多技巧?告诉我们!]