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

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

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

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

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

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

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

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

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

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

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

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