很多APP或者网站都支持手机号登录,手机号登录一定会涉及短信验证的获取。获取的过程有时间有效性,一般默认为60s,如果用户在时效内未接收到验证码,可再次点击“获取验证码”来获取。今天,我们就来学习用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作为产品经理的必备工具,不光是帮我们实现了交互效果,更多的是要学会它实现效果的思路,我希望大家能在我的文章中找到自己的进步。感谢大家观看~
数据埋点,对于产品迭代而言,有很重要的指向意义。本文从常规埋点属性和常规埋点流程两个方面带我们认识了数据埋点。 数据埋点属于数据采集的阶段,是互联网分析业务闭环中的起点,为之后的许多日常及专题的分析...
对于做数据的同学来说,如何搭建出有效的数据监控体系呢?如何找准监控关键,明确我们要控制谁、什么时候控制、控制力度以及控制效果呢?面对这一系列的问题,笔者将一一作出解答。 做数据的同学们都经常听到一句...
B站为什么能够出圈,它做对了哪些事情、搭上了哪趟列车呢?本文从弹幕文化、社区文化、推荐机制和发展潮流等角度解析B站,思考B站的出圈过程。 提起B站,你会想起什么? 鬼畜社区?二次元社区?新年晚会?哔...
直播带货,没那么简单。如果你也想成为其中一员,在这之前,你可能需要先知道这4个秘诀。 “直播带货”是2019年到2020年最火的营销概念之一,最近罗永浩宣布进军直播界,让直播这个营销方式更成了当红炸...
“设计一件东西时,应当把它放在下一个更大的背景中考虑⸺房间里的椅子,房子里 的房间,环境里的房子,城市规划里的环境。” ——埃利尔·沙里宁 B端产品的客户对象是企业用户。B端产品要符合商业组织战略...
近段时间由于疫情影响,各行各业都受到了不同程度的冲击,那么作为产品人应该如何理解疫情带来的影响呢?产品人又该如何应对呢? 我问一个朋友:“ 你觉得疫情对我们带来的影响是什么?” 他回答:“ 大家生活...