Axure教程:获取验证码倒计时效果的实现

访客4年前黑客资讯1233

很多APP或者网站都支持手机号登录,手机号登录一定会涉及短信验证的获取。获取的过程有时间有效性,一般默认为60s,如果用户在时效内未接收到验证码,可再次点击“获取验证码”来获取。今天,我们就来学习用Axure实现这种效果。

Axure教程:获取验证码倒计时效果的实现

 前期准备

软件:Axure 9.0

硬件:Windows/Mac电脑

逻辑梳理

Axure教程:获取验证码倒计时效果的实现

教程 1. 绘制手机号账户登录页面,如下图

Axure教程:获取验证码倒计时效果的实现

找一个手机壳的元件库,或用矩形设置成标准手机尺寸。

*** 内容页面,如左侧图所示。

在手机号输入框中设置提示文字“请输入手机号”。

在验证码输入框中设置提示文字“请输入验证码”。

Axure教程:获取验证码倒计时效果的实现

2. 创建动态面板,建立至少2个以上的状态

动态面板的作用主要用于切换状态时的倒计时效果,简单的说,点击获取后60秒到0秒的文案展示都是靠动态面板实现的。这里留一个小思考,为什么要建立至少2个状态呢?

Axure教程:获取验证码倒计时效果的实现

3. 添加获取验证码按钮交互效果

给获取验证码按钮起一个名字,并设置禁用时样式。

Axure教程:获取验证码倒计时效果的实现

设置单击时交互。首先,设置之前建好的动态面板状态,设置切换状态下一项时能够间隔向后循环。保证获取验证后的等待时间变化。(动态面板之前已起好名字为“切换状态”)

Axure教程:获取验证码倒计时效果的实现

在单击时交互效果中添加动作,设置一个全局变量x。并设置x的值为60。

Axure教程:获取验证码倒计时效果的实现

Axure教程:获取验证码倒计时效果的实现

4. 设置动态面板状态改变时交互动作

情形1 :全局变量x的值不等于0时,即大于0时设置让x的值每次减一。实现点击后变为60秒倒计时,变为0之前禁止重复点击获取验证的效果。

Axure教程:获取验证码倒计时效果的实现

情形2:全局变量x的值等于0时,实现可重新点击获取验证码效果。

Axure教程:获取验证码倒计时效果的实现

验证效果

OK,最终达到我们想要的效果,当我们输入手机号以后点击获取验证码后,按钮变为禁用状态,同时文案进行倒计时展示,当倒计时为0时,按钮变为启用状态。

Axure教程:获取验证码倒计时效果的实现

结语

还是那句话,希望大家想一下。想要完成倒计时效果,除了我为大家讲解的这种,是否还有其他 *** 可以实现呢?

Axure作为产品经理的必备工具,不光是帮我们实现了交互效果,更多的是要学会它实现效果的思路,我希望大家能在我的文章中找到自己的进步。感谢大家观看~

相关文章

Axure教程:网易云音乐首页原型设计

Axure教程:网易云音乐首页原型设计

作者利用Axure动态面板功能对网易云音乐首页进行了一个简单的原型设计,那如何利用Axure动态面板功能实现轮播效果及交互功能以及隐藏丑陋的滚动条呢?下面来和我一起研究一下~ 制作示例如下: 网易...

Axure教程:高保真的上传效果(图片、文件)

Axure教程:高保真的上传效果(图片、文件)

今天教大家怎么做一个高保真的上传图片、文件的效果。该原型用中继器做的,所以使用的时候只需要简单填写表格内容即可,也可以当做学习中继器交互的案例。如有喜欢该原型或者有什么疑问的都可以在评论区留言。 为...

Axure教程:实现光标移动切换图片的效果

Axure教程:实现光标移动切换图片的效果

编辑导读:本文跟各人分享,如何用Axure实现光标移动切换图片的结果,作者从预览图,到所需原件,再到操纵步调都一一展开了阐明,并对进程中需要留意的问题举办了先容,但愿对你有所开导。 01 概述 本日...

Axure教程:全局变量的应用——空页面的新增数据校验

Axure教程:全局变量的应用——空页面的新增数据校验

在实际应用中,全局变量起到了信息通报浸染和符号浸染,可以在多个页面间通报信息,可能作为非凡场景的判定依据。本文作者先容了如何用Axure实现全局变量中空页面的新增数据校验成果的操纵步调,以及实现进程中...

Axure教程:一个通用的app注册/登录页

Axure教程:一个通用的app注册/登录页

今天给大家分享一套APP注册/登录界面模板,其中包括本机登录页面,短信验证登录页面,密码登录页面,人脸登录页面,微博、微信、QQ、支付宝登录页面,注册页面,用户协议和隐私条款。该原型使用简单,交互完善...

Axure入门案例系列:简单音频播放动效

Axure入门案例系列:简单音频播放动效

编辑导读:音频播放特效各人都应该见过,本文作者操作Axure动态面板成果对音频播放动效举办了一个简朴的原型设计,并对进程中碰着的一些问题举办了简朴的梳理,与各人分享。 局部动态的展示可以或许的快速的...