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

AI时代,如何更快入行抢占红利得高薪?前阿里巴巴产品专家带你15天入门AI产品经理。了解一下>

登录功能是一个非常常见的功能,几乎所有的产品都有登录功能,登录功能可以很简单,也可以非常复杂。我们在用axure做产品原型设计的时候,都会涉及到登录功能,那么,登录功能是怎么设计出来的呢?

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

需求分析

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

  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设计原型的时候,一定要明确的标注在登录功能里面的各种场景。

 

本文由 @马白龙 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
评论
欢迎留言讨论~!
  1. 什么情况下要做如此高保真的原型?

    回复
    1. 主要看你的原型主要给谁看,比如给老板或者给客户,这时候原型要尽量贴近最后会实现的产品。
      如果是给研发,标注清楚才是关键。

      回复
    2. 好的 谢谢~哪一个产品的原型做到这么高保真,你一般要多久时间?

      回复
    3. 看原型的复杂程度啊以及功能多少,这个没有统一的要求。

      回复
圈子
关注微信公众号
大家都在问