Axure RP官方教程翻译(9):帐号登录

建立一个登录表单,这个登录表单使用条件式的逻辑来证实用户的登录资格。在这个原型里,你将会有一个合适有效的邮箱地址<rose@classyharbor.com>和一个合适有效的密码“password1”。(不要用自己的银行密码,朋友们。操练好的密码习惯。请查看  www.passwordsgenerator.net)只有邮箱和密码都正确才能进入页面。实现效果如下:

Axure RP官方教程翻译(9):帐号登录

STEP 0:下载培训文档

如果你还没有培训文档,请点击下载 AxureTraining.rp 文档。这个文档包含了Axure培训网站上每个教程用到的相关页面。我们建议你一直都用我们准备的这个文档来完成教程,但是如果你不用,那也是可以的——即使你没有使用我们的培训文档,我们也总是会告诉你为了完成每一个教程新文件里都创建了什么。

STEP 1:设置

打开培训文档中的“Account login”页面。这个页面包含了一个由一个邮箱区域和密码区域的登录表单,和一个提交按钮。这个页面还包括了错误信息提示组件当有错误登录请求时才会出现。

选择密码区域,在右边的属性标签栏下,定位到“类型”的下拉选项框并选择“密码”。

选择“Error”组件,点击样式标签栏的“隐藏”复选框来隐藏它。

Axure RP官方教程翻译(9):帐号登录

STEP 2:登录成功

  • 如果输入的邮箱和密码都正确,那么“Account Home”页面就会被打开。
  • 选择“submit”按钮,在属性标签栏下,双击“单击”来添加一个新的单击实例。
  • 在实例编辑器的顶部,点击“添加条件”按钮来打开条件创建器。保留第一个下拉选项框的值为“在组件里的文本”。在第二个下拉选项框,选择“Email address”组件。
  • 保留接下来两个控制设置“等于”和“值”不变。
  • 在最后一个区域,输入<rose@classyharbor.com>(不包括方括号)。
  • 点击右边的绿色“+”号图标添加另一个条件。
  • 保留第一个下拉选项框的选项“在组件里的文本”。在第二个下拉选项框里选择组件“Password”。
  • 保留接下来两个控制设置“等于”和“值”不变。
  • 在最后一个区域,输入“password1”(没有引号)。
  • 在条件创建器的顶部,确认“满足”的下拉选项框为“所有”。
  • 点击确定关闭条件创建器。
  • 在实例编辑器的左边栏,点击“打开链接”行为。
  • 在右边栏选择页面“Account home”。
  • 点击确定关闭实例编辑器。

Axure RP官方教程翻译(9):帐号登录

STEP 3:登录失败

  • 如果实例1设置的条件不满足,那么错误的信息则会出现。
  • 仍然选中“Submit button”,再次双击属性标签栏中的“单击”来创建第二个实例,实例2。在对话框的中间,注意文字“否则”。这个实例只会在之前的实例不成立时才会发生。
  • 在左边栏,点击“显示”行为。
  • 在右边栏,点击复选框勾选“Error”组件。
  • 点击确定关闭实例编辑器。

Axure RP官方教程翻译(9):帐号登录

可选:额外的登录账号

你也许希望在你的原型中包含多个有效的登录信息。这非常有用如果你想要让不同的账号显示不同的内容或权限。尝试为submit按钮添加另一个“单击”实例,为他分配不同的邮箱名称和密码。(这里要确认新的实例需要用快捷键[CTRL]/[CMD]+[↑]来将它移动到实例2的上面,否则它无法生效。)

本文来自Axure.com,经授权后发布,本文观点不代表产品狗立场,转载请联系原作者。

发表评论

登录后才能评论

This site uses Akismet to reduce spam. Learn how your comment data is processed.

联系我们

 

QR code