1. 首页
  2. AxureRP专区
  3. Axure教程

Axure教程-Axure制作会员注册即时反馈交互效果

该案例实现的交互效果是:

当用户在输入框输入信息进行判断,若输入错误则立即显示红色错误提示;如果文本输入框符合要求则隐藏错误提示;如果全部输入框都符合要求,点击【立即注册】,弹出注册成功的信息。

Axure制作会员注册即时反馈交互效果
实时验证演示效果.gif
Axure制作会员注册即时反馈交互效果
注册成功演示效果.gif

根据交互效果我们可以得到如下思路:

    1. 要给每个文本框添加判断条件,因为符合条件要隐藏错误提示,不符合条件要显示错误提示【添加用例】必须在【文本改变时】
    2. 每次单击注册按钮的时候,所有的文本要进行判断,因为用户很可能逐项修改错误,因此可能会对此单击注册按钮尝试,所以要及时反馈,
    3. 要对所有的文本框进行条件判断,因为只有所有的输入框条件全部符合要求,才能触发弹出注册成功的提示。

第一步:

根据如图界面设置,使用矩形部件、文本输入框、标签、、复选框创建会员注册模块,并按照命名模块给部件命名

Axure制作会员注册即时反馈交互效果
界面设置.png

注册模块要求:
用户名长度5-15个字符
密码长度6-20个字符
确认密码必须与登录密码一致
验证码必须与右侧矩形中的验证码一致
协议必须勾选

Axure制作会员注册即时反馈交互效果
元件命名.png

第二步:

同时选中5个红色的错误提示和注册成功元件,并将其设置为隐藏,因为默认情况下不需要显示
同时将注册成功放置在合适的位置(注册模块中间上方)如下图所示:

Axure制作会员注册即时反馈交互效果
隐藏提示.png

第三步 :

为name 文本框添加验证 如下图添加2个case

Axure制作会员注册即时反馈交互效果
name_case.png

为pwd文本框添加验证 如下图添加2个case

Axure制作会员注册即时反馈交互效果
pwd_case.png

为pwd_confirm文本框添加验证 如下图添加2个case

Axure制作会员注册即时反馈交互效果
pwd_confirm_case.png

为v_code文本框添加验证 如下图添加2个case

Axure制作会员注册即时反馈交互效果
v_code_case.png

为xieyi复选框添加验证 如下图添加2个case

Axure制作会员注册即时反馈交互效果
xieyi_case.png

这样就已经做到了文本框的实时验证

第四步:

为login按钮添加验证 如下图

1.为因为用户随时可能会修改内容,所有我们再点击立即注册的时候还要在进行条件判断,只有文本框全部符合下面条件的才能注册成功(参考下图case6的设置)

用户名长度5-15个字符
密码长度6-20个字符
确认密码必须与登录密码一致
验证码必须与右侧矩形中的验证码一致
协议必须勾选

Axure制作会员注册即时反馈交互效果
login_case.png
Axure制作会员注册即时反馈交互效果
case6.png

这样我们的即时验证就做好了。

已经将此部分内容制作成元件库,欢迎大家下载使用,一起探讨

元件地址:

https://pan.baidu.com/s/1kWsfJFL

本文来自简书,本文观点不代表PmTemple立场,转载请联系原作者。原文链接:https://www.jianshu.com/p/cef199fd561d

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

185-1614-2515

在线咨询:点击这里给我发消息

邮件:admin@pmtemple.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code