5分钟玩转Axure之倒计时相关设计

倒计时的应用

我们常见的软件设计中使用倒计时的地方主要有:获取验证码时、阅读某个页面完成任务时和常见的考试问答类等等方向。由此我们可见倒计时主要是有规避了在短时间内的不正常访问和满足系统期望对用户的页面停留时间做限制。

怎样使用Axure制作倒计时

我们主要介绍点某个按钮倒计时和进入页面倒计时两种类型的制作,因为其他类型基本就是对这两种基础类型做变形或结合。

验证码的倒计时

老规矩先上效果图:
在这里插入图片描述
由于方便演示,我们就讲此次的倒计时设置为5秒,点击按钮获取验证码。

  1. 先拖入两个input输入框和一个按钮

  2. 设置好输入框的提升文本在这里插入图片描述
    在这里插入图片描述

  3. 设置好一个变量ITime用来控制我们的倒计时总数
    在这里插入图片描述

  4. 设置按钮的单击时的操作在这里插入图片描述

思路:(1)禁用该按钮且时间变量值每次减少1,等待1秒后重新出发该点击事件;只在ITime大于1的情况下成立。(2)当时间变量值ITime减少到1时,我们可以启用当前按钮且重新设置文本即可。

  1. 设置禁用按钮的样式
进入页面倒计时

效果图:在这里插入图片描述
进入某个页面后开始倒计时,时间结束则自动提交。

  1. 同理先布局好页面,并给予倒计时一个点击事件:在这里插入图片描述

  2. 主要是我们需要给当前页面一个载入事件让系统自动去触发其它事件,这是关键:在这里插入图片描述
    这是我们整个页面自动启动事件的关键入口

总结

倒计时的设置其实在做设计时会常常使用到,我们只要熟练的学会某一种就可以去举一反三地设置不同的种类和模型。只要我们去创造、去发现才能体会到不同的设置会带来什么样的效果解决什么样的问题。这才是最重要的!
此次演示的资源设计,有兴趣的同学可以下载学习

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值