短信驗證是產(chǎn)品設(shè)計中最常用的功能之一。拿在原型設(shè)計上，都需要注意哪些問題呢？這篇文章，作者手把手教我們?nèi)绾巫龊枚绦膨炞C的設(shè)計，希望能幫到大家。

版本：Axure RP 9

功能描述：點擊 “發(fā)送驗證碼按鈕”，顯示”5s后重新發(fā)送”，當(dāng)減到0s時，顯示重新獲取按鈕

一、效果演示圖

二、具體步驟

1. 畫驗證碼輸入框

2. 畫”發(fā)送驗證碼”按鈕

3. 畫 “某s后重新發(fā)送”

設(shè)置隱藏后，將”5s后重新發(fā)送”與”發(fā)送驗證碼按鈕”重疊

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

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

查看详情 >

4. 設(shè)置交互

4.1 增加”驗證碼動態(tài)面板”

4.2 添加”發(fā)送驗證碼按鈕”交互動作

4.3 添加”驗證碼動態(tài)面板”交互動作

最終效果圖：

4.4 隱藏”驗證碼動態(tài)面板”

5. 測試

6. 增加”重新獲取按鈕”

6.1 設(shè)置”驗證碼動態(tài)面板”交互樣式

6.2 設(shè)置”重新獲取按鈕”交互樣式

隱藏重新獲取按鈕

最終效果如下圖

7. 最終測試

8. 調(diào)整秒數(shù)

為了測試方變，我將秒數(shù)設(shè)置為5s，大家可根據(jù)需要調(diào)整

主要調(diào)整位置