Axure教程:原型設計之獲取驗證碼
當前,很多表單的設計都會使用手機獲取驗證,一方面商家可以精準獲取用戶的手機號碼,以便之后的精準推廣,另一方面也防止用戶批量注冊小號擾亂平臺秩序。今天就主要說說如何使用axure原型來進行獲取驗證碼表單設計。
獲取驗證碼表單主要包括一個輸入框和一個“獲取驗證碼”按鈕,其中“獲取驗證碼”按鈕才是設計的重點。它總共有兩種狀態,一種是靜態文本狀態,即按鈕中顯示“獲取驗證碼”,另一種是動態倒計時狀態,即按鈕中顯示“XX秒后重新獲取”。
從靜態文本狀態到動態倒計時狀態的轉換所需要的操作是點擊按鈕,而從動態倒計時狀態到靜態文本狀態所需要的操作是60秒倒計時到0時。因此,可以分四步來進行:
第一步:先擺好所要控件,即向畫布拖拉一個文本框和一個矩形,矩形可以設置成橙色,并寫上文字“獲取驗證碼”。
第二步:為矩形添加一個載入時用例,用例中設置全局變量初始值,即OnLoadVariable的值設置成60,60為重新獲取驗證的倒計時初始值。
第三步:為矩形添加一個鼠標單擊時用例,先把用例中的條件設置成OnLoadVariable的值不等于0,然后再為用例添加4個動作
- 設置文本的值為“[[OnLoadVariable-1]]秒后重新獲取”;
- 設置全局變量的值為“[[OnLoadVariable-1]]”;
- 添加等待1000毫秒;
- 添加觸發矩形鼠標單擊事件。
第四步:再為矩形添加一個鼠標單擊時用例,先把用例中的條件設置成OnLoadVariable的值等于0,然后再為用例添加2個動作
- 設置全局變量的值為“60”;
- 設置文本的值為“獲取驗證碼”。
好了,點擊預覽即可看到逼真的動態效果,堅持分享axure原型設計小技巧,希望大家多多支持~~
本文由 @維度 原創發布于人人都是產品經理。未經許可,禁止轉載。
評論
設置完成后,不是自動的….點擊一下秒數少一秒,是哪里錯了那?
親 想請教一下,這個禁止是加在哪里呢? 加了之后發現60秒后出現再次發送驗證碼的時候也無法點擊了 ??
60秒倒計時結束后你還得取消禁止呀
棒棒噠 剛才去試了一下 搞定了
怎么倒計時之后取消禁止呢?
點擊按鈕 倒計時會加快啊 而且倒計時完成后 不會返回初始狀態 怎么破
是一直點擊嗎?你可以改進一下,在點擊之后將其按鈕變灰禁用,倒計時完成后又恢復按鈕使用,這樣就可以解決問題了
點擊按鈕之后會進入倒計時狀態啊 在倒計時狀態再點倒計時會加快 多點幾次之后 倒計時會明顯加快 而且倒計時完成后不會還原成按鈕 而是重60秒開始重新計時
嗯,就是我前面說的那個原因,點擊之后將其按鈕變灰禁用,倒計時完成后又恢復按鈕使用,這樣就可以解決問題了
猛點獲取有驚喜
多謝你的反饋,確實疏忽了這一點,不過在點擊之后將其按鈕禁用,倒計時完成后又恢復按鈕使用,這樣就可以解決問題了
謝謝~簡單明了!