axure原型设计之获取验证码

2017年3月13日
7+
阅读:1,209

当前,很多表单的设计都会使用手机获取验证,一方面商家可以精准获取用户的手机号码,以便之后的精准推广,另一方面也防止用户批量注册小号扰乱平台秩序。今天就主要说说如何使用axure原型来进行获取验证码表单设计。

获取验证码表单主要包括一个输入框和一个“获取验证码”按钮,其中“获取验证码”按钮才是设计的重点。它总共有两种状态,一种是静态文本状态,即按钮中显示“获取验证码”,另一种是动态倒计时状态,即按钮中显示“XX秒后重新获取”。

从静态文本状态到动态倒计时状态的转换所需要的操作是点击按钮,而从动态倒计时状态到静态文本状态所需要的操作是60秒倒计时到0时。因此,可以分四步来进行:

第一步:先摆好所要控件,即向画布拖拉一个文本框和一个矩形,矩形可以设置成橙色,并写上文字“获取验证码”。

第二步:为矩形添加一个载入时用例,用例中设置全局变量初始值,即OnLoadVariable的值设置成60,60为重新获取验证的倒计时初始值。

第三步:为矩形添加一个鼠标单击时用例,先把用例中的条件设置成OnLoadVariable的值不等于0,然后再为用例添加5个动作

1、禁用“获取验证码”;
2、设置文本的值为“[[OnLoadVariable-1]]秒后重新获取”;
3、设置全局变量的值为“[[OnLoadVariable-1]]”;
4、添加等待1000毫秒;
5、添加触发矩形鼠标单击事件。


第四步:再为矩形添加一个鼠标单击时用例,先把用例中的条件设置成OnLoadVariable的值等于0,然后再为用例添加3个动作

1、设置全局变量的值为“60”;
2、设置文本的值为“获取验证码”;
3、启用“获取验证码”。

好了,点击预览即可看到逼真的动态效果。同时也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

效果图:axure原型设计之获取验证码
附件下载:获取验证码rp文件

作者:维度
转载请注明出处:http://weidublog.com/index.php/2017/03/13/86/

11条评论

  • 丫头 2017年11月26日在下午10:03

    要是能下载就好了

    • 维度 2017年12月1日在上午9:54

      有部分在Q群里面是可以免费下载的

  • 赖相贵 2017年9月29日在上午11:17

    为什么在非0的条件下,最后需要加个触发鼠标单击的选项,一开始不是已经说了鼠标单击吗?

  • Sailipdobia 2017年5月6日在上午2:35

    thank you very much for you article.

  • 落尘 2017年4月12日在上午9:16

    点击按钮 倒计时会加快啊 而且倒计时完成后 不会返回初始状态 怎么破

    • 维度 2017年4月12日在上午9:24

      是一直点击吗?你可以改进一下,在点击之后将其按钮变灰禁用,倒计时完成后又恢复按钮使用,这样就可以解决问题了

  • 邵星星 2017年4月11日在上午9:06

    按步骤做出来了,不过有个漏洞,倒计时的时候在点按钮时间会加快,不知道有没有办法优化一下?

    • 维度 2017年4月11日在上午9:12

      已在博客中优化了,多谢你的提问,优化方法是:点击之后将其按钮禁用,倒计时完成后又恢复按钮使用

  • 夜愿君 2017年4月10日在下午1:25

    猛点获取有惊喜

    • 维度 2017年4月11日在上午9:09

      多谢你的反馈,确实疏忽了这一点,不过在点击之后将其按钮禁用,倒计时完成后又恢复按钮使用,这样就可以解决问题了

  • shi 2017年4月9日在下午5:30

    谢谢~简单明了!

发表评论

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