常见交互

使用条件逻辑快速制作表单字段原型

在ProtoPie中掌握输入字段和表单验证，使用真实文本输入。

Khonok Lee, Head of Customer Learning

April 22, 2024

使用条件逻辑快速制作表单字段原型
表单字段验证是任何应用或网站UX设计的核心。它可以防止用户错误，并像一个有用的伙伴一样引导用户在完成在线表单时获得无缝的体验。在设计阶段，专门为表单验证创建原型使设计师能够收集有关用户流程的宝贵反馈，确保正确的信息被输入，从而节省时间和资源。
为了做到这一点，你需要一个完美地利用条件逻辑应用于你的设计的工具。这篇文章将指导你如何使用ProtoPie原型化输入字段，更重要的是，你还可以轻松地在你自己设备的原生键盘上使用真实文本输入来测试你的原型。

在开始之前

为了积极参与这个教程，下载下面的示例.pie文件并在场景之间切换。我们建议首先从空白项目开始 —— 先乐在其中练习一下，然后再偷看完整的项目来看看你的进展如何。享受原型制作的乐趣吧！
下载原型

什么是必填字段验证？

必填字段验证是一种表单验证技术，它确保在提交表单之前必须填写输入字段。这是一种确保用户提供必要数据的方式。这种验证通常由红色的星号（*）表示，这是指示必填字段的常用方法。
它被用于各种输入类型，如文本、搜索、URL、电话、电子邮件、密码、日期选择器、数字、复选框、单选按钮和文件。这种验证有助于通过阻止提交不完整的表单来提高用户体验。ProtoPie的输入层功能使这一过程变得非常简单。

如何在ProtoPie中原型化必填字段验证

现在，让我们探索一个请求必要名字的文本字段的示例。在初始项目中，我们已经为你准备了一些设计和交互。
必填字段验证
必填字段验证
  • 在设计方面，屏幕上会出现一个错误消息。稍后会对其进行动画处理，根据用户输入来显示或隐藏。
  • 至于交互，我们使用“Focus”触发动作为“文本字段”设置了默认状态和焦点状态。
首先，让我们隐藏错误消息。你可以通过将其不透明度设置为0来实现这一点。
将错误消息的不透明度设置为0。
将错误消息的不透明度设置为0。
一旦你输入了内容，点击文本字段外部或按下键盘上的Enter键。此时，我们将检查文本字段是否仍然为空。如果文本字段为空，我们会为文本字段显示一个错误状态，并在下方显示一个错误消息。
  1. 在“Focus Out”触发动作下，让我们添加一个条件。对于这个条件，我们将设置为**Text of Text Field = "NONE"**。这个条件检查文本字段是否为空。检查文本字段是否为空的条件。
检查文本字段是否为空的条件。
检查文本字段是否为空的条件。
2. 当条件满足时，是时候动画化错误状态了。
  • 为“错误消息”图层添加一个“不透明度”响应，将其不透明度设置为100。
  • 为“文本字段”图层添加一个“边框”响应，将其边框颜色设置为红色。
动画错误状态。
动画错误状态。
3. 接下来，让我们引入额外的交互，这样当我们的文本字段接收到内容时，它会取消显示错误消息。为了实现这一点，我们将利用“监听”触发动作。监听触发动作持续监测我们目标对象的任何变化。
  • 为“文本字段”图层添加一个“监听t”触发动作，让我们检测其“文本”属性。（对于输入层，文本属性表示字段内的内容）
  • 接下来，创建一个条件来验证文本字段是否已填写。使用条件 Text of Text Field ≠ "NONE"
  • 在这个条件下，通过为其应用一个“不透明度”响应并将其设置为0来使错误消息消失。
检测文本字段中的内容。
检测文本字段中的内容。

什么是范围检查？

范围检查是一种输入验证，它验证输入数据是否落在预定义的范围内。以下是一些范围检查的示例：
年龄：例如，一个中学生的年龄可能在11岁到16岁之间。计算机可以编程只接受11到16之间的数字。 地理数据：纬度和经度是地理数据中常用的。纬度值应该在-90到90之间，而经度值必须在-180到180之间。任何超出这个范围的值都是无效的。 字符串：字符串的最小和最大长度检查。例如，检查密码是否在8到16个字符之间。

如何在ProtoPie中原型化范围检查

