常见交互

如何使用ProtoPie在转账应用中显示货币格式

学习如何使用“format()”函数将数字显示为美元和美分、英镑和便士、欧元等货币。

Jeff Clarke, UX Designer & ProtoPie Educator

August 16, 2023

如何使用ProtoPie在转账应用中显示货币格式

介绍

在转账应用的设计中，最常见的交互就是用户在屏幕上输入数字。例如，用户输入需要转账的金额，屏幕上以货币的形式显示金额，如 $45.33。
在本课程中，您将学习如何使用 ProtoPie 的内置函数，实现以常见的货币格式来显示数字输入。
0
无交互的源文件 含交互的源文件

您将学到什么

通过本课程，您将学到：
  • 如何使用ProtoPie内置的“format()”函数
  • 如何在表达式 中把文本片段组合在一起
  • 如何自动显示设备的原生键盘
  • 如何显示数字键盘而不是常规的字母键盘

开始之前

打开无交互的源文件，来到包含模拟支付应用的场景。我们将在输入要发送金额的场景上进行操作。假设希望用户输入数字，例如，如果用户键入5，则将其解释为5美分并显示为0.05美元。如果用户键入50，则显示0.50美元。如果用户输入505，则显示5.05美元，依此类推。最后，我们希望显示在用户输入时实时更新。

分步说明

第一步：设置输入

我们需要一种捕捉用户输入的方法。
  • 在画布上添加一个输入图层。暂时将其放置在“转账金额”图层和“继续”按钮之间。
    • 保留图层的默认名称为 Input 1。
    • 稍后会将其隐藏，所以不用担心大小、字体、颜色等问题。
1
如果现在预览原型，会发现如果您点击输入栏，会得到正常的字母键盘。
2
接着将其更改为显示数字键盘。
  • 在画布上选择输入图层，并滚动到右侧属性面板的底部，找到“键盘选项 ”部分。
  • 在“类型”下拉菜单中，可以选择该区域被聚焦时显示的键盘类型。这里选择“数字”。
3
现在预览原型的话，当点击输入区域时，会出现数字键盘。
4
我们想让键盘在场景开始时自动出现。
  • 添加一个「自动加载」触发
  • 当输入图层被聚焦时，键盘会出现。在「自动加载」触发下添加一个「光标」反应，对象选择 Input 1 图层，并确保选择了“光标出现”。
5
再次预览原型。当场景开始时，Input 1 图层被聚焦并触发了键盘的显示。然而，如果点击输入图层之外的区域，它会失去焦点，键盘将消失。由于我们希望键盘始终保持在屏幕上，因此需进行进一步的设置，以确保输入图层不会意外失去焦点。
再次滚动到输入图层的属性栏底部，找到”光标消失选项“。
  • 取消选中“点击回车键”。
  • 取消选中“点击输入图层以外的区域”。
6
再次预览原型。现在无论点击哪里，输入图层都会保持焦点，并且键盘始终保持在屏幕上。

第二步：展示格式化输入

我们希望在用户输入时实时更新显示。
  • 添加一个「监听」触发，对象选择输入图层，并选择监听 Input 1 输入图层的文本属性。
7
💡 复习一下：「监听」触发会在所选对象的属性或所选变量的值发生变化时都会触发。
下面来显示输入内容!
  • 在「监听」触发下面添加一个「文本」反应。
    • 选择 **Transfer amount** 转账金额图层。
    • 内容选择“表达式”。
8
在继续之前，先来看一下ProtoPie的 format() 函数 ，它允许以特定的方式呈现数字信息。例如，可以添加千位分隔符，并显示特定的小数点位数。该函数接受两个参数：
  • value - 需要格式化的原始数字 — 在本示例中是用户输入的内容
  • format - 表示希望显示的数字格式。
如下：
format(value:NUMBER,format:TEXT)
format参数最多由四个关键字符组成：
  • # 表示格式的整数部分
  • 0 表示格式的小数部分
  • 小数点字符（例如，北美的 .）
  • 分隔符（例如，千位分隔符的 ,）
看一些例子：
  • format(1234.567, "#") 将输出 1235。在格式中未指定小数点后的位数，因此只得到一个整数。请注意输出是如何四舍五入。
  • format(1234.567, "#,###") 将输出 1,235。这指定了一个分隔符，连续的三个 # 字符表示分隔符将被用作千位分隔符。
  • format(1234.567, "#,##") 将输出 12,35。类似于上面的例子，只是分隔符后面跟着两个连续的 # 字符，因此是用作百位分隔符。
  • format(1234.567, "#,###.00") 将输出 1,234.57。 它将 . 作为小数点字符，以及保留两位小数。请注意输出是如何四舍五入到最接近的百分位数的。
  • format(1234.567, "#.###,00") 将输出 1.234,57。这与上面的格式相同，但是 . 被用作分隔符，而 , 被用作小数点字符。这是欧洲和世界其他地区常用的数字格式。
💡 最后一个例子展示了如何使用 format() 函数为特定受众制定更贴切使用习惯的交互体验。
根据经验，北美的美元和美分的常用格式如下：
  • $1,234.57
上面的第四个例子展示了这种格式的数字部分，接着需要在表达式中单独添加 $ 字符。一起来看看它的效果！
  • 在之前创建的「文本」反应中，使用以下表达式：
    • "$" + format(Input 1.text, "#,###.00")
9
💡 发生了什么：
在处理未知或动态信息时，都需要使用表达式来将动态信息“填充”到其中。在本教程示例里，我们不知道用户会输入什么。因此，没有像例子那样使用明确的数字，而是将 Input 1 图层的 text 文字属性作为格式化函数的第一个参数。当执行此表达式时，ProtoPie将用实际输入的内容替换它。
另外，请注意在输出的开头添加了 **$** 字符。使用 **+** 字符将 — 美元符号和格式化数字 — 这两个文本连接在一起。如果需要使用 **€** 或 £ 等其他货币符号，请在表达式中将 $ 替换为需要的符号。
一起来预览原型吧！现在已经接近我们想要的交互，但这里注意到无论我们输入什么，都只能得到一个完整的美元金额，小数点后没有美分部分。
10
这是因为输入内容总是一个整数。如果希望ProtoPie将上述输入显示为 123.45，而不是 12345。则需在 format 处理输入之前，使用一些基本的数学操作将输入的数值除以100。
如下修改表达式：
  • "$" + format(Input 1.text / 100, "#,###.00")
11
💡 由于标准键盘上没有 ÷ 键，程序员们很久以前就约定使用 **/** 字符来表示除法计算。同样地，***** 用于表示乘法计算。
再次预览一下原型。现在可以完全正常显示我们想要的格式了！
12
现在进行最后的清理：隐藏输入图层。有几种方法可以实现这一点。第一种是可以将图层的透明度设置为 0，这种方法不错，但我们更推荐第二种 — 可以将图层保持可见并定位于屏幕之外，这可以提醒我们或将来可能需要处理此Pie的人，该交互涉及到隐藏的输入图层。
13
14

轻而易举学会数字格式化！

在本课程中，学习了如何使用ProtoPie的多功能 format() 函数将输入的数字正确显示为货币金额。您还学习了如何使用设备的原生键盘，以便在隐藏的输入图层中捕捉用户输入的内容。
对该交互的制作还有问题？联系我们