许多应用程序或网站支持手机号码登录。手机号码的登录肯定会涉及到短信认证的获取。采集过程具有时间有效性,一般默认值为60秒。如果用户在时限内没有收到验证码,他可以再次点击“获取验证码”获取验证码。今天,让我们学习如何使用Axure实现这一效果。
预备
软件:Axure 9.0硬件:视窗/电脑逻辑组合教程
1。绘制电话号码账户登录页面,如下图256所示+查找一个手机外壳组件库,或者用一个矩形将其设置为标准手机尺寸。创建一个内容页面,如左图所示在手机号码输入框中设置提示文字“请输入手机号码”。在验证码输入框中,设置提示文本“请输入验证码”
2。创建动态面板和设置至少2个状态
动态面板主要用于状态切换时的倒计时效果。简单地说,点击采集后60秒到0秒的文件显示是通过动态面板实现的。让我们在这里留下一点想法。为什么我们要建立至少两个州?
3。添加获取验证码按钮
的交互效果,为获取验证码按钮命名,并在禁用时设置样式。
设置点击互动首先,设置之前建立的动态面板状态,下一个处于切换状态的项目可以每隔一段时间向后循环。确保获得验证后等待时间发生变化(动态面板的名称以前被命名为“开关状态”。)
在单击并设置全局变量X时向交互效果添加一个动作并将x的值设置为60
4。当动态面板状态改变时设置交互动作
情况1:当全局变量X的值不等于0时,即当它大于0时,设置X的值一次减一点击后,倒计时60秒,在达到0之前,禁止重复点击以获得验证效果。
情况2:当全局变量x的值等于0时,可以通过再次单击获得验证码。
验证效果
OK最终达到预期效果。当我们输入手机号码并点击获取验证码时,该按钮将被禁用,副本将在倒计时中显示。当倒计时为0时,按钮变为启用状态
结论
是同一个句子,我希望你能考虑一下为了完成倒计时效果,除了我向你解释的方法,还有其他方法吗?
Axure作为产品经理的必备工具,不仅帮助我们实现互动效果,还需要学习如何实现效果。我希望每个人都能在我的文章中找到自己的进步。感谢收看由@ Blue Tide发布的《
》。每个人都是产品经理。未经许可,根据CC0协议
, Unsplash禁止重印张图片