|
原標題：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，iftarget.text>0。
（5）復制：點擊復制按鈕：設置輸入的6位數=驗證碼。
（6）返回：鼠標單擊返回按鈕時，設置動態面板回到之前的頁面。
短信驗證碼輸入錯誤時：
短信驗證碼輸入正確時：
短信驗證碼復制黏貼功能：
短信驗證碼60秒后重新發送：
4.人臉登錄頁面
這里做了一個簡單的模擬頁面，交互如下：
- 在其他手機登錄頁面通過點擊人臉登錄，如果手機號碼輸入正確，設置動態面板跳轉到人臉登錄頁；如果輸入不正確，提示重新輸入。
- 進入頁面后會有動態提示文字，例如，沒有識別到人臉等。設置文字多少秒后顯示即可。
- 識別失?。旱却齨秒后，會彈出提示，識別失敗。點擊再來一次按鈕，設置動態面板重新進入該頁面即可，點擊退出，設置動態面板回到之前的頁面
- 返回：鼠標單擊返回按鈕時，設置動態面板回到之前的頁面。
沒有輸入手機號碼或者手機號碼不正確時：
5.賬密登錄頁面
賬密登錄頁面，交互如下：
- 賬號和密碼輸入框獲取焦點時，彈出密碼鍵盤，密碼鍵盤制作方式可以參考我之前的文章《axure教程：手機鍵盤》
- 密碼輸入框設置2個，可轉為動態面板。一個可見，一個可見，點擊右邊的顯示、隱藏密碼的按鈕時，分別顯示對應的輸入框即可。這里需要注意，任意一個輸入框文本變化時，需要設置另外一個輸入框與該輸入框的文本一致。
- 賬號和密碼驗證：設置一個中繼器，里面有兩列，一列賬戶名、一列為密碼。點擊登錄按鈕后，進行賬號的帥選，如果中繼器可見數據條數為0，顯示錯誤彈窗；如果不為0，對比中繼器密碼和輸入密碼是否一致，如不一致，顯示錯誤彈窗，如果一致，設置動態面板跳轉至首頁。
- 登錄按鈕：默認禁用、如果賬戶輸入框和密碼輸入框均不為空，則啟用。
- 驗證碼登錄：鼠標單擊驗證登錄碼時，設置動態面板跳轉到其他手機號登錄頁面。
- 注冊：鼠標單擊注冊按鈕時，和上面驗證碼登錄一致，登錄和注冊頁面一致，方便客戶注冊。
- 返回：鼠標單擊返回按鈕時，設置動態面板回到之前的頁面。
賬號密碼錯誤時：
賬號密碼正確時：
6.三方登錄頁面
支付寶登錄頁面，交互如下：
- 點擊支付寶圖標時，設置動態面板跳轉至支付寶登錄頁面。這里需要做一個相識的頁面。
- 點擊授權按鈕，設置動態面板跳轉至首頁。
- 點擊用戶協議，設置動態面板跳轉至支付寶用戶協議。
- 返回：鼠標單擊返回或暫不授權按鈕時，設置動態面板回到之前的頁面。
微博登錄頁面
邏輯和支付寶登錄頁面一致：
微信登錄頁面
邏輯和支付寶登錄頁面一致：
QQ登錄頁面
邏輯和支付寶登錄頁面一致：
7.用戶協議和隱私條款
鼠標單擊用戶協議按鈕時：設置動態面板跳轉至用戶協議頁。
鼠標單擊隱私條款按鈕時：設置動態面板跳轉至隱私條款頁。
返回：鼠標單擊返回按鈕時，設置動態面板回到之前的頁面
今天的分享到這里就結束了，有問題的小伙伴們可以在下方評論處給我留言哦，我們下期見。
本文由@梓賢Vigo原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
|
