账号登录 | Account Login

构建一个使用条件逻辑来验证用户凭证的登录表单,在这个原型中,你会有一个可能有效的电子邮件地址(rose@classyharbor.com)和一个可能的密码(password1),(不要使用你的银行密码,伙计,养成一个良好的密码使用习惯,登录网站www.passwordsgenerator.net。)电子邮件和密码全部正确才能登录网站。

STEP0:下载练习文件

如果你还没有练习文件,请下载Axure Training.rp并在Axure RP中打开它,该文件包含了Axure培训网站上每个教程的对应页面。我们建议你始终使用我们准备好的文件来学完教程,但是如果你无法保证,那也没有关系,我们也会告诉你在不使用Axure Training.rp文件的情况下,如何创建新文件来完成教程。

STEP1:设置

在联系文件中打开“账号登录”页面。该页面包含一个由电子邮件字段、密码字段和登录按钮组成的登录表单,同时也包含一个错误信息元件,在登录失败的时候显示。

选中密码字段,在属性页签下,找到“类型”下拉列表并选择“密码”。

选中“错误信息”元件,点击样式页签下的“隐藏”复选框将其隐藏。

STEP2:成功登录

如果输入了正确的电子邮件和密码,登录后跳转到“账号中心”页面。

选中“登录”按钮,在属性页签下,双击“鼠标单击时”添加一个新的鼠标单击时用例。

在用例编辑器的顶部,点击“添加条件”按钮打开“条件设立”窗口。

保持第一个下拉列表的选项为“元件文字”,在第二个下拉列表中,选择“电子邮件”元件。

将后两个下拉列表分别设置为“==”和“值”,在最后一个字段中输入< rose@classyharbor.com>(不含括号)。

在右边点击绿色的“+”图标添加一个新的条件。

保持第一个下拉列表的选项为“元件文字”,在第二个下拉列表中,选择“密码”元件。

将后两个下拉列表分别设置为“==”和“值”,在最后一个字段中输入<Password>(不含括号)。

确保条件设立对话框顶部“符合”后面的下拉列表选项为“全部”。

点击“确定”按钮关闭条件设立窗口。

在用例编辑器左侧“添加动作”栏,点击“打开链接”动作。

在右侧“配置动作”栏,选择“账号中心”页面。

点击“确定”按钮关闭用例编辑器。

STEP3:登录失败

如果不符合用Case1中设置的条件,则应显示错误信息。

在“登录按钮”仍然被选中的情况下,在属性页签下再次双加“鼠标单击时”来创建第二个鼠标单击时用例Case2,在中间“组织动作”列中,注意文本“Else If True”,这个新的用例只有在前一个用例没有发生的情况下才会触发。

在左侧“添加动作”列,点击“显示”动作。

在右侧“配置动作”列,选择“错误信息”元件。

点击“确定”按钮关闭用例编辑器。

STEP4:预览

点击预览。

尝试在输入错误的登录信息的情况下点击“登录”按钮,已查看错误信息;然后尝试输入正确的电子邮件和密码登录到“账号中心”页面。

可选:添加登录

你可能希望在你的原型中包含更多可用的登录信息,比如你想使不同的账号可以看到不同的空间或者拥有不同的权限。尝试给“登录”按钮添加一个新的鼠标单击时用例,用例校验你所选的不同的用户名和密码。(确保这个新的用例在Case2用例上面,否则它将永远不会触发,你可以使用[CTRL]/[CMD]+[↑]来移动用例。)如果需要帮助,你可以加我微信:urmagic。

评论(0 个评论)

发表回复

您的电子邮箱地址不会被公开。