編輯導(dǎo)語：如今大家注冊微信號或者登錄微信時，都會用自己的手機號作為賬號，那我們在登陸微信時會遇到輸入驗證碼的步驟，驗證碼會有一個發(fā)送按鈕，之后接受到短信再進行輸入；本文作者分享了關(guān)于微信的驗證碼登錄原型圖的交互，我們一起來了解一下。

大家好，我將發(fā)布微信高保真原型圖制作一系列文章，第一部分文章為微信登錄——驗證碼登錄系列。

驗證碼登錄系列分為三篇文章，分別為獲取驗證碼60秒動態(tài)展示、鍵盤模擬輸入、驗證碼驗證。

本文將為大家講解獲取驗證碼60秒動態(tài)展示（共有兩種方法）以及輸入驗證碼交互等。

一、演示

https://xjdlw1.axshare.com

二、操作步驟及講解

點擊”獲取驗證碼按鈕“，按鈕變?yōu)?0s動態(tài)顯示。

點擊“輸入驗證碼文本框”，獲取焦點。

在“輸入驗證碼文本框”輸入字符，“文本框”提示文字隱藏，顯示輸入字符，顯示“關(guān)閉圖標”，“登錄按鈕”顏色、字體改變。

點擊“關(guān)閉圖標”或刪除“文本框”字符，“文本框”重新顯示提示文字，隱藏“關(guān)閉按鈕”，“登錄按鈕”變?yōu)樵瓉淼念伾?、字體。

三、60s動態(tài)展示操作講解一

1. 單擊‘獲取驗證碼按鈕’后，按鈕文本變?yōu)椤斑€剩X秒”，X從60一直遞減到0，按鈕文本變?yōu)椤矮@取驗證碼”，一直循環(huán)。
2. X每隔一秒，數(shù)值改變一次，是一個變量，那我們可以設(shè)一個全局變量X，初始值設(shè)為60。
3. 接下來就是沒過一秒，X的值減一。單擊交互下有一個‘等待’動作，我們將等待時間設(shè)為1000ms（1s），然后設(shè)置變量X的值為x-1即X=X-1。
4. 以上就是X值改變一次的操作，我們需要讓以上操作一直重復(fù)下去。單擊交互下有觸發(fā)事件，我們將觸發(fā)事件設(shè)為單擊‘獲取驗證碼按鈕’。

觸發(fā)事件操作：設(shè)計鼠標單擊時，再次觸發(fā)鼠標單擊時間，在這就是點擊‘獲取驗證碼按鈕’，進行以上123步，再次觸發(fā)單擊‘獲取驗證碼按鈕’，相當于又點擊了一次按鈕，單擊按鈕以后就會繼續(xù)進行單擊后的動作，這樣操作就可以讓這幾步一直在循環(huán)，也就是x-1一直在循環(huán)。

1. 以上操作的運行結(jié)果就是點擊按鈕，按鈕文本改變，X一直遞減，到-1，-2，-3…
2. 我們需要給單擊按鈕加一下判斷，判斷一：當X的值大于0時，進行以上操作。判斷二：當X=0時，將按鈕文本變?yōu)椤矮@取驗證碼”，同時將X的值設(shè)為60。

四、原型設(shè)計

①文本框，取名“驗證碼文本框”。

②圖標，取名“關(guān)閉圖標”，設(shè)為隱藏狀態(tài)。

③按鈕，取名“獲取按鈕”。

④按鈕，取名“登錄按鈕”。

五、60秒動態(tài)展示交互設(shè)計步驟

1. 設(shè)置全局變量X，默認值設(shè)為60；
2. 選中“獲取按鈕”，新建交互，單擊時，設(shè)置“獲取按鈕”文本為“還剩X秒”。

設(shè)置等待動作，等待時間為1000ms。

設(shè)置變量X的值為x-1。

設(shè)置觸發(fā)事件，為單擊“獲取按鈕”。

為以上動作添加情形1，變量值X>0。

添加情形2，變量值X=0。

在情形2下添加動作，設(shè)置“獲取按鈕”文本為”獲取驗證碼”。設(shè)置變量X的值為“60”。

?

60s動態(tài)展示操作講解二

這個辦法使用動態(tài)面板的狀態(tài)切換來完成。具體使用了動態(tài)面板狀態(tài)循環(huán)切換和動態(tài)面板狀態(tài)改變時的交互。

在新建交互設(shè)置完觸發(fā)動作后的添加動作中有設(shè)置面板狀態(tài)，可將面板狀態(tài)設(shè)置為一直循環(huán)，循環(huán)間隔為1s。

在新建交互的觸發(fā)動作中有一個面板狀態(tài)改變時，設(shè)置面板狀態(tài)改變時，將X的值-1。

面板狀態(tài)改變時就是動態(tài)面板多個面板狀態(tài)改變或者切換，比如動態(tài)面板有有兩個狀態(tài)分別為狀態(tài)1和狀態(tài)2，當從狀態(tài)1變?yōu)闋顟B(tài)2或者狀態(tài)2變?yōu)闋顟B(tài)1時，面板狀態(tài)就改變了

60秒動態(tài)展示交互設(shè)計步驟二

1. 設(shè)置全局變量X，默認值設(shè)為60
2. 新建動態(tài)面板，添加動態(tài)面板狀態(tài)大于等于兩個，（因為需要動態(tài)面板的狀態(tài)來回切換，達到狀態(tài)間循環(huán)切換，所以面板狀態(tài)不能少于兩個）將動態(tài)面板隱藏。
3. 選中“獲取按鈕”，新建交互，單擊時，設(shè)置動態(tài)面板到下一項循環(huán)，循環(huán)間隔為1000ms。
4. 選中動態(tài)面板，新建交互，狀態(tài)改變時，設(shè)置“獲取按鈕”文本為“還剩X秒”；設(shè)置變量值X的值為X-1.
5. 為以上動作添加情形1，變量值X>0。

6. 添加情形2，變量值X=0.
7. 在情形2下添加動作，設(shè)置動態(tài)面板停止循環(huán)；設(shè)置變量X的值為“60”；設(shè)置“獲取按鈕”文本為”獲取驗證碼”。

六、其它交互設(shè)計步驟（輸入驗證碼時…）

選中“登錄按鈕”，設(shè)置交互樣式；選中時的樣式，改變按鈕填充顏色和文字顏色。

選中“驗證碼文本框”新建交互，文本改變時，添加情形1為元件文字長度不為0時（當文本長度不為0時，說明輸入框中有文字），顯示關(guān)閉按鈕，設(shè)置“登錄按鈕”選中狀態(tài)值為真（為了讓登錄按鈕改變樣式）。

添加情形2，為元件文字長不為0時，隱藏“登錄按鈕”選中狀態(tài)值為假。

選中“關(guān)閉按鈕”，新建交互，單擊時設(shè)置“驗證碼文本框”文本為空。

結(jié)語：完成以上操作，驗證碼登錄的高保真原型圖就完成了。

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

題圖來自Unsplash，基于CC0協(xié)議