關閉

微信高保真原型圖--驗證碼登錄

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

文章教程簡介

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

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

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

演示

https://xjdlw1.axshare.com

操作步驟及講解

1.點擊 '獲取驗證碼按鈕',按鈕變為60s動態顯示。

2.點擊 '輸入驗證碼文本框',獲取焦點

3.在'輸入驗證碼文本框 '輸入字符,'文本框'提示文字隱藏,顯示輸入字符,顯示'關閉圖標','登錄按鈕'顏色、字體改變

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

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. 為以上動作添加情形1,變量值X>0。

  2. 添加情形2,變量值X=0.

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

其它交互設計步驟(輸入驗證碼時...)

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

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

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

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

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

文\多知

0條評論 添加新討論

登錄后參與討論
Ctrl+Enter 發表