Axure教程:原型設計之獲取驗證碼

12 評論 16153 瀏覽 83 收藏 4 分鐘

當前,很多表單的設計都會使用手機獲取驗證,一方面商家可以精準獲取用戶的手機號碼,以便之后的精準推廣,另一方面也防止用戶批量注冊小號擾亂平臺秩序。今天就主要說說如何使用axure原型來進行獲取驗證碼表單設計。

獲取驗證碼表單主要包括一個輸入框和一個“獲取驗證碼”按鈕,其中“獲取驗證碼”按鈕才是設計的重點。它總共有兩種狀態,一種是靜態文本狀態,即按鈕中顯示“獲取驗證碼”,另一種是動態倒計時狀態,即按鈕中顯示“XX秒后重新獲取”。

從靜態文本狀態到動態倒計時狀態的轉換所需要的操作是點擊按鈕,而從動態倒計時狀態到靜態文本狀態所需要的操作是60秒倒計時到0時。因此,可以分四步來進行:

第一步:先擺好所要控件,即向畫布拖拉一個文本框和一個矩形,矩形可以設置成橙色,并寫上文字“獲取驗證碼”。

第二步:為矩形添加一個載入時用例,用例中設置全局變量初始值,即OnLoadVariable的值設置成60,60為重新獲取驗證的倒計時初始值。

第三步:為矩形添加一個鼠標單擊時用例,先把用例中的條件設置成OnLoadVariable的值不等于0,然后再為用例添加4個動作

  • 設置文本的值為“[[OnLoadVariable-1]]秒后重新獲取”;
  • 設置全局變量的值為“[[OnLoadVariable-1]]”;
  • 添加等待1000毫秒;
  • 添加觸發矩形鼠標單擊事件。

第四步:再為矩形添加一個鼠標單擊時用例,先把用例中的條件設置成OnLoadVariable的值等于0,然后再為用例添加2個動作

  • 設置全局變量的值為“60”;
  • 設置文本的值為“獲取驗證碼”。

好了,點擊預覽即可看到逼真的動態效果,堅持分享axure原型設計小技巧,希望大家多多支持~~

 

效果圖:http://e9en8d.axshare.com

本文由 @維度 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 設置完成后,不是自動的….點擊一下秒數少一秒,是哪里錯了那?

    來自天津 回復
  2. 親 想請教一下,這個禁止是加在哪里呢? 加了之后發現60秒后出現再次發送驗證碼的時候也無法點擊了 ??

    來自四川 回復
    1. 60秒倒計時結束后你還得取消禁止呀

      來自廣東 回復
    2. 棒棒噠 剛才去試了一下 搞定了

      來自四川 回復
    3. 怎么倒計時之后取消禁止呢?

      來自四川 回復
  3. 點擊按鈕 倒計時會加快啊 而且倒計時完成后 不會返回初始狀態 怎么破

    來自北京 回復
    1. 是一直點擊嗎?你可以改進一下,在點擊之后將其按鈕變灰禁用,倒計時完成后又恢復按鈕使用,這樣就可以解決問題了

      來自廣東 回復
    2. 點擊按鈕之后會進入倒計時狀態啊 在倒計時狀態再點倒計時會加快 多點幾次之后 倒計時會明顯加快 而且倒計時完成后不會還原成按鈕 而是重60秒開始重新計時

      來自北京 回復
    3. 嗯,就是我前面說的那個原因,點擊之后將其按鈕變灰禁用,倒計時完成后又恢復按鈕使用,這樣就可以解決問題了

      來自廣東 回復
  4. 猛點獲取有驚喜

    來自廣東 回復
    1. 多謝你的反饋,確實疏忽了這一點,不過在點擊之后將其按鈕禁用,倒計時完成后又恢復按鈕使用,這樣就可以解決問題了

      來自廣東 回復
  5. 謝謝~簡單明了!

    來自廣東 回復