注冊模塊是每個產(chǎn)品必不可少的一部分，也是大部分產(chǎn)品經(jīng)理著手設(shè)計一個產(chǎn)品時遇到的基礎(chǔ)部分，在這里通過這個教程分享如何使用Axure中的動態(tài)面板實現(xiàn)獲取驗證碼倒計時功能。
在開始前我們需要把梳理下思路，簡單的把任務(wù)流程理出來，幫助我們理解制作過程中的原理。
先來看看效果：
下圖中左邊為使用倒計時功能時的任務(wù)流程，右邊為流程對應(yīng)的四大部分，每部分有具體的小步驟，接下來會根據(jù)每個小步驟進(jìn)行具體的描述。
1
從元件庫中拖入一個主要按鈕放入畫布空白處，命名為“獲取按鈕”（可以隨意命名）
然后再拖入一個動態(tài)面板放入畫布中，命名為“循環(huán)面板”，并且雙擊該動態(tài)面板，添加一個狀態(tài)2“State2”，這里就可以看成‘初始’和‘結(jié)束’的“容器”。
接下來創(chuàng)建一個全局變量對該“容器”進(jìn)行記錄。
為“獲取按鈕”這個元件添加一個交互樣式，該按鈕「禁用」時，填充顏色為灰色。
2
為“獲取按鈕”元件添加用例，當(dāng)「鼠標(biāo)單擊時」，設(shè)置動作為「設(shè)置面板狀態(tài)」在動態(tài)面板“循環(huán)面板”上，選擇狀態(tài)「Next」，勾選「向后循環(huán)」，「循環(huán)間隔」為‘1000’毫秒，取消勾選「首個狀態(tài)延時延時1000毫秒切換」。
添加第二個動作「禁用」，選擇“當(dāng)前元件”。
3
為動態(tài)面板“循環(huán)面板”的「狀態(tài)改變時」添加第一個用例，并給該用例添加條件，條件設(shè)置為「變量值」，「TimeValue」“>”「1」。
繼續(xù)添加全局變量中的「設(shè)置變量值」，勾選「TimeValue」，更改值為[[TimeValue-1]]。
添加第三個動作「設(shè)置文本」，勾選“獲取按鈕”，更改值為[[TimeValue]]秒后可重新獲取。
4
為「改變狀態(tài)時」添加第二個用例，設(shè)置當(dāng)不滿足第一個用例所設(shè)定條件時執(zhí)行的動作。此處有4個動作，分別是：
第1個動作是「設(shè)置文本」為“獲取按鈕”的文字值是“重新發(fā)送驗證碼”。
第2個動作是設(shè)置全局變量中的「設(shè)置變量值」，勾選「TimeValue」，更改值為“60”。
第3個動作「啟用」，勾選“獲取按鈕”。
第4個動作為「設(shè)置面板狀態(tài)」與動態(tài)面板，勾選“循環(huán)面板”，選擇「停止循環(huán)」。
以上就是所有的制作步驟，最終的效果就像文章開頭中所示的樣子，在這個過程中，我們其實已掌握了兩個重要的知識點：一個是動態(tài)面板的循環(huán)實現(xiàn)方式，第二個是通過全局變量來設(shè)定時間值。
這兩個點在其它地方也會經(jīng)常用到，掌握后能夠更加靈活運用在其它地方。
希望大家能夠嘗試多練習(xí)幾次，幾次嘗試后就會理解其中的關(guān)鍵點，也希望大家能夠養(yǎng)成一種習(xí)慣，在進(jìn)行練習(xí)前對任務(wù)流程進(jìn)行梳理，這樣對理解邏輯更有幫助。
本文由 @ 杰森 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載