从示例项目中，让我们导航到名为“范围检查”的场景。
11岁以下会触发错误状态。
11岁以下会触发错误状态。
让我们从一个例子开始，中学生需要输入他们的年龄，并确保它在11到16岁的范围内。
范围检查
范围检查
这个交互是基于我们的第一个例子的，确保用户输入的要求。这个场景的预配置交互可以在交互面板的“Age”组中找到。
当用户从这个文本字段中失去焦点时，让ProtoPie验证输入值。
  1. 在“Focus Out”触发动作下添加一个条件。配置条件为 Text of Text Field - Age < 11，以处理用户输入小于11岁的年龄的情况。实施以下响应：验证值是否小于11的条件。
验证值是否小于11的条件。
验证值是否小于11的条件。
  • 为“错误消息 - Age”图层添加一个“不透明度”响应，将其不透明度设置为100。
  • 为“文本字段 - Age”图层添加一个“边框”响应，将其边框颜色设置为红色。11岁以下会触发错误状态。
11岁以下会触发错误状态。
11岁以下会触发错误状态。
2. 创建另一个条件来检查大于16岁的年龄，使用 Text of Text Field - Age > 16。通过复制和粘贴与前一个条件相同的交互来实施相同的交互。这确保了当用户输入大于16岁的年龄时，会出现错误消息。
当年龄超过16岁时，也会触发相同的错误状态。
当年龄超过16岁时，也会触发相同的错误状态。
让我们继续到第二个例子，我们将验证密码的长度。要求密码的长度在8到16个字符之间。
密码必须达到一定的长度。
密码必须达到一定的长度。
你可以在交互面板的“Password”组中找到一些预先制作的交互。
现在让我们配置“Focus Out”的错误状态。
  1. 我们的第一个条件用于检查密码是否太短，所以我们使用 length(Text Field - Password.text) < 8。length()是ProtoPie中检查字符串长度的函数。
检查密码是否太短的条件。
检查密码是否太短的条件。
  1. 我们的第二个条件是检查密码是否太长：length(Text Field - Password.text) > 16
验证密码长度是否太短或太长的条件。

什么是一致性检查？

一致性检查是一种数据验证，它确保输入的数据在逻辑上是一致的。它检查数据中的内部冲突，具体来说，检查数据的规则是否有矛盾的陈述，例如：
  • 密码确认：一个要求重新输入密码的字段可能会检查它是否与先前输入的密码匹配。
  • 订单和交货日期：检查包裹的交货日期是否在发货日期之后。同样，包裹的发货日期不应早于订单日期。

如何在ProtoPie中原型化一致性检查

让我们考虑一个例子，用户需要重新输入他们的密码以供确认。
一致性检查
一致性检查
从我们的示例项目中，导航到名为“Consistency Checking”的场景。我们已经为密码字段准备好了交互。现在让我们专注于“确认密码”字段。
  1. 在交互面板的“确认密码”组中，找到“鼠标移出”触发动作。
  2. 添加一个条件来检查当 Text of Text Field - Confirm Password ≠ Text of Text Field - Password 时。这个条件表示两个密码不匹配。
比较两个密码字段中内容的条件。
比较两个密码字段中内容的条件。
  1. 在这个条件下，我们现在可以配置一个错误状态，通过使文本字段的边框变为红色并显示一个错误消息。
为当两个字段中输入的密码不匹配时添加错误状态。
为当两个字段中输入的密码不匹配时添加错误状态。

什么是数据类型验证？

数据类型检查是一种输入验证，它确保输入到字段中的数据与预期的数据类型匹配。例如，
  • 年龄：年龄字段通常只允许数字。例如，在在线填写表单时，年龄字段会拒绝任何非数字的输入。
  • 信用卡号码：输入信用卡号时，只允许数字。任何字母或特殊字符都会被拒绝。
  • 7城市名称：在某些应用程序中，城市名称字段只允许字母。例如，它会拒绝像“Toronto123”这样的输入，只接受像“Toronto”这样的字母输入。

如何在ProtoPie中原型化数据类型验证

让我们考虑一个实际的场景，其中输入字段明确请求一个整数数量。
数据类型验证
数据类型验证
这个例子位于我们示例项目中的“Data Type Validation”场景中。
  1. 在“鼠标移出”触发动作下，创建一个条件来验证用户的输入。
  2. 在这个条件下，我们需要严格拒绝任何不是数字的输入。使用以下条件：regexextract(Text Field.text,"[0-9]+") ≠ Text of Text Field
