中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

一、演示

https://xjdlw1.axshare.com

二、操作步驟及講解

點擊”獲取驗證碼按鈕“，按鈕變為60s動態顯示。

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

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

點擊“關閉圖標”或刪除“文本框”字符，“文本框”重新顯示提示文字，隱藏“關閉按鈕”，“登錄按鈕”變為原來的顏色、字體。

三、60s動態展示操作講解一

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

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

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

四、原型設計

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

②圖標，取名“關閉圖標”，設為隱藏狀態。

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

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

五、60秒動態展示交互設計步驟

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

設置等待動作，等待時間為1000ms。

設置變量X的值為x-1。

設置觸發事件，為單擊“獲取按鈕”。

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

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

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

?

60s動態展示操作講解二

這個辦法使用動態面板的狀態切換來完成。具體使用了動態面板狀態循環切換和動態面板狀態改變時的交互。

在新建交互設置完觸發動作后的添加動作中有設置面板狀態，可將面板狀態設置為一直循環，循環間隔為1s。

在新建交互的觸發動作中有一個面板狀態改變時，設置面板狀態改變時，將X的值-1。

面板狀態改變時就是動態面板多個面板狀態改變或者切換，比如動態面板有有兩個狀態分別為狀態1和狀態2，當從狀態1變為狀態2或者狀態2變為狀態1時，面板狀態就改變了

60秒動態展示交互設計步驟二

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

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

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

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

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

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

選中“關閉按鈕”，新建交互，單擊時設置“驗證碼文本框”文本為空。

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

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

題圖來自Unsplash，基于CC0協議