今天給大家帶來的教程內容是，怎樣用兩個原件去實現“驗證碼倒計時”的設計，一起來看看~
先來看一下效果圖：
接下來正式開始教學：
實現這一效果我們只運用到了兩個原件（沒錯，就是兩個！），“按鈕”和“動態面板”，以及設置一個全局變量。
準備工作
第一步，我們先從元件庫中拖動一個“按鈕”到頁面中，然後雙擊這個元件，輸入文字“獲取驗證碼”。
第二步，點擊該按鈕，設置顯示倒計時按鈕的樣式（因為驗證碼倒計時效果按鈕會有一個樣式的變化，所以我們要重新設置一個倒計時過程中的樣式）。
這裡我們採用“禁用”這一狀態下的樣式作為倒計時的樣式，有的小可愛們可能會問，“設置選中行不行？”，答案是no！至於為什麼要用“禁用”，到後面你就知道了！
第二步，從元件庫中拖動一個“動態面板”到頁面中，然後……然後就沒了喲，驚不驚喜？（這裡的動態面板只是作為一個觸發器，並不需要添加內容）。
第三步，設置一個全局變量，用來實現倒計時的數字變化。點擊頭部菜單欄的“項目（P）”，選擇“全局變量（V）”，點擊“添加”，更改變量名稱為“timer”。
設置動作
下面就到了關鍵的步驟，設置交互動作：
第一步，設置按鈕的交互動作，單擊“獲取驗證碼”按鈕，點擊右側的“New Interaction”按鈕，然後如圖添加事件
第二步，設置動態面板的交互動作
（1）單擊“動態面板”，點擊右側的“New Interaction”按鈕。
（2）選擇交互動作中的“狀態改變時”，此時不要進一步選擇事件，而是點擊頁面空白處。
（3）點擊“添加用例”按鈕，添加用例，添加邏輯條件。
（4）按圖添加該用例下事件
（5）再次點擊“添加用例”按鈕，添加用例，添加相反條件（這裡直接點擊確定就可以，Axure會自動生成相反邏輯）。
（6）按圖添加該用例下事件
最後一步，設置完動態面板的動作之後，雙擊動態面板，選擇“State1”，點擊“複製”，複製一個一樣的state。（此處的目的是為了實現觸發器的作用）
做到這裡，我們的交互效果就已經完成了，相信大家對於前面為什麼用“禁用”的問題也有了答案了吧（因為按鈕需要切換狀態，設置“啟用/禁用”）。
成果展示
接下來就可以點擊預覽，打開瀏覽器查看我們的“成果”啦！
題圖來自Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
