登錄功能在互聯網產品中基本上是一個必備的功能，形式也多種多樣，其中較為常見的是手機號驗證碼登錄，那我們如何製作高保真的交互效果呢？本篇文章筆者將以Axure9為工具給大家分享如何去製作這個效果。
首先，我們還是要明確一個思路，當我們在製作任何一個交互效果時，都需要對這個交互的步驟進行拆分，然後分別把對應步驟代入到Axure的交互設置中，是否可以用某些動作進行一一實現。這一思路大家可以參考之前設計知乎問答卡片的文章-Axure高保真：如何在原型圖上實現「知乎」問答卡片交互效果？
我們仔細思考一下獲取驗證碼到重新獲取的流程：
一、元件準備
根據這個流程，我們可以很清楚地知道，我們需要的元件有文本輸入框、按鈕以及全局變量的設置（一般涉及到數據動態變化的設計效果，我們都可以考慮是否需要全局變量）。
二、元件佈局與美化
準備好元件之後，我們接下來將元件進行佈局以及細節的美化。
文本框：進行輸入內容提示（手機號、驗證碼）、位數限制（11位、6位）、邊框美化。
按鈕：說明按鈕功能、按鈕顏色與大小、圓角大小。
最終佈局效果：
三、全局變量設置
我們在Axure9的最上面找到「項目」-「全局變量設置」，並點擊添加新的變量captcha(命名隨意)，默認值設置為60。
四、交互效果設置
在設置交互效果之前，我們再進一步思考一下，點擊獲取驗證碼這個動作之後，元件有哪些變化。我們可以瞭解到，點擊之後，獲取驗證碼的按鈕文案變為了倒計時+後重新獲取，計時結束後文案變為重新獲取且可以再次點擊獲取。
這一過程我們可以對應拆分到交互設置上。
第一階段：點擊進入倒計時
文案變化為倒計時文案：點擊後對按鈕進行「設置文本」。
倒計時：設置等待時間為1000ms，且設置變量值captcha-1，之後對於這個動作進行循環觸發。
在我們思考第二階段如何去做時，我們需要了解到，captcha值最終會變為0，當為0時繼續觸發執行變量值-1時，會變為負值，這時恰好是變為重新獲取的時機，即為進入第二階段，故我們在第一階段和第二階段應該分別假如情形進行判斷，則第一階段完整的交互設置如下：
第二階段：重新獲取並可再次點擊倒計時
文案再變化為重新獲取：點擊後對按鈕進行「設置文本」。
再次點擊可倒計時，重置倒計時：設置變量值captcha為60。
五、最終效果
設置完所有交互效果之後，我們可以在每個元件上添加說明，方便與開發人員進行溝通。
最終效果：
謝謝大家閱讀，我是把產品當做刻章去打磨的偽文青，歡迎指正和訂閱！
題圖來自Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
