行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

ProtoPie 学校

10

阅读时间

第7课:公式基础 II

了解如何在 ProtoPie 中使用公式,为你的原型添加更动态的交互。

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

第 1 部分中,你已经学会了如何使用 Formula 将文本拼接在一起。现在我们将更深入一些,进行更复杂的计算。

你需要准备什么

要跟着本教程操作,请下载这个示例 Pie,并在 Studio 中打开它。

[Formula 基础 Pie 文件]

你将学到什么

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

  • 如何创建一个用于执行数学计算的 Formula

  • Functions(函数)入门

完成时间:≤15 分钟

从文本到数学计算

使用同一个 Pie,打开 Scene 3 - Calculate。这个 Scene 有两个输入字段和四个按钮。我们希望用户在每个字段中输入一个数字,然后选择他们想执行的计算——在我们的例子中是加法、减法、乘法或除法。我们将让 Pie 执行所需计算,并在按钮下方显示结果。

  • Add Layer 添加一个 Tap Trigger。


add tap trigger
  • Result Layer 添加一个 Text Response。


add text response
  • 由于我们再次处理尚未知晓的输入值,我们需要使用 Formula。在 Content. 下方的下拉菜单中选择 Formula

  • 点击它下方的输入框,你会看到熟悉的 ∫x 图标。点击它以展开 Formula 输入框。

  • 和之前一样,点击出现在 Formula 框右侧附近的 图标,并选择 Number 1 layer。


input formula
  • 我们希望访问这个 layer 的 text 属性。输入点号 . 以显示 Number 1 Layer 的所有属性。向下滚动并选择 text. 输入 + 来告诉 ProtoPie 你要做加法。再次点击 图标,这次选择 Number 2 layer。输入 . 并选择 text 属性。


number and text layers formula


点击 OK 以提交你的 Formula。

让我们来 Preview。分别在两个输入字段中输入数字,然后点击 + 操作按钮。


preview addition

这……没成功,对吧?ProtoPie 没有把两个数字相加并给出总和,而是把两个数字拼接在了一起。在我的示例中,5 + 6 得到的是 56,而不是 11!

为什么会这样?

如果你还记得第 1 部分,在 Formula 中,+ 字符用于告诉 ProtoPie 你想把一些文本拼接在一起。令人困惑的是,当你想进行两个数字的算术相加时,它会被使用。ProtoPie 会智能地猜测你想执行哪种操作,但在这个例子里 ProtoPie 猜错了。正如名称所示,ProtoPie 将 Number 1Number 2 字段的 text 属性当作文本而不是数字,因此它认为你是在尝试拼接两段文本。

我们可以通过明确告诉 ProtoPie 应该如何处理这些 text 属性来修复这个问题。我们可以使用一种叫做 Function(函数)的东西来做到这一点。Function 是“预定义指令集”的高级说法。我们需要的是一个能告诉 ProtoPie:这些 text 属性应被当作数字处理的函数。

  • 点击 ∫x 图标来修改你的 formula。点击 Formula 输入框右端的 ? 图标,在浏览器中打开 Formula 文档。


documentation link
  • 在左侧面板中导航到 Formulas → Functions


functions website documentation

这些是 ProtoPie 中所有可用的 Functions。完成本教程后,花点时间探索一下你可以在 Formula 中使用的所有函数。

  • 向下滚动到 Type Conversion(类型转换)部分,找到 number(source:TEXT) 函数。


type conversion function guide
  • 所有函数都有类似的格式:

  • 函数名称,这里是 number

  • 你提供给函数作为输入的一个或多个参数,括在括号中(例如 (source:TEXT))。这表示该函数接收一个参数,并且这个参数必须是文本格式。如果函数接收多个参数,它们会用逗号分隔(例如 format(value:NUMBER,format:TEXT) 接收两个参数:一个数字和一段文本)。

  • 函数执行后返回的信息类型(例如 -> NUMBER)。

因为我们当前是文本,并且希望将其转换为数字,这个函数正好满足需求!它接收文本,并将其转换为数字。


input formula


按这种方式修改你的 formula。

让我们再 Preview 一次,看看它是否修复了我们的问题。


fixed preview

成功!

现在我们只需要为剩余按钮创建类似的交互。你可以走“慢方法”把上面的步骤全部再做一遍,但更快的方法是复制我们已经做好的内容,然后针对具体动作进行修改。

  • 点击 Tap trigger 以选中它。右键并选择 Duplicate

💡 专业提示:Mac 上使用 cmd + D,Windows 上使用 ctrl + D,效果相同。


duplicate shortcut

继续之前,我们现在有两个同名的 Tap Triggers。让我们重命名它们,便于理解。双击 Trigger 的标签,将第一个改名为 Tap Add,第二个改名为 Tap Subtract


add tap subtract trigger

现在让我们修改复制出来的 Trigger,使其用于 Subtract 按钮并执行减法操作。

  • 点击 Tap Subtract Trigger 以选中它,并将其重新关联到 Subtract Layer。


tap trigger with layer
  • 点击其下方的 Text Response,并将 formula 从加法改为减法。把 + 字符改成 -


subtract formula

再做两次,分别用于乘法和除法操作。到这里你可能已经意识到,键盘上没有乘号和除号。程序员很早以前就用 * 表示乘法,用 / 表示除法。你的 Formulas 应分别如下所示:


multiply formula


Formula:乘法


divide formula


Formula:除法

如果你现在进行 Preview,你应该可以对数字执行这四种操作。即使你把数字换成其他值,计算依然有效。这就是使用 Formulas 的威力!

关于空白字符的说明

在上面的 formulas 中,我们没有在运算符两侧添加空格(+-*/ 都叫做 operators)。当公式变得更复杂时,这会让它们更难阅读。把这样的公式改写为更易读的形式是完全没问题的:


formula example

像这样(注意 * 字符两侧的空格):


formula example

两者的效果完全相同,但第二种更容易阅读。实际上,你还可以在很多其他位置添加空白字符。比如下面这样也没问题:


formula box

ProtoPie 甚至足够智能,能够理解你这样写的意思:


formula example

不过,有几个地方空白字符确实会有影响。我们已经讲过 "Hello,""Hello, " 的区别。另外,如果你这样做:


formula box

ProtoPie 就不会接受。变量名中不能有空格。ProtoPie 会把它理解为你在尝试使用三个不同的变量,而这些变量都找不到。ProtoPie 会用红色波浪线标出问题区域来帮助你。每当 Formula 出问题时,先检查红色波浪下划线是个很好的起点。

“就是这样!就像 " + Type of Pie``.text + " Pie!" 一样简单!”

你现在应该已经很好地掌握了如何使用 formulas 让你的 Pies 变得极其逼真。你不必局限于静态值,因为在 ProtoPie 几乎任何地方都可以使用 Formula——只要寻找 ∫x 图标。花点时间探索你可以如何使用 Formulas,让你的体验更上一层楼!

相关内容

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