注冊(cè)模塊是每個(gè)產(chǎn)品必不可少的一部分，也是大部分產(chǎn)品經(jīng)理著手設(shè)計(jì)一個(gè)產(chǎn)品時(shí)遇到的基礎(chǔ)部分纤控，在這里通過(guò)這個(gè)教程分享如何使用Axure中的動(dòng)態(tài)面板實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)功能畜隶。
在開(kāi)始前我們需要把梳理下思路蒋譬，簡(jiǎn)單的把任務(wù)流程理出來(lái)，幫助我們理解制作過(guò)程中的原理揍诽。
先來(lái)看看效果
下圖中左邊為使用倒計(jì)時(shí)功能時(shí)的任務(wù)流程诀蓉，右邊為流程對(duì)應(yīng)的四大部分，每部分有具體的小步驟寝姿，接下來(lái)會(huì)根據(jù)每個(gè)小步驟進(jìn)行具體的描述交排。
1
從元件庫(kù)中拖入一個(gè)主要按鈕放入畫(huà)布空白處，命名為“獲取按鈕”（可以隨意命名）
然后再拖入一個(gè)動(dòng)態(tài)面板放入畫(huà)布中饵筑，命名為“循環(huán)面板”埃篓，并且雙擊該動(dòng)態(tài)面板，添加一個(gè)狀態(tài)2“State2”根资，這里就可以看成‘初始’和‘結(jié)束’的“容器”架专。
接下來(lái)創(chuàng)建一個(gè)全局變量對(duì)該“容器”進(jìn)行記錄。
為“獲取按鈕”這個(gè)元件添加一個(gè)交互樣式玄帕，該按鈕「禁用」時(shí)部脚，填充顏色為灰色
2
為“獲取按鈕”元件添加用例，當(dāng)「鼠標(biāo)單擊時(shí)」裤纹，設(shè)置動(dòng)作為「設(shè)置面板狀態(tài)」在動(dòng)態(tài)面板“循環(huán)面板”上委刘，選擇狀態(tài)「Next」丧没，勾選「向后循環(huán)」，「循環(huán)間隔」為‘1000’毫秒锡移，取消勾選「首個(gè)狀態(tài)延時(shí)延時(shí)1000毫秒切換」
添加第二個(gè)動(dòng)作「禁用」呕童，選擇“當(dāng)前元件”
3
為動(dòng)態(tài)面板“循環(huán)面板”的「狀態(tài)改變時(shí)」添加第一個(gè)用例，并給該用例添加條件淆珊，條件設(shè)置為「變量值」夺饲，「TimeValue」“>”「1」
繼續(xù)添加全局變量中的「設(shè)置變量值」，勾選「TimeValue」施符，更改值為[[TimeValue-1]]
添加第三個(gè)動(dòng)作「設(shè)置文本」往声，勾選“獲取按鈕”，更改值為[[TimeValue]]秒后可重新獲取
4
為「改變狀態(tài)時(shí)」添加第二個(gè)用例戳吝，設(shè)置當(dāng)不滿足第一個(gè)用例所設(shè)定條件時(shí)執(zhí)行的動(dòng)作浩销。此處有4個(gè)動(dòng)作，分別是：
第1個(gè)動(dòng)作是「設(shè)置文本」為“獲取按鈕”的文字值是“重新發(fā)送驗(yàn)證碼”
第2個(gè)動(dòng)作是設(shè)置全局變量中的「設(shè)置變量值」骨坑，勾選「TimeValue」撼嗓，更改值為“60”。
第3個(gè)動(dòng)作「啟用」欢唾，勾選“獲取按鈕”。
第4個(gè)動(dòng)作為「設(shè)置面板狀態(tài)」與動(dòng)態(tài)面板粉捻，勾選“循環(huán)面板”礁遣，選擇「停止循環(huán)」。
以上就是所有的制作步驟肩刃，最終的效果就像文章開(kāi)頭中所示的樣子祟霍，在這個(gè)過(guò)程中，我們其實(shí)已掌握了兩個(gè)重要的知識(shí)點(diǎn)盈包，一個(gè)是動(dòng)態(tài)面板的循環(huán)實(shí)現(xiàn)方式沸呐，第二個(gè)是通過(guò)全局變量來(lái)設(shè)定時(shí)間值。這兩個(gè)點(diǎn)在其它地方也會(huì)經(jīng)常用到呢燥，掌握后能夠更加靈活運(yùn)用在其它地方崭添。
希望大家能夠嘗試多練習(xí)幾次，幾次嘗試后就會(huì)理解其中的關(guān)鍵點(diǎn)叛氨，也希望大家能夠養(yǎng)成一種習(xí)慣呼渣，在進(jìn)行練習(xí)前對(duì)任務(wù)流程進(jìn)行梳理，這樣對(duì)理解邏輯更有幫助寞埠。歡迎大家在文章底部留言討論屁置。
某不是很知名體育科技有限公司PM，產(chǎn)品方向：人工智能仁连，計(jì)算機(jī)視覺(jué)蓝角。公眾號(hào)ID：helloto-morrow。
只分享重點(diǎn)內(nèi)容，歡迎關(guān)注騷擾?
