行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

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课:公式基础 I

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

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

此前,我向你介绍了 ProtoPie 的一项高级功能——公式(Formulas)。公式让你能够处理那些在任意时刻都可能变化,或在一开始并不确定的信息。你可能还记得,我们曾用一个公式来构建搜索查询,并据此执行 Google 图片搜索。URL 的大部分内容是提前已知的,但具体的搜索词需要由用户输入。为了容纳这部分未知信息,我们就需要使用公式,在用户输入搜索词之后实时构建 URL。

在今天的课程中,我们将从一些基础示例开始。

你需要准备什么

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

[Formula 基础 Pie 文件]

你将学到什么

完成本教程后,你将学会:

  • 为什么你可能会想使用公式

  • 如何使用 ProtoPie 内置变量创建公式

  • 如何创建用于拼接文本的公式

完成时间:≤10 分钟

我们为什么要使用公式?

对于许多交互来说,使用静态值就足够了。比如我点击这个按钮,就会跳转到场景 2;如果我向上甩动一个对象,它会移动到屏幕顶部之外的某个位置。不过很多时候,我们需要 Pie 根据各种输入做出响应,而这些输入在发生之前是未知的,而且每次输入的具体内容也可能不同。比如,如果我在屏幕上的随机位置点击,那么我点击的坐标在下一次点击时很可能会不同。

我们的第一个示例正是处理这种情况。

将对象移动到用户触点

打开你在上面下载的示例 Pie。这个 Pie 中有三个场景。如果你当前不在场景 1,请在 Studio 左上区域的场景(Scenes)列表中点击Scene 1 - Touch Move图标。


scene 1 touch move

这个场景里有两个图层:一个黑色背景形状和一个黄色星星。当用户点击屏幕时,我们希望捕获该坐标,然后将星星移动到用户点击的精确位置。我们将使用背景图层来接收触摸事件,因为它覆盖了整个屏幕的宽度和高度。

  • Background图层添加一个Tap触发器。


tap background layer trigger
  • Star图层添加一个Move响应。


move star layer response

在之前的 Move 响应示例中,我们输入的是对象要移动到哪里的明确像素坐标。而在这个案例里,我们还不知道用户会点击屏幕的哪里。我们需要在触摸发生时捕获 X 和 Y 坐标。

ProtoPie 提供了多种内置机制来捕获触点等事件细节。ProtoPie 将它们称为预定义变量(Predefined Variables)。如果你对“变量”这个术语不熟悉也没关系。我们会在下一课详细讲解变量。现在你只需知道:变量用于存储一小段信息。这里我们会用到两个预定义变量:$touchX$touchY,它们分别存储最近一次触摸事件的 X 和 Y 坐标。

  • 点击Move响应。在属性面板中,点击X上方的输入框。你会看到输入框右侧出现一个小的∫x图标。


formula icon
  • 点击∫x 图标。这样我们就可以输入公式了。当我们处理会变化的信息时,就需要使用公式。


formula input box
  • 在公式框中输入$touchX。ProtoPie 会把这段文字标成绿色,表示它识别到你正在使用变量。


type $touchX in formula box
  • 点击OK提交公式。

**💡 ****专业提示:**输入完公式后请点击OK按钮。如果你发现输入后的公式消失了,很可能是因为你忘了这一步。


click ok formula input
  • Y 位置也做同样设置,不过这次使用$touchY作为公式。


type $touchY in formula box

预览一下。点击场景中的任意位置,星星应立即移动到你点击的位置。


$touchX $touchY preview

如果你想查看 ProtoPie 的所有预定义变量**,**可以点击公式输入框右端可见的小问号图标来快速找到它们。


predefined variables icon

这会在浏览器中打开Formulas文档。在左侧边栏中,导航到Variables → Predefined Variables


predefined variables protopie website

拼接文本

在上一个示例中,我们只是用单个信息片段来创建公式:预定义变量 $touchX 和 $touchY。不过,我们也可以用公式把多段信息拼接在一起。

在你的 Pie 中,打开Scene 2 - Greeting。这个 Pie 有一段说明文字、一个输入框和一个空白文本框。我们希望用户输入姓名后,在按下 Return 时,ProtoPie 能用他们输入的名字向他们问好。

  • 先让输入框在场景开始时自动获得焦点。添加一个Start触发器。

  • Name输入图层添加一个Focus响应。确保选择了Focus In


add focus response
  • Name输入图层添加一个Return触发器。


add return trigger
  • Greeting图层添加一个Text响应。


add text response
  • 由于在用户输入前我们不知道他们的名字,因此需要使用公式来动态构建问候文本。Text 响应允许我们使用公式而不是固定文本。在Content下方的下拉列表中,选择Formula


greeting text formula
  • 下拉框下方的输入框会发生变化,点击它后你会看到熟悉的∫x图标。


expand formula box
  • 我们要构建一条"Hello, NAME"的问候语,不过会把 NAME 替换为用户在 Name 字段中输入的内容。问候语有两部分:

  • 已知部分:Hello,

  • 未知部分:NAME

我们将分两部分构建这条问候语。

  • 按如下内容原样输入(包括引号):"Hello,"


hello greeting formula
  • 像这样把文本放在引号中,表示你要让 ProtoPie 输出引号内的完全内容。在编程中,这称为字面字符串(literal string)。我们说中文,所以这里可以把它理解为静态文本。ProtoPie 会用橙红色显示静态文本。

  • 输入 + 字符。这告诉 ProtoPie 你还想在静态文本后拼接更多文本。


plus formula
  • 我们希望包含 Name 输入图层中输入的内容。ProtoPie 会自动将输入文本存储为该图层的一个属性。我们希望在公式中访问这个属性。点击公式输入框右侧附近出现的图标。这会显示场景中的所有图层。选择Name图层。


plus layer name formula box


ProtoPie 会将图层名称高亮为绿色。

  • 要访问该图层的属性,输入点号 .。系统会显示所有可用属性的列表。向下滚动并选择 text 属性。


add property formula box
  • 点击OK提交公式。

预览一下。在输入框中输入一个名字,然后按Enter。


preview window

成功了,但还不够完美……“Hello,” 和 “Jeff” 之间没有空格。因为我们没有告诉 ProtoPie 要加空格。现在来修改公式。

  • 在 Text 响应中,点击公式框以显示∫x图标。


formula input box
  • 修改静态文本部分:在逗号后、结束引号前加一个空格。记住,写静态文本时,ProtoPie 会输出引号之间的完全内容,包括任何空格。


add space in formula


点击 ∫x 图标即可显示我们的公式。

  • 既然已经改到这里,我们再让 ProtoPie 的问候更热情一点,在末尾加一个感叹号。你可以使用额外的 + 来拼接更多文本。按如下方式在公式末尾添加静态文本 "!"


add exclamation point in formula


点击 OK 提交你的更改。

再预览一次。这一次,问候语应该包含空格,并且末尾有一个感叹号。


preview window

做得很棒!ProtoPie 中的公式不止能拼接文本。在下一课中,我们会用它们让 ProtoPie 做一些数学计算。到时见!

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