彩票走势图

Axure RP是一套专门为网站或应用程序所设计的快速原型设计工具， 可以让应用网站策划人员或网站功能界面设计师更加快速方便的建立Web AP和Website的线框图、流程图、原型和规格。

免费下载Axure RP 优惠购买Axure RP

在本教程中，您将学习如何制作一个使用条件逻辑来验证用户凭据的登录表单。

页面和小部件设置

第1页–登录表单

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

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

• 将按钮小部件拖到画布上，并将其文本设置为登录。
• 将标题3小部件拖到画布上。将其文本设置为无效的电子邮件和/或密码，并将其命名为错误消息。
• 将错误消息的字体颜色更改为红色，然后通过单击样式工具栏或Style（样式）窗格中的Hidden（隐藏）图标将其隐藏。

第2页–成功登录页面

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

成功登录案例

链接到第二页

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

• 将鼠标悬停在Click或Tap标题上，然后单击右侧的Enable Cases。在出现的条件构建器对话框中，将案例命名为成功登录，然后单击Add Logic（添加逻辑）。

• 在出现的条件行中，在第二个下拉列表中选择Email（电子邮件）文本字段，然后在右侧的字段中输入test@domain.com。
• 单击添加行以添加另一个条件语句。在第二个下拉列表中选择Password（密码）字段文本字段，然后在右侧的字段中输入123456。

对话框底部的摘要应显示为：If text on Email Field equals "test@domain.com" and text on Password Field equals "123456". 仅当单击Login（登录）按钮时两个语句都为true时，才满足此条件。

• 单击确定关闭条件生成器。

错误的登录情况

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

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

注意：即使我们没有为这种情况设置条件，它的条件为ELSE IF true。如果没有通过第一种情况（如果表单中提供了错误的电子邮件和/或密码），则将触发此情况（也称为默认情况）。

预览互动

• 预览页面，然后单击Login（登录）按钮。由于您尚未提供正确的登录信息，因此将出现错误消息。
• 现在，在Email（电子邮件）字段中输入test@domain.com，在Password（密码）字段中输入123456，然后再次单击Login（登录）按钮。您应该进入原型的第2页。

附加信息和提示

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

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

关注慧聚IT微信公众号☟☟☟，了解产品的最新动态及最新资讯。