Axure原型设计:制作验证码倒计时,并重新获取交互效果

简介: 本文详细介绍了在Axure中实现验证码倒计时交互效果的步骤,包括元件准备、布局美化、全局变量设置及交互效果配置。通过分解交互流程,利用全局变量控制倒计时逻辑,最终实现按钮从“获取验证码”到倒计时状态的自动切换,并可重复使用。

首先,我们还是要明确一个思路,当我们在制作任何一个交互效果时,都需要对这个交互的步骤进行拆分,然后分别把对应步骤代入到Axure的交互设置中,是否可以用某些动作进行一一实现。

我们仔细思考一下获取验证码到重新获取的流程:

一、元件准备

根据这个流程,我们可以很清楚地知道,我们需要的元件有文本输入框、按钮以及全局变量的设置(一般涉及到数据动态变化的设计效果,我们都可以考虑是否需要全局变量)。

二、元件布局与美化

准备好元件之后,我们接下来将元件进行布局以及细节的美化。

文本框:进行输入内容提示(手机号、验证码)、位数限制(11位、6位)、边框美化。

按钮:说明按钮功能、按钮颜色与大小、圆角大小。

最终布局效果:

三、全局变量设置

我们在Axure9的最上面找到「项目」-「全局变量设置」,并点击添加新的变量captcha(命名随意),默认值设置为60。

四、交互效果设置

在设置交互效果之前,我们再进一步思考一下,点击获取验证码这个动作之后,元件有哪些变化。我们可以了解到,点击之后,获取验证码的按钮文案变为了倒计时+后重新获取,计时结束后文案变为重新获取且可以再次点击获取。

这一过程我们可以对应拆分到交互设置上。

第一阶段:点击进入倒计时

文案变化为倒计时文案:点击后对按钮进行「设置文本」。

倒计时:设置等待时间为1000ms,且设置变量值captcha-1,之后对于这个动作进行循环触发。

在我们思考第二阶段如何去做时,我们需要了解到,captcha值最终会变为0,当为0时继续触发执行变量值-1时,会变为负值,这时恰好是变为重新获取的时机,即为进入第二阶段,故我们在第一阶段和第二阶段应该分别假如情形进行判断,则第一阶段完整的交互设置如下:

第二阶段:重新获取并可再次点击倒计时

文案再变化为重新获取:点击后对按钮进行「设置文本」。

再次点击可倒计时,重置倒计时:设置变量值captcha为60。

五、最终效果

设置完所有交互效果之后,我们可以在每个元件上添加说明,方便与开发人员进行沟通。

最终效果:

谢谢大家阅读,我是把产品当做刻章去打磨的伪文青,欢迎指正和订阅!

相关文章
验证码倒计时的注册页面
验证码倒计时的注册页面
56 0
layui框架实战案例(10):短信验证码60秒倒计时
layui框架实战案例(10):短信验证码60秒倒计时
333 0
|
4月前
|
Windows
Axure原型设计:获取验证码倒计时效果的实现
本文介绍了使用Axure 9.0在Windows或Mac电脑上设计手机号登录页面的步骤,包括前期准备和详细教程。前期准备涉及软件、硬件及逻辑梳理。教程涵盖绘制登录页面、创建动态面板实现倒计时效果,以及设置按钮交互。通过这些步骤,实现输入手机号后点击获取验证码的禁用状态与倒计时显示功能。鼓励读者思考其他实现方法,提升Axure使用技巧。
|
5月前
|
NoSQL Java Redis
认证服务---整合短信验证码,验证码倒计时,验证码防刷校验 【一】
这篇文章介绍了如何在分布式微服务项目中整合短信验证码服务,包括使用阿里云短信验证接口、将短信验证功能集成到第三方服务中、其他服务的远程调用,以及通过Redis实现验证码防刷机制的代码实现和遇到的问题解决方案。
|
5月前
|
测试技术
Axure 获取验证码
Axure 获取验证码
68 0
|
6月前
发送短信验证码,60秒倒计时重发
发送短信验证码,60秒倒计时重发
62 0
发送短信验证码,60秒倒计时重发
|
8月前
|
NoSQL 安全 前端开发
验证码倒计时:用户界面的小细节,大智慧
本文深入探讨了验证码倒计时的设计和实现,一项看似简单但对用户体验影响深远的功能。我们将讨论为什么需要倒计时,如何在不同平台(如Web和移动应用)上实现它,以及如何确保它既用户友好又安全。无论你是前端新手还是资深开发者,理解验证码倒计时的原理和最佳实践都将有助于你创建更流畅、更安全的用户界面。
261 3
|
JavaScript API 容器
手机短信验证码登录功能的开发实录(机器识别码、短信限流、错误提示、发送验证码倒计时60秒)
手机短信验证码登录功能的开发实录(机器识别码、短信限流、错误提示、发送验证码倒计时60秒)
315 1
|
Android开发
Android 短信验证码倒计时60s实现步骤
Android 短信验证码倒计时60s实现步骤
230 0
|
小程序 JavaScript
微信小程序登录与注册验证码倒计时的效果实现
微信小程序登录与注册验证码倒计时的效果实现
307 0