廣州熱線

原標(biāo)題：Axure教程：一個(gè)通用的app注冊(cè)/登錄頁(yè)

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

效果圖如下：

制作方法1.本機(jī)號(hào)碼登錄頁(yè)

登錄首頁(yè)為本機(jī)號(hào)碼登錄頁(yè)，里面有交互如下：

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

2.其他手機(jī)號(hào)碼登錄頁(yè)面

其他手機(jī)號(hào)碼登錄頁(yè)面，也是注冊(cè)的頁(yè)面，里面有交互如下：

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

3.短信登錄頁(yè)面

短信登錄頁(yè)面，里面有交互如下：

（1）模擬生成短信驗(yàn)證碼，利用random函數(shù)生成6為隨機(jī)驗(yàn)證碼，具體公式：[[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è)置動(dòng)態(tài)面板狀態(tài)改變時(shí)事件，即動(dòng)態(tài)面板進(jìn)入該頁(yè)是，彈出顯示短信驗(yàn)證碼，5秒后自動(dòng)隱藏短信驗(yàn)證碼。鼠標(biāo)下滑時(shí)，彈出顯示。

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

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

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

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

短信驗(yàn)證碼輸入錯(cuò)誤時(shí)：

短信驗(yàn)證碼輸入正確時(shí)：

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

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

4.人臉登錄頁(yè)面

這里做了一個(gè)簡(jiǎn)單的模擬頁(yè)面，交互如下：

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

沒(méi)有輸入手機(jī)號(hào)碼或者手機(jī)號(hào)碼不正確時(shí)：

5.賬密登錄頁(yè)面

賬密登錄頁(yè)面，交互如下：

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

賬號(hào)密碼錯(cuò)誤時(shí)：

賬號(hào)密碼正確時(shí)：

6.三方登錄頁(yè)面

支付寶登錄頁(yè)面，交互如下：

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

微博登錄頁(yè)面

邏輯和支付寶登錄頁(yè)面一致：

微信登錄頁(yè)面

邏輯和支付寶登錄頁(yè)面一致：

QQ登錄頁(yè)面

邏輯和支付寶登錄頁(yè)面一致：

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

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

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

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

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

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

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