Axure原型设计:获取验证码倒计时效果的实现

简介: 本文介绍了使用Axure 9.0在Windows或Mac电脑上设计手机号登录页面的步骤,包括前期准备和详细教程。前期准备涉及软件、硬件及逻辑梳理。教程涵盖绘制登录页面、创建动态面板实现倒计时效果,以及设置按钮交互。通过这些步骤,实现输入手机号后点击获取验证码的禁用状态与倒计时显示功能。鼓励读者思考其他实现方法,提升Axure使用技巧。

前期准备

  • 软件:Axure 9.0
  • 硬件:Windows/Mac电脑
  • 逻辑梳理

教程

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

  • 找一个手机壳的元件库,或用矩形设置成标准手机尺寸。
  • 制作内容页面,如左侧图所示。
  • 在手机号输入框中设置提示文字“请输入手机号”。
  • 在验证码输入框中设置提示文字“请输入验证码”。

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

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

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

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

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

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

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

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

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

验证效果

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

结语

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

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

相关文章
|
10月前
验证码倒计时的注册页面
验证码倒计时的注册页面
39 0
layui框架实战案例(10):短信验证码60秒倒计时
layui框架实战案例(10):短信验证码60秒倒计时
294 0
|
5天前
Axure原型设计:制作验证码倒计时,并重新获取交互效果
本文详细介绍了在Axure中实现验证码倒计时交互效果的步骤,包括元件准备、布局美化、全局变量设置及交互效果配置。通过分解交互流程,利用全局变量控制倒计时逻辑,最终实现按钮从“获取验证码”到倒计时状态的自动切换,并可重复使用。
|
1月前
|
NoSQL Java Redis
认证服务---整合短信验证码,验证码倒计时,验证码防刷校验 【一】
这篇文章介绍了如何在分布式微服务项目中整合短信验证码服务,包括使用阿里云短信验证接口、将短信验证功能集成到第三方服务中、其他服务的远程调用,以及通过Redis实现验证码防刷机制的代码实现和遇到的问题解决方案。
|
1月前
|
测试技术
Axure 获取验证码
Axure 获取验证码
29 0
|
2月前
发送短信验证码,60秒倒计时重发
发送短信验证码,60秒倒计时重发
35 0
发送短信验证码,60秒倒计时重发
|
4月前
|
NoSQL 安全 前端开发
验证码倒计时:用户界面的小细节,大智慧
本文深入探讨了验证码倒计时的设计和实现,一项看似简单但对用户体验影响深远的功能。我们将讨论为什么需要倒计时,如何在不同平台(如Web和移动应用)上实现它,以及如何确保它既用户友好又安全。无论你是前端新手还是资深开发者,理解验证码倒计时的原理和最佳实践都将有助于你创建更流畅、更安全的用户界面。
171 3
|
JavaScript API 容器
手机短信验证码登录功能的开发实录(机器识别码、短信限流、错误提示、发送验证码倒计时60秒)
手机短信验证码登录功能的开发实录(机器识别码、短信限流、错误提示、发送验证码倒计时60秒)
270 1
|
Android开发
Android 短信验证码倒计时60s实现步骤
Android 短信验证码倒计时60s实现步骤
205 0
|
小程序 JavaScript
微信小程序登录与注册验证码倒计时的效果实现
微信小程序登录与注册验证码倒计时的效果实现
285 0