起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure教程：獲取驗證碼倒計時效果的實現
很多APP或者網站都支持手機號登錄，手機號登錄一定會涉及短信驗證的獲取。獲取的過程有時間有效性，一般默認為60s，如果用戶在時效內未接收到驗證碼，可再次點擊“獲取驗證碼”來獲取。今天，我們就來學習用Axure實現這種效果。
?前期準備
- 軟件：Axure 9.0
- 硬件：Windows/Mac電腦
- 邏輯梳理
教程
1. 繪制手機號賬戶登錄頁面，如下圖
- 找一個手機殼的元件庫，或用矩形設置成標準手機尺寸。
- 制作內容頁面，如左側圖所示。
- 在手機號輸入框中設置提示文字“請輸入手機號”。
- 在驗證碼輸入框中設置提示文字“請輸入驗證碼”。
2. 創建動態面板，建立至少2個以上的狀態
動態面板的作用主要用于切換狀態時的倒計時效果，簡單的說，點擊獲取后60秒到0秒的文案展示都是靠動態面板實現的。這里留一個小思考，為什么要建立至少2個狀態呢？
3. 添加獲取驗證碼按鈕交互效果
給獲取驗證碼按鈕起一個名字，并設置禁用時樣式。
設置單擊時交互。首先，設置之前建好的動態面板狀態，設置切換狀態下一項時能夠間隔向后循環。保證獲取驗證后的等待時間變化。（動態面板之前已起好名字為“切換狀態”）
在單擊時交互效果中添加動作，設置一個全局變量x。并設置x的值為60。
4. 設置動態面板狀態改變時交互動作
情形1 ：全局變量x的值不等于0時，即大于0時設置讓x的值每次減一。實現點擊后變為60秒倒計時，變為0之前禁止重復點擊獲取驗證的效果。
情形2：全局變量x的值等于0時，實現可重新點擊獲取驗證碼效果。
驗證效果
OK，最終達到我們想要的效果，當我們輸入手機號以后點擊獲取驗證碼后，按鈕變為禁用狀態，同時文案進行倒計時展示，當倒計時為0時，按鈕變為啟用狀態。
結語
還是那句話，希望大家想一下。想要完成倒計時效果，除了我為大家講解的這種，是否還有其他方法可以實現呢？
Axure作為產品經理的必備工具，不光是幫我們實現了交互效果，更多的是要學會它實現效果的思路，我希望大家能在我的文章中找到自己的進步。感謝大家觀看～
本文由 @藍汐 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
評論
- 目前還沒評論，等你發揮！
