Axure产品原型设计—短信验证码

版本:Axure RP 9

功能描述:点击 “发送验证码按钮”,显示”5s后重新发送”,当减到0s时,显示重新获取按钮

一、效果演示图

Axure产品原型设计—短信验证码

二、具体步骤

1. 画验证码输入框

Axure产品原型设计—短信验证码

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

Axure产品原型设计—短信验证码

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

Axure产品原型设计—短信验证码

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

Axure产品原型设计—短信验证码

4. 设置交互

4.1 增加”验证码动态面板”

Axure产品原型设计—短信验证码

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

Axure产品原型设计—短信验证码

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

Axure产品原型设计—短信验证码

Axure产品原型设计—短信验证码

最终效果图:

Axure产品原型设计—短信验证码

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

Axure产品原型设计—短信验证码

5. 测试

Axure产品原型设计—短信验证码

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

Axure产品原型设计—短信验证码

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

Axure产品原型设计—短信验证码

Axure产品原型设计—短信验证码

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

Axure产品原型设计—短信验证码

隐藏重新获取按钮

Axure产品原型设计—短信验证码

最终效果如下图

Axure产品原型设计—短信验证码

7. 最终测试

Axure产品原型设计—短信验证码

8. 调整秒数

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

主要调整位置

Axure产品原型设计—短信验证码

Axure产品原型设计—短信验证码

作者:Luna

版权声明

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

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部