作者主要针对如何利用Axure制作验证码原型进行了一些分享,希望对大家有所启发。
账户的登录注册为了系统的安全,避免恶意的攻击,一般都需要添加验证码,当然有成熟的框架使用,但是在原型的时候怎么显得很酷炫呢,那么接下来的就用得着了。需要下面几个步骤准备。
一、准备
首先,需要四个元件:
1、输入框:用来输入验证码,命名:输入框
2、矩形框:用来显示系统的二维码,命名:验证码
3、按钮:显示按钮换一张,命名:换一张
4、动态面板:用来显示提示信息,命名:提示信息,两个状态一个:正确;一个:错误。
这四个元件,也可以用其他的代替,只要能完成设计就可以。
然后,设置全局变量。
OnLoadVariable默认值为:
0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
yzm默认值为空;
全局变量的名字可以自己取,OnLoadVariable的默认值就是验证码随机取的值,可以自己随便设定。
二、设置
1、当前页面
不选择任何元件,点击当前的页面,在【检视】-【属性】添加交互事件,选择【页面载入时】事件(因为在页面打开时是默认有一个验证码的),本例默认验证码为4位。
含义:
验证码默认情况下文字是空,所以条件是如果验证码文字的长度小于4,那么就为验证码设置一个值,并且在页面载入时就显示出来。
步骤:
双击【页面载入】事件设置,在弹框最上方用例名称后边点击【添加条件】。
设置条件为:
条件为验证码的长度小于4就执行下面的事件,直到验证码文字的长度=4结束。
ymz的值:[[yzm]][[OnLoadVariable.substr(Math.floor(Math.random()*62),1)]]
含义:
ymz的值来自OnLoadVariable变量,substr()实现;
Math.random()*62,是数学的随机函数,随机位0~1之间的数,*62后就会随机0~62之间的数;
Math.floor(),是数学向上取整函数
所以整体的意思就是,取OnLoadVariable随机一位数给ymz。
2、输入框
含义:
如果输入框位文字长度是4同时文字等于验证码的文字,那么显示动态面板-提示信息的值是正确的;其他的情况不显示或者提示错误。
步骤:
case1:其他的也是如此
3、按钮换一张
含义:
清空验证码、输入框、隐藏提示信息,同时重新触发页面载入时的时间。
步骤:
清空就是将文本的值设为空即可。
三、预览
结束,可以预览了,看看什么效果。注意,原型没有那么智能,大小写是要区分的哦~
效果预览:http://71wgw6.axshare.com
小伙伴们自己试试吧,就不放原型了。
整体的过程设置还是比较复杂的,但是用使用的时间长了之后还是可以灵活运用的。
本文由 @dantina 原创发布于人人都是产品经理。未经许可,禁止转载。