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

Axure产品原型设计—短信验证码
版本:AxureRP9功能描述:点击“发送验证码按钮”,显示”5s后重新发送”,当减到0s时,显示重新获取按钮一、效果演示图二、具体步骤1.画验证码输入框2.画

版本: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