Axure教程:一個通用的app注冊/登錄頁
今天給大家分享一套APP注冊/登錄界面模板,其中包括本機登錄頁面,短信驗證登錄頁面,密碼登錄頁面,人臉登錄頁面,微博、微信、QQ、支付寶登錄頁面,注冊頁面,用戶協議和隱私條款。該原型使用簡單,交互完善。喜歡該原型的小伙伴們可以在評論處給我留言哦。
效果圖如下:
制作方法
1. 本機號碼登錄頁
登錄首頁為本機號碼登錄頁,里面有交互如下:
- 本機號碼一件登錄,鼠標單擊時,設置動態面板跳轉到首頁;
- 其他手機登錄:鼠標單擊其他手機登錄時,設置動態面板跳轉到其他手機號登錄頁面;
- 注冊:鼠標單擊注冊按鈕時,和上面其他手機登錄一致,登錄和注冊頁面一致,方便客戶注冊;
- 賬密登錄:鼠標單擊賬密登錄時,設置動態面板跳轉到賬號密碼登錄頁;
- 三方登錄:鼠標單擊不同圖標(支付寶、微博、微信、QQ),設置動態面板跳轉至對應頁面。
2. 其他手機號碼登錄頁面
其他手機號碼登錄頁面,也是注冊的頁面,里面有交互如下:
- 手機號碼輸入框獲取焦點時,彈出密碼鍵盤,密碼鍵盤制作方式可以參考我之前的文章《axure教程:手機鍵盤》。
- 獲取短信驗證碼按鈕默認禁用,當驗證到手機號無誤時,啟用,啟用后,鼠標單擊時設置動態面板跳轉至短信驗證碼頁面。
- 手機號碼判斷方式,我們判斷國內的手機號碼,做了一個簡單的驗證,第一,輸入必須是數字,第二,字符長度為11,第三,首位數是1。
- 刷臉登錄:點擊刷臉登錄按鈕,設置動態面板跳轉至,刷臉登錄頁面。
- 三方登錄:鼠標單擊不同圖標(支付寶、微博、微信、QQ),設置動態面板跳轉至對應頁面。
- 賬密登錄:鼠標單擊賬密登錄時,設置動態面板跳轉到賬號密碼登錄頁。
- 返回:鼠標單擊返回按鈕時,設置動態面板回到之前的頁面。
3. 短信登錄頁面
短信登錄頁面,里面有交互如下:
(1)模擬生成短信驗證碼,利用random函數生成6為隨機驗證碼,具體公式:[[Math.floor(Math.random()*10),1]][[Math.floor(Math.random()*10),1]][[Math.floor(Math.random()*10),1]][[Math.floor(Math.random()*10),1]][[Math.floor(Math.random()*10),1]][[Math.floor(Math.random()*10),1]]
(2)設置動態面板狀態改變時事件,即動態面板進入該頁是,彈出顯示短信驗證碼,5秒后自動隱藏短信驗證碼。鼠標下滑時,彈出顯示。
(3)通過鍵盤輸入驗證碼,原理和上面手機號碼輸入一致,輸入框一定要是數字框,然后控制6位數字,輸入6位數之后,需要進行判斷,輸入的6位數和驗證碼一致,則登錄成功,設置動態面板跳轉至首頁;如果輸入的6位數和驗證碼不一致,則清空輸入的驗證碼,彈出提示,驗證碼錯誤。
(4)重新獲取驗證碼,每次獲取驗證碼之后,有60秒倒計時,60秒后,顯示重新獲取驗證碼按鈕,點后后,重新發送并顯示驗證碼。倒計時用動態面板做,設置2個state不斷循環,循環間隔為1s,狀態改變時,設置文本,target.text=target.text-1,if target.text>0。
(5)復制:點擊復制按鈕:設置輸入的6位數=驗證碼。
(6)返回:鼠標單擊返回按鈕時,設置動態面板回到之前的頁面。
短信驗證碼輸入錯誤時:
短信驗證碼輸入正確時:
短信驗證碼復制黏貼功能:
短信驗證碼60秒后重新發送:
4. 人臉登錄頁面
這里做了一個簡單的模擬頁面,交互如下:
- 在其他手機登錄頁面通過點擊人臉登錄,如果手機號碼輸入正確,設置動態面板跳轉到人臉登錄頁;如果輸入不正確,提示重新輸入。
- 進入頁面后會有動態提示文字,例如,沒有識別到人臉等。設置文字多少秒后顯示即可。
- 識別失敗:等待n秒后,會彈出提示,識別失敗。點擊再來一次按鈕,設置動態面板重新進入該頁面即可,點擊退出,設置動態面板回到之前的頁面
- 返回:鼠標單擊返回按鈕時,設置動態面板回到之前的頁面。
沒有輸入手機號碼或者手機號碼不正確時:
5. 賬密登錄頁面
賬密登錄頁面,交互如下:
- 賬號和密碼輸入框獲取焦點時,彈出密碼鍵盤,密碼鍵盤制作方式可以參考我之前的文章《axure教程:手機鍵盤》
- 密碼輸入框設置2個,可轉為動態面板。一個可見,一個可見,點擊右邊的顯示、隱藏密碼的按鈕時,分別顯示對應的輸入框即可。這里需要注意,任意一個輸入框文本變化時,需要設置另外一個輸入框與該輸入框的文本一致。
- 賬號和密碼驗證:設置一個中繼器,里面有兩列,一列賬戶名、一列為密碼。點擊登錄按鈕后,進行賬號的帥選,如果中繼器可見數據條數為0,顯示錯誤彈窗;如果不為0,對比中繼器密碼和輸入密碼是否一致,如不一致,顯示錯誤彈窗,如果一致,設置動態面板跳轉至首頁。
- 登錄按鈕:默認禁用、如果賬戶輸入框和密碼輸入框均不為空,則啟用。
- 驗證碼登錄:鼠標單擊驗證登錄碼時,設置動態面板跳轉到其他手機號登錄頁面。
- 注冊:鼠標單擊注冊按鈕時,和上面驗證碼登錄一致,登錄和注冊頁面一致,方便客戶注冊。
- 返回:鼠標單擊返回按鈕時,設置動態面板回到之前的頁面。
賬號密碼錯誤時:
賬號密碼正確時:
6. 三方登錄頁面
支付寶登錄頁面,交互如下:
- 點擊支付寶圖標時,設置動態面板跳轉至支付寶登錄頁面。這里需要做一個相識的頁面。
- 點擊授權按鈕,設置動態面板跳轉至首頁。
- 點擊用戶協議,設置動態面板跳轉至支付寶用戶協議。
- 返回:鼠標單擊返回或暫不授權按鈕時,設置動態面板回到之前的頁面。
微博登錄頁面
邏輯和支付寶登錄頁面一致:
微信登錄頁面
邏輯和支付寶登錄頁面一致:
QQ登錄頁面
邏輯和支付寶登錄頁面一致:
7. 用戶協議和隱私條款
鼠標單擊用戶協議按鈕時:設置動態面板跳轉至用戶協議頁。
鼠標單擊隱私條款按鈕時:設置動態面板跳轉至隱私條款頁。
返回:鼠標單擊返回按鈕時,設置動態面板回到之前的頁面
今天的分享到這里就結束了,有問題的小伙伴們可以在下方評論處給我留言哦,我們下期見。
本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自 Unsplash,基于CC0協議
手機掃碼登錄注冊該如何操作呢
原型預覽及下載地址:
https://axhub.im/pro/0040d2844250a334
沒有忘記密碼???那一直記不得密碼怎么辦
用驗證碼進去啊,現在手機版的很多登錄界面都是沒有忘記密碼的,要登錄后進去設置里面重置,手機端和電腦端的有一定的不同哈
感謝分享
請問視頻和視頻上面的鼠標手形怎么做好的?
視頻?那是gif