使用 ProtoPie 的公式功能制作输入步进器原型

简介

输入步进器（Stepper）是一种常见的设计元素，可让用户轻松地逐步增加或减少数值——当你将其用于数值变化范围较小的输入字段时效果最佳。它也可用于其他类型的界面（如语音或手势界面），但本文将介绍图形用户界面（GUI）中的标准步进器类型。

ProtoPie 让步进器交互原型制作变得简单，你可以毫不费力地直接对数字执行数学公式。先给你一个预览，这是我们将讲到的两种公式变体之一：number(Layer Name.text)+1

你将学到什么 

在本课中，你将实现：

1. 将文本图层设为“可编辑（Make Editable）”

2. 用于增加数字（ + ）的公式

3. 用于减少数字（ - ）的公式

4. 用于边界情况的条件判断

完成本次演练后，你将做出这个效果！

[起始 Pie 文件] [完成版 Pie 文件]

分步详解

1. 将文本图层设为“可编辑”

1. 选择文本图层（Number），然后在屏幕右侧的属性面板中点击Make Editable。

💡 当你从其他设计程序（如 Figma、Adobe XD 或 Sketch）导入图层时，所有图层都会作为对象导入。要在 ProtoPie 中编辑这些对象，你需要将这些对象转换为可编辑图层（即把导入的文本对象转换为可编辑的文本图层）。

GIF 演示：选择“Number”图层并使用“Make Editable”功能将其设为可编辑。

2. 用于增加数字的公式（ + ）

1. 给+组添加一个Tap 触发器，然后在该Tap 触发器中，从Number图层添加一个Text响应。

GIF 演示：为“+”按钮组新增 [Tap] 触发器，并在其中添加来自“Number”图层的 [Text] 响应。

　2. 对于新的Text响应，在内容部分将其从Text改为Formula。

GIF 演示：[Text] 响应的内容从 [text] 切换为 [formula]

　3. 点击fx按钮。这会打开公式栏，并允许你输入以下内容：number('Number'.text)+1。这是一个内置的转换函数，用于告诉 ProtoPie 将Number文本按数字读取。这样 ProtoPie 就可以直接对文本执行数学运算。

GIF 演示：如何在公式栏中输入 number('Number'.text)+1 公式

现在试运行你的原型，你应该会看到每次点击+按钮，数字都会增加1，但-按钮仍未启用。接下来我们将利用刚刚学到的内容来启用-按钮的交互。

3. 用于减少数字的公式（ - ）

1. 与上一节前几步类似，为'-'组创建一个[Tap]触发器，并添加来自'Number'图层的[Text]、[formula]响应。

GIF 演示：为“-”组设置类似的 [Tap] 触发器和 [Text] 响应。

　2. 由于我们希望每次点击 - 按钮组时数字都减少，因此这次使用的公式是：number('Number'.text)-1

GIF 演示：在原始公式中修改为 -1，以制作递减交互原型。

现在试运行你的原型，+和-按钮应分别使数字增加或减少。你还会注意到步进器可能会进入负数值。我们可以使用条件判断来防止用户输入负值。

4. 用于边界情况的条件判断

ProtoPie 的conditionals功能可以帮助你测试防止负数等边界情况的方法。条件判断会被视为高优先级项，ProtoPie 会在执行任何其他响应之前先检查它们。

在这个例子中，当文本为0时，如果用户点击-按钮组，它会跳过我们原先分配的递减公式，并执行针对0条件的响应动作。

1. 在-组的Tap触发器中，为Number图层添加此condition：Text of 'Number' = 0

2. 在该condition下，从Number图层添加一个Text响应。响应内容应设置为Text，并填入0。

GIF 演示：“0”值条件的设置，其中“Number”图层会通过将 [Text] 设为 0 来响应。

当Number的文本值达到0后，原型将不会继续减少。

你已完成！

想看看这个步进器交互如何应用到可编辑数量的电商商品结算中吗？查看使用组件在购物车中计算应付总金额了解更多。

这篇用例教程对你有帮助吗？欢迎参与这份 1 分钟问卷 帮助我们改进教育内容。