Axure8原型设计实战案例:如何实现登录功能?

23,445

本文和大家分享一个常用的登录功能的原型设计,最终的实现效果如下所示:


需求分析

我们对登录功能的需求进行分析,得出功能要实现的需求如下:

  1. 账号、密码输入框要有初始的信息提示;
  2. 在账号、密码为必输项,如果没有输入,要给出提示并且输入框边框变成红色提示;
  3. 点击登录,判断账号、密码是否正确,如果错误就要给出提示并且边框变成红色;
  4. 如果账号、密码正确,就登录到目标页面。

设计思路

针对上面的需求,我们实现的思路如下:

  1. 输入框的初始提示信息可以通过文本框元件实现,文本框元件可以设置提示文字,并且可以设置提示文字隐藏的触发动作;
  2. 对于输入框变红的效果,因为文本框没法设置边框的颜色,我们只能通过一个变通的方法实现,即在文本框外面套一个矩形框,文本框的边框设置为隐藏,用矩形框的边框代替文本框的边框;
  3. 对于错误提示,可以通过设置动态面板实现,因为错误提示有很多种,不同的错误,对应动态面板的不同状态。

原型设计

(1)账号输入框

拖入一个矩形框,设置该矩形框的名称为【用户名-背景】,并且设置该矩形框的获取焦点以后的颜色是红色;拖入一个文本框,设置该文本框的名称为【用户名】,并且设置该文本框的边框隐藏。

(2)密码输入框

拖入一个矩形框,设置该矩形框的名称为【密码-背景】,并且设置该矩形框的获取焦点以后的颜色是红色;拖入一个文本框,设置该文本框的名称为【密码】,设置该文本框的类型为【密码】,并且设置该文本框的边框隐藏。

(3)错误提示设置

  1. 在账号输入框下面拖入动态面板,设置动态面板的名称为【账号-提示语】,动态面板增加三个状态,stat1、state2、和stat5,分别对应不同的错误提示;
  2. 在密码输入框下面拖入动态面板,设置动态面板的名称为【密码-提示语】,动态面板增加三个状态,stat1、state2、和stat4,分别对应不同的错误提示;

(4)登录按钮

拖入矩形框,作为登录按钮;

(5)其他功能

做为登录功能,除了最基本的账号、密码和登录按钮意外,还有用第三方账号登录、记住密码、忘记密码、注册等功能,本次原型设计没有涉及这些功能,只是把相关的元件放上去,并没有相关交互设计。

交互设计

(1)账号输入框交互设计

编辑【用户名】元件的【失去焦点】事件,当【失去焦点】的时候,做如下判断:

判断【用户名】是否为空,如果为空,设置【账号-提示语】状态为stat1,即提示账号不为空;

判断【用户名】是否为admin,如果不是,设置【账号-提示语】状态为stat2,即提示账户名不存在,请重新输入。

(2)密码输入框交互设计

编辑【密码】元件的【失去焦点】事件,当【失去焦点】的时候,做如下判断:

  • 判断【密码】是否为空,如果为空,设置【密码-提示语】状态为stat1,即提示请输入您的登录密码;
  • 判断【密码】是否为123qwe,如果不是,设置【密码-提示语】状态为stat2,即提示账户名与密码不匹配,请重新输入。

(3)登录框的交互设置

编辑登录框的【单击事件】,判断【用户名】 和【密码】输入框是否为空,是否为admin以及123qwe,如果不是,则给出提示 ,如果是,则打开登录页面。

总结

登录功能是最基本的功能,需要注意的细节很多,产品经理在用Axure设计原型的时候,一定要明确的标注在登录功能里面的各种场景。

发表评论

您的电子邮件地址将不会发布。

评论审核已启用。您的评论可能需要一段时间后才能被显示。