本文介紹了如何用Axure獲取驗(yàn)證碼倒計(jì)時(shí)的實(shí)現(xiàn)的操作步驟，希望對(duì)你有所幫助。

預(yù)覽效果

（1）獲取驗(yàn)證碼：

（2）倒計(jì)時(shí)：

（3）重新獲取：

所需元件

一個(gè)文本標(biāo)簽并將文字改為“10”，一個(gè)矩形轉(zhuǎn)換為動(dòng)態(tài)面板并增加多一個(gè)面板。

操作步驟

（1）將“計(jì)時(shí)”矩形放在“提示”動(dòng)態(tài)面板下面

（2）設(shè)置面板1內(nèi)的矩形文字為“獲取驗(yàn)證碼”

（3）在面板2內(nèi)放置一塊相同大小的矩形，并設(shè)置矩形內(nèi)文字為“重新獲取”

（4）設(shè)置動(dòng)態(tài)面板第一個(gè)交互——鼠標(biāo)單擊時(shí)

（5）設(shè)置動(dòng)態(tài)面板第二個(gè)交互——狀態(tài)改變時(shí)（Case1）

（6）為該交互添加條件

（7）設(shè)置動(dòng)態(tài)面板第三個(gè)交互——狀態(tài)改變時(shí)（Case2）

（8）并為該交互添加條件

（9）大功告成，接下來按F5預(yù)覽原型即可。

小記

1.這里解釋一下為什么設(shè)置動(dòng)態(tài)面板的第一個(gè)交互——鼠標(biāo)單擊時(shí)，隱藏了動(dòng)態(tài)面板后要讓動(dòng)態(tài)面板每過1S循環(huán)切換State1->State2->State1。這個(gè)操作的目的是為了觸發(fā)第二、三個(gè)交互——狀態(tài)改變時(shí)，因?yàn)閯?dòng)態(tài)面板切換了，所以狀態(tài)改變了，那么系統(tǒng)在判斷到“計(jì)時(shí)”仍>“0”時(shí)就會(huì)自動(dòng)減1，從10變成9，過1S又從9變8…以此類推，直到為0時(shí)，下一秒就顯示動(dòng)態(tài)面板并顯示為State2，“重新獲取”矩形的所在面板。

2.以上就是許多網(wǎng)站和APP都會(huì)用到的關(guān)于用手機(jī)收取驗(yàn)證碼時(shí)的倒計(jì)時(shí)的原型制作啦，學(xué)會(huì)這個(gè)原型，那么將來在你自己需要設(shè)計(jì)網(wǎng)站或APP原型時(shí)大概率都會(huì)用上。(??????)??太棒了！

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

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