养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

如何利用Axure RP 8软件设计验证码倒计时效果

时间:2024-09-20 22:51:21

AxureRP8设计软件设计一个剑钕饿粪场景下的页面,场景:输入手机号码,点击“获取”按钮,“获取”变为倒计时,将验证码发逭瑗亍作送到手机号;用户可以将手机上验证码输入到验证码框。这个过程就是用户手机验证,可以提高登录系统的安全性。下面就是这个实现过程,操作如下:

如何利用Axure RP 8软件设计验证码倒计时效果

工具/原料

AxureRP8

截图工具

图片工具

浏览器

方法/步骤

1、第一步,打开AxureRP8软件,在元件库中找到“矩形3”元件,拖一个到画布中,将其拖咦筋庑檗到中心位置,调整高度和宽度,如下图所示:

如何利用Axure RP 8软件设计验证码倒计时效果

如何利用Axure RP 8软件设计验证码倒计时效果

2、第二步,在元件库找到“label”元件,拖两个“label”元件和两个输入框、一个按钮到画霎霈喊纪布中,手机号和验证码左对齐,如下图所示:

如何利用Axure RP 8软件设计验证码倒计时效果

3、第三步,选中“获取”按钮,添加鼠标单击时用例,设置点击按钮时的效果,如下图所示:

如何利用Axure RP 8软件设计验证码倒计时效果

4、第四步,添加“设置变量值”,添加变量“data”,默认值为“60s”,如下图所示:

如何利用Axure RP 8软件设计验证码倒计时效果

5、第五步,再次添加动作“设置文本”,设置按钮的文本为变量[[data-1]],如下图所示:

如何利用Axure RP 8软件设计验证码倒计时效果

6、第六步,预览该原型界面,点击“获取”按钮,这时“获取”文字变为时间倒计时,如下图所示:

如何利用Axure RP 8软件设计验证码倒计时效果

© 一点知识