今天給大家?guī)淼慕坛虄?nèi)容是，怎樣用兩個原件去實現(xiàn)“驗證碼倒計時”的設(shè)計，一起來看看~

先來看一下效果圖：

接下來正式開始教學(xué)：

實現(xiàn)這一效果我們只運(yùn)用到了兩個原件（沒錯，就是兩個?。鞍粹o”和“動態(tài)面板”，以及設(shè)置一個全局變量。

準(zhǔn)備工作

第一步，我們先從元件庫中拖動一個“按鈕”到頁面中，然后雙擊這個元件，輸入文字“獲取驗證碼”。

第二步，點擊該按鈕，設(shè)置顯示倒計時按鈕的樣式（因為驗證碼倒計時效果按鈕會有一個樣式的變化，所以我們要重新設(shè)置一個倒計時過程中的樣式）。

這里我們采用“禁用”這一狀態(tài)下的樣式作為倒計時的樣式，有的小可愛們可能會問，“設(shè)置選中行不行？”，答案是no！至于為什么要用“禁用”，到后面你就知道了！

第二步，從元件庫中拖動一個“動態(tài)面板”到頁面中，然后……然后就沒了喲，驚不驚喜？（這里的動態(tài)面板只是作為一個觸發(fā)器，并不需要添加內(nèi)容）。

第三步，設(shè)置一個全局變量，用來實現(xiàn)倒計時的數(shù)字變化。點擊頭部菜單欄的“項目（P）”，選擇“全局變量（V）”，點擊“添加”，更改變量名稱為“timer”。

設(shè)置動作

下面就到了關(guān)鍵的步驟，設(shè)置交互動作：

第一步，設(shè)置按鈕的交互動作，單擊“獲取驗證碼”按鈕，點擊右側(cè)的“New Interaction”按鈕，然后如圖添加事件

第二步，設(shè)置動態(tài)面板的交互動作

（1）單擊“動態(tài)面板”，點擊右側(cè)的“New Interaction”按鈕。

（2）選擇交互動作中的“狀態(tài)改變時”，此時不要進(jìn)一步選擇事件，而是點擊頁面空白處。

（3）點擊“添加用例”按鈕，添加用例，添加邏輯條件。

（4）按圖添加該用例下事件

（5）再次點擊“添加用例”按鈕，添加用例，添加相反條件（這里直接點擊確定就可以，Axure會自動生成相反邏輯）。

（6）按圖添加該用例下事件

最后一步，設(shè)置完動態(tài)面板的動作之后，雙擊動態(tài)面板，選擇“State1”，點擊“復(fù)制”，復(fù)制一個一樣的state。（此處的目的是為了實現(xiàn)觸發(fā)器的作用）

做到這里，我們的交互效果就已經(jīng)完成了，相信大家對于前面為什么用“禁用”的問題也有了答案了吧（因為按鈕需要切換狀態(tài)，設(shè)置“啟用/禁用”）。

成果展示

接下來就可以點擊預(yù)覽，打開瀏覽器查看我們的“成果”啦！

本文由 @早安中國 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議