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

效果圖如下：

制作方法

1. 本機號碼登錄頁

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

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

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

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

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

3. 短信登錄頁面

短信登錄頁面，里面有交互如下：

（1）模擬生成短信驗證碼，利用random函數(shù)生成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）設(shè)置動態(tài)面板狀態(tài)改變時事件，即動態(tài)面板進入該頁是，彈出顯示短信驗證碼，5秒后自動隱藏短信驗證碼。鼠標(biāo)下滑時，彈出顯示。

（3）通過鍵盤輸入驗證碼，原理和上面手機號碼輸入一致，輸入框一定要是數(shù)字框，然后控制6位數(shù)字，輸入6位數(shù)之后，需要進行判斷，輸入的6位數(shù)和驗證碼一致，則登錄成功，設(shè)置動態(tài)面板跳轉(zhuǎn)至首頁；如果輸入的6位數(shù)和驗證碼不一致，則清空輸入的驗證碼，彈出提示，驗證碼錯誤。

（4）重新獲取驗證碼，每次獲取驗證碼之后，有60秒倒計時，60秒后，顯示重新獲取驗證碼按鈕，點后后，重新發(fā)送并顯示驗證碼。倒計時用動態(tài)面板做，設(shè)置2個state不斷循環(huán)，循環(huán)間隔為1s，狀態(tài)改變時，設(shè)置文本，target.text=target.text-1，if target.text>0。

（5）復(fù)制：點擊復(fù)制按鈕：設(shè)置輸入的6位數(shù)=驗證碼。

（6）返回：鼠標(biāo)單擊返回按鈕時，設(shè)置動態(tài)面板回到之前的頁面。

短信驗證碼輸入錯誤時：

短信驗證碼輸入正確時：

短信驗證碼復(fù)制黏貼功能：

短信驗證碼60秒后重新發(fā)送：

4. 人臉登錄頁面

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

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

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

5. 賬密登錄頁面

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

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

賬號密碼錯誤時：

賬號密碼正確時：

6. 三方登錄頁面

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

1. 點擊支付寶圖標(biāo)時，設(shè)置動態(tài)面板跳轉(zhuǎn)至支付寶登錄頁面。這里需要做一個相識的頁面。
2. 點擊授權(quán)按鈕，設(shè)置動態(tài)面板跳轉(zhuǎn)至首頁。
3. 點擊用戶協(xié)議，設(shè)置動態(tài)面板跳轉(zhuǎn)至支付寶用戶協(xié)議。
4. 返回：鼠標(biāo)單擊返回或暫不授權(quán)按鈕時，設(shè)置動態(tài)面板回到之前的頁面。

微博登錄頁面

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

微信登錄頁面

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

QQ登錄頁面

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

7. 用戶協(xié)議和隱私條款

鼠標(biāo)單擊用戶協(xié)議按鈕時：設(shè)置動態(tài)面板跳轉(zhuǎn)至用戶協(xié)議頁。

鼠標(biāo)單擊隱私條款按鈕時：設(shè)置動態(tài)面板跳轉(zhuǎn)至隱私條款頁。

返回：鼠標(biāo)單擊返回按鈕時，設(shè)置動態(tài)面板回到之前的頁面

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

本文由 @梓賢Vigo 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于CC0協(xié)議