短信验证是产品设计中最常用的功能之一。拿在原型设计上，都需要注意哪些问题呢？这篇文章，作者手把手教我们如何做好短信验证的设计，希望能帮到大家。

版本：Axure RP 9

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

一、效果演示图

二、具体步骤

1. 画验证码输入框

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

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

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

B 端产品经理如何快速成长？

产品与业务架构主要是将整个业务工作流进行分层，梳理，然后抽象出一个个需求，将业务需求与产品合情合理的映射起来，最终使业务数据在产品中流动，执行，记录，使用。

查看详情 >

4. 设置交互

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

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

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

最终效果图：

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

5. 测试

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

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

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

隐藏重新获取按钮

最终效果如下图

7. 最终测试

8. 调整秒数

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

主要调整位置