今天給大家分享一套APP注冊/登錄界面模板，其中包括本機登錄頁面，短信驗證登錄頁面，密碼登錄頁面，人臉登錄頁面，微博、微信、QQ、支付寶登錄頁面，注冊頁面，用戶協議和隱私條款。該原型使用簡單，交互完善。喜歡該原型的小伙伴們可以在評論處給我留言哦。

效果圖如下：

制作方法

1. 本機號碼登錄頁

登錄首頁為本機號碼登錄頁，里面有交互如下：

1. 本機號碼一件登錄，鼠標單擊時，設置動態面板跳轉到首頁；
2. 其他手機登錄：鼠標單擊其他手機登錄時，設置動態面板跳轉到其他手機號登錄頁面；
3. 注冊：鼠標單擊注冊按鈕時，和上面其他手機登錄一致，登錄和注冊頁面一致，方便客戶注冊；
4. 賬密登錄：鼠標單擊賬密登錄時，設置動態面板跳轉到賬號密碼登錄頁；
5. 三方登錄：鼠標單擊不同圖標（支付寶、微博、微信、QQ），設置動態面板跳轉至對應頁面。

2. 其他手機號碼登錄頁面

其他手機號碼登錄頁面，也是注冊的頁面，里面有交互如下：

1. 手機號碼輸入框獲取焦點時，彈出密碼鍵盤，密碼鍵盤制作方式可以參考我之前的文章《axure教程：手機鍵盤》。
2. 獲取短信驗證碼按鈕默認禁用，當驗證到手機號無誤時，啟用，啟用后，鼠標單擊時設置動態面板跳轉至短信驗證碼頁面。
3. 手機號碼判斷方式，我們判斷國內的手機號碼，做了一個簡單的驗證，第一，輸入必須是數字，第二，字符長度為11，第三，首位數是1。
4. 刷臉登錄：點擊刷臉登錄按鈕，設置動態面板跳轉至，刷臉登錄頁面。
5. 三方登錄：鼠標單擊不同圖標（支付寶、微博、微信、QQ），設置動態面板跳轉至對應頁面。
6. 賬密登錄：鼠標單擊賬密登錄時，設置動態面板跳轉到賬號密碼登錄頁。
7. 返回：鼠標單擊返回按鈕時，設置動態面板回到之前的頁面。

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. 人臉登錄頁面

這里做了一個簡單的模擬頁面，交互如下：

1. 在其他手機登錄頁面通過點擊人臉登錄，如果手機號碼輸入正確，設置動態面板跳轉到人臉登錄頁；如果輸入不正確，提示重新輸入。
2. 進入頁面后會有動態提示文字，例如，沒有識別到人臉等。設置文字多少秒后顯示即可。
3. 識別失?。旱却齨秒后，會彈出提示，識別失敗。點擊再來一次按鈕，設置動態面板重新進入該頁面即可，點擊退出，設置動態面板回到之前的頁面
4. 返回：鼠標單擊返回按鈕時，設置動態面板回到之前的頁面。

沒有輸入手機號碼或者手機號碼不正確時：

5. 賬密登錄頁面

賬密登錄頁面，交互如下：

1. 賬號和密碼輸入框獲取焦點時，彈出密碼鍵盤，密碼鍵盤制作方式可以參考我之前的文章《axure教程：手機鍵盤》
2. 密碼輸入框設置2個，可轉為動態面板。一個可見，一個可見，點擊右邊的顯示、隱藏密碼的按鈕時，分別顯示對應的輸入框即可。這里需要注意，任意一個輸入框文本變化時，需要設置另外一個輸入框與該輸入框的文本一致。
3. 賬號和密碼驗證：設置一個中繼器，里面有兩列，一列賬戶名、一列為密碼。點擊登錄按鈕后，進行賬號的帥選，如果中繼器可見數據條數為0，顯示錯誤彈窗；如果不為0，對比中繼器密碼和輸入密碼是否一致，如不一致，顯示錯誤彈窗，如果一致，設置動態面板跳轉至首頁。
4. 登錄按鈕：默認禁用、如果賬戶輸入框和密碼輸入框均不為空，則啟用。
5. 驗證碼登錄：鼠標單擊驗證登錄碼時，設置動態面板跳轉到其他手機號登錄頁面。
6. 注冊：鼠標單擊注冊按鈕時，和上面驗證碼登錄一致，登錄和注冊頁面一致，方便客戶注冊。
7. 返回：鼠標單擊返回按鈕時，設置動態面板回到之前的頁面。

賬號密碼錯誤時：

賬號密碼正確時：

6. 三方登錄頁面

支付寶登錄頁面，交互如下：

1. 點擊支付寶圖標時，設置動態面板跳轉至支付寶登錄頁面。這里需要做一個相識的頁面。
2. 點擊授權按鈕，設置動態面板跳轉至首頁。
3. 點擊用戶協議，設置動態面板跳轉至支付寶用戶協議。
4. 返回：鼠標單擊返回或暫不授權按鈕時，設置動態面板回到之前的頁面。

微博登錄頁面

邏輯和支付寶登錄頁面一致：

微信登錄頁面

邏輯和支付寶登錄頁面一致：

QQ登錄頁面

邏輯和支付寶登錄頁面一致：

7. 用戶協議和隱私條款

鼠標單擊用戶協議按鈕時：設置動態面板跳轉至用戶協議頁。

鼠標單擊隱私條款按鈕時：設置動態面板跳轉至隱私條款頁。

返回：鼠標單擊返回按鈕時，設置動態面板回到之前的頁面

今天的分享到這里就結束了，有問題的小伙伴們可以在下方評論處給我留言哦，我們下期見。

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

題圖來自 Unsplash，基于CC0協議