验证值是否为数字的条件。
验证值是否为数字的条件。
  1. regexextract(): 这个函数用于提取与指定正则表达式模式匹配的第一个子串。 5
  2. ``Text Field.text: 指的是“Text Field”输入的文本内容。
  3. "[0-9]+": 这是一个正则表达式模式。这是它的含义：
  • [0-9]: 匹配从0到9的任何数字。
  • +: 指定前面的模式（在这种情况下，[0-9]）应连续出现一次或多次。
等式的左侧（regexextract(Text Field.text,"[0-9]+")）提取从输入文本中由数字组成的第一个子串。例如：
  • 如果你输入“123abc”，它返回“123。”
  • 如果你输入“def456”，它返回“456。”
该条件检查这个提取的数字子串是否与“Text Field”中的原始文本不匹配。如果它们不匹配，这意味着输入中存在非数字字符。
  1. 在这个条件下，我们可以设置一个特定条件的错误状态，通过将文本字段的边框颜色调整为红色并显示一个错误消息。
调整框的颜色以指示错误消息。
调整框的颜色以指示错误消息。

什么是模式匹配？

输入验证中的模式匹配涉及定义一个特定的模式或格式，然后检查输入数据是否符合这个模式。通常，在软件开发中，我们使用正则表达式（regex）来实现这一目的。
正则表达式（通常称为regex）通过指定可以用于在字符串中搜索特定字符或单词的模式来工作。如果你不喜欢深入编码，你可以利用AI来为你生成所需的代码。
以下是几个说明模式匹配的例子：
  • 邮箱验证：确保电子邮件地址的有效性涉及检查输入是否符合电子邮件的一般模式。这可能包括在“@”符号之前的字符，后跟额外的字符，并以句点结束。在句点之后，应该至少有两个从a到z的字母。
  • 密码验证：验证密码通常需要遵循一个特定的模式。例如，密码可能需要包含至少一个数字、一个大写字母和一个小写字母，并且至少为8个字符长。
4如果你想进一步了解正则表达式，你可以参考这个快速指南。如果编码不是你的强项，随时请AI帮助你生成所需的代码！

如何在ProtoPie中原型化模式匹配

让我们在我们示例项目的“Pattern Matching”场景中探索密码模式检查，用户需要在他们的密码中包含至少1个大写字母和3个数字。
模式匹配
模式匹配
  1. 在“鼠标移出”触发动作下，创建第一个条件来验证密码是否满足大写字母的要求。配置条件如下：regexextract(Text Field - Password.text,"[A-Z]") = "NONE”
确保至少有一个大写字母的条件。
确保至少有一个大写字母的条件。
  • 这个模式[A-Z]单独就可以成功匹配字符串中的第一个大写字母。例如，如果你输入“abcDE”，它会返回“D”。尽管这个函数在找到第一个结果后就停止检查，但只要它返回任何内容，就表示输入包含至少一个大写字母。
  • 如果返回“NONE”，则条件未满足，表示失败。在这个条件下面，我们可以继续为该字段创建一个错误状态的动画。
2. 对于第二个条件，验证密码是否包含至少3个数字，使用以下要求：regexextract(Text Field - Password.text,"^(.?[0-9]){3,}.$")= "NONE”
为确保至少有三个数字的条件。
为确保至少有三个数字的条件。
  • ^: 断言字符串的开始。
  • (.*?[0-9]): 匹配任何字符序列（非贪婪），后跟一个数字。*
  • {3,}: 指定前面的模式(.?[0-9])必须至少出现三次。 .
  • *: 匹配任何剩余的字符。
  • $: 断言字符串的结束。
使用这个函数，ProtoPie被指示严格检查并返回符合指定要求的字符串。如果返回“NONE”，则条件未满足，表示失败。在这种情况下，我们应该继续为密码字段创建一个错误状态的动画。

使用ProtoPie设计更好的用户体验

表单字段只是ProtoPie在产品设计中让事情变得更加高效的众多工具之一。集成如必填字段检查、范围验证、一致性检查、数据类型验证和模式匹配等验证模式都变得轻而易举。
利用ProtoPie的高保真原型设计功能，提高你设计的整体效果吧！
学习高级原型制作 免费下载Protopie