Axure教程:獲取驗(yàn)證碼倒計(jì)時(shí)的實(shí)現(xiàn)

1 評(píng)論 2909 瀏覽 8 收藏 5 分鐘

本文介紹了如何用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é)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請登錄
  1. 真棒!

    來自廣東 回復(fù)