導讀：我們在使用賬號登錄一些系統或其他產品時，經常會遇到安全驗證，常見的大多是文字驗證、滑動拼圖驗證、數字驗證等。本篇文章將向大家詳細介紹一下如何繪制常見的驗證碼倒計時驗證登錄，希望可以幫助到大家。

原型示例：https://zufeki.axshare.com? ? (若打開鏈接比較慢，請耐心等待一下)

一、原型準備

今天我們主要講的是關于輸入驗證碼倒計時登錄，那我們首先先在頁面中放置登錄頁基本的元件

如：帳號輸入框、驗證碼輸入框、獲取驗證碼按鈕、登錄按鈕、登陸協議等

接著，我們選中【獲取驗證碼】按鈕，添加交互：單擊時-設置情形1-（if值于 X > 1）時

對情形1添加動作：設置文本-值：[[X]]秒后重新獲取

選中全局變量X后，在[[X]]后輸入：秒后重新獲取

下一步設置動作：等待-1000ms，接著再選擇：設置變量值-[[X-1]]

再對情形1設置最后一步動作：觸發事件-單擊時

情形1設置完成后，接著我們再進行設置情形2，也就是除情形1之外所涉及的變量信息

接著設置文本為重新獲取，設置變量值為X為60

截至到這里，我們即可以預覽獲取驗證碼倒計時頁面，點擊獲取驗證碼就會顯示倒計時了，可以查看上面的原型地址預覽

接著，我們再對【登錄】按鈕進行設置密碼驗證，密碼驗證和上方的倒計時設置情形基本相似，此處將不再詳細做講解

我們再做一個錯誤提示的彈窗以表示輸入錯誤驗證碼時所出現的提示，并先將其隱藏。

以上，就是關于獲取驗證碼倒計時，輸入正確的驗證碼登錄的整個原型講解，若有描述不夠詳細的地方，可以在下方評論，本人看到后第一時間回復你們，希望本篇教程可以幫助到你們。

本文由 @Eason同學 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Pexels，基于CC0協議。