原型设计工具Axure RP入门教程（六）：必填字段教程

在本教程中，您将学习如何制作使用条件逻辑的注册表单，以确保用户已完成所有必填字段。

在本教程中，您将学习如何制作使用条件逻辑的注册表单，以确保用户已完成所有必填字段。

小部件和页面设置

创建注册表单

• 打开一个新的RP文件，然后在画布上打开Page 1。
• 将两个文本字段小部件拖动到画布上。 命名一个文本字段电子邮件字段，另一个命名密码字段。 （您可以选择使用标签小部件为每个标签添加标签。）

提示：要屏蔽密码字段的文本，请将其输入类型设置为密码。

• 将按钮小部件拖到画布上，并将其文本设置为Sign Up。
• 将Heading 3小部件拖到画布上。 将其文本设置为“请输入电子邮件地址和密码，并将其命名为错误消息”。
• 将错误消息的字体颜色更改为红色，然后通过单击样式工具栏或样式窗格中的隐藏图标将其隐藏。

添加成功的注册页面

• 在项目中添加一个新页面，并在画布上打开它。
• 将标题1小部件拖到画布上，并将其文本设置为谢谢您注册！

成功的注册案例

链接到第二页

• 选择注册按钮，然后在Interaction（交互）窗格中单击Click（单击）或Tap（点击）→Open Link（打开链接）。
• 在出现的下拉菜单中选择第2页，然后单击确定。

• 将鼠标悬停在Interaction（交互）窗格中的Click（单击）或Tap（点击）标题上，然后单击右侧的Enable Cases（启用案例）。
• 在出现的条件构建器对话框中，将案例命名为成功注册，然后单击Add Logic（添加逻辑）。
• 在出现的条件行中，在第二个下拉列表中选择电子邮件字段文本字段，然后在第三个下拉列表中选择不等于。
• 单击添加行以添加另一个条件语句。 在第二个下拉列表中选择密码字段文本字段，然后在第三个下拉列表中选择不等于。
• 对话框底部的摘要应显示为：If text on Email Field does not equal “” and text on Password Field does not equal “”。 仅当单击注册按钮时两个文本字段都包含一些文本时，才能满足此条件。
• 单击确定关闭条件生成器。

注册申请失败

• 选中注册按钮后，将鼠标悬停在Interaction（交互）窗格中的Click（单击）或Tap（点击）标题上，然后单击右侧的Add Case（添加案例）。
• 在出现的条件构建器对话框中，将新案例命名为不成功注册，然后单击确定而不添加任何逻辑。

• 单击Interaction（交互）窗格中新案例标题下方的插入操作图标。
• 在出现的列表中选择显示/隐藏，然后定位错误消息小部件。 保持显示处于选中状态，然后单击确定。

注意：即使我们没有为这种情况设置条件，它的条件为ELSE IF true。如果第一种情况的条件不成立（如果一个或两个文本字段为空），则将触发此情况（也称为默认情况）。

预览互动

• 预览页面，然后单击注册按钮。 由于文本字段为空，因此将出现错误消息。
• 在文本字段之一中输入一些文本，然后再次单击注册按钮。由于文本字段之一仍为空白，因此错误消息仍应可见。
• 最后，在第二个文本字段中输入一些文本，然后再次单击注册按钮。 现在，您应该将注册成功的信息定向到第2页。

附加信息和提示

文本字段为焦点时隐藏错误消息

如果您希望用户单击文本字段之一时再次隐藏错误消息，请为每个文本字段在获得焦点事件下设置显示/隐藏操作。

想要获得Axure RP更多资源、正版授权的伙伴，请咨询【客服】了解

标签：