Axure产品原型设计—短信验证码
版本:Axure RP 9
功能描述:点击 “发送验证码按钮”,显示”5s后重新发送”,当减到0s时,显示重新获取按钮
一、效果演示图

二、具体步骤
1. 画验证码输入框

2. 画”发送验证码”按钮

3. 画 “某s后重新发送”

设置隐藏后,将”5s后重新发送”与”发送验证码按钮”重叠

4. 设置交互
4.1 增加”验证码动态面板”

4.2 添加”发送验证码按钮”交互动作

4.3 添加”验证码动态面板”交互动作


最终效果图:

4.4 隐藏”验证码动态面板”

5. 测试

6. 增加”重新获取按钮”

6.1 设置”验证码动态面板”交互样式


6.2 设置”重新获取按钮”交互样式

隐藏重新获取按钮

最终效果如下图

7. 最终测试

8. 调整秒数
为了测试方变,我将秒数设置为5s,大家可根据需要调整
主要调整位置


作者:Luna
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!
