5分钟玩转Axure之倒计时相关设计
倒计时的应用
倒计时的应用
我们常见的软件设计中使用倒计时的地方主要有:获取验证码时、阅读某个页面完成任务时和常见的考试问答类等等方向。由此我们可见倒计时主要是有规避了在短时间内的不正常访问和满足系统期望对用户的页面停留时间做限制。
怎样使用Axure制作倒计时
我们主要介绍点某个按钮倒计时和进入页面倒计时两种类型的制作,因为其他类型基本就是对这两种基础类型做变形或结合。
验证码的倒计时
老规矩先上效果图:
由于方便演示,我们就讲此次的倒计时设置为5秒,点击按钮获取验证码。
-
先拖入两个input输入框和一个按钮
-
设置好输入框的提升文本
-
设置好一个变量ITime用来控制我们的倒计时总数
-
设置按钮的单击时的操作
思路:(1)禁用该按钮且时间变量值每次减少1,等待1秒后重新出发该点击事件;只在ITime大于1的情况下成立。(2)当时间变量值ITime减少到1时,我们可以启用当前按钮且重新设置文本即可。
- 设置禁用按钮的样式
进入页面倒计时
效果图:
进入某个页面后开始倒计时,时间结束则自动提交。
-
同理先布局好页面,并给予倒计时一个点击事件:
-
主要是我们需要给当前页面一个载入事件让系统自动去触发其它事件,这是关键:
这是我们整个页面自动启动事件的关键入口
总结
倒计时的设置其实在做设计时会常常使用到,我们只要熟练的学会某一种就可以去举一反三地设置不同的种类和模型。只要我们去创造、去发现才能体会到不同的设置会带来什么样的效果解决什么样的问题。这才是最重要的!
此次演示的资源设计,有兴趣的同学可以下载学习