本文分享了Web端登錄、注冊、找回密碼原型設計。包含登錄（短信登錄、賬密登錄、掃碼登錄、三方登錄）、注冊（短信注冊、賬密注冊、郵箱注冊）和找回密碼（通過短信找回密碼、通過郵箱找回密碼），與大家分享！

上次和大家分享了如何制作手機端的登錄注冊原型，《Axure教程：一個通用的app注冊/登錄頁
》，然后不少小朋友希望我能做一個web端的登錄注冊原型。

所以今天就和大家分享一下怎么樣用web做一個高保真高交互的登錄注冊和找回密碼的原型。

制作完成后的原型使用簡單，交互完善。喜歡該原型的小伙伴們點個訂閱，也可以在評論處給我留言哦。

一、效果演示

二、制作方法

本原型包含登錄（短信登錄、賬密登錄、掃碼登錄、三方登錄）、注冊（短信注冊、賬密注冊、郵箱注冊）和找回密碼（通過短信找回密碼、通過郵箱找回密碼），下面我將一一講解。

1. 短信登錄

材料

• 動態面板（短信登錄、賬密登錄、掃碼登錄）
• 輸入框：手機號碼輸入框、短信驗證碼輸入框
• 按鈕：立即注冊按鈕、登錄按鈕、微信登錄按鈕、支付寶登錄按鈕、發送驗證碼按鈕
• 密碼賬號中繼器

如下圖所示擺放：

交互事件

• 點擊（短信登錄、賬密登錄、掃碼登錄）時：設置動態面板到對應的頁面。
• 手機號碼輸入框：設置文本框格式為number，輸入結束時需要判斷是否為11位的手機號碼，如果不是，提示文字內容為請輸入11位手機號碼。
• 發送驗證碼按鈕：如果手機號碼輸入正確，啟用發送驗證碼按鈕。點擊該按鈕是，系統生成一個6位數的隨機驗證碼，這里需要用到radom函數。如果手機號碼輸入不正確或未輸入，設置提示文字，請輸入11位手機號碼。
• 登錄按鈕：點擊時，首先判斷手機號碼是否正確，如不正確，設置設置提示文字內容為請輸入11位手機號碼。再判斷短信驗證碼輸入框的文字與隨機生成的6位數是否一致，如果一致，顯示登錄成功的彈窗，并且進入首頁；如果不成功，則設置設置提示文字內容為驗證碼錯誤，請重新輸入。
• 微信按鈕和支付寶按鈕：鼠標單擊按鈕時，新建窗口打開對應的登錄頁面。
• 立即注冊按鈕：點擊后設置動態面板為短信注冊頁面。

2. 賬密登錄

材料：

• 動態面板（短信登錄、賬密登錄、掃碼登錄）
• 輸入框：賬號輸入框、密碼輸入框
• 按鈕：立即注冊按鈕、登錄按鈕、微信登錄按鈕、支付寶登錄按鈕、忘記密碼按鈕
• 密碼賬號中繼器

如下圖所示擺放：

交互事件

• 點擊（短信登錄、賬密登錄、掃碼登錄）時：設置動態面板到對應的頁面。
• 賬號輸入框：輸入賬號后，按賬號帥選中繼器內容。如果中繼器可見條數=0，即說明賬號不存在，提醒用戶賬號不存在；如果中繼器可見條數>0，可以繼續實踐。
• 密碼輸入框：可以做成可視和不可視的效果。
• 登錄按鈕：點擊時，首先按賬號對中繼器進行篩選。如果中繼器可見條數=0，即說明賬號不存在，提醒用戶賬號不存在，如=1，則表示存在。然后需要驗證賬號和密碼是否和中繼器的一致 ，如果不一致，提示客戶賬號或密碼錯誤，請重新輸入，如果一致，則登錄成功，進入首頁。
• 微信按鈕和支付寶按鈕：鼠標單擊按鈕時，新建窗口打開對應的登錄頁面。
• 立即注冊按鈕：點擊后設置動態面板為短信注冊頁面。
• 忘記密碼：點擊后設置動態面板為通過短信重置密碼頁面。

3. 掃碼登錄

材料

• 動態面板（短信登錄、賬密登錄、掃碼登錄）
• 二維碼圖片
• 按鈕：點擊查看登錄成功效果、微信登錄按鈕、支付寶登錄按鈕

如下圖所示擺放：

交互事件

• 點擊（短信登錄、賬密登錄、掃碼登錄）時：設置動態面板到對應的頁面。
• 點擊查看登錄成功效果：這里模擬成功登錄的效果，鼠標單擊時，顯示登錄成功，并進入首頁。
• 立即注冊按鈕：點擊后設置動態面板為短信注冊頁面。
• 忘記密碼：點擊后設置動態面板為通過短信重置密碼頁面。

4. 短信注冊

材料

• 動態面板（短信注冊、賬密注冊、掃碼注冊）
• 輸入框：手機號碼輸入框、短信驗證碼輸入框、密碼輸入框
• 按鈕：注冊按鈕，馬上登錄按鈕、發送驗證碼按鈕
• 密碼賬號中繼器

如下圖所示擺放：

交互事件

• 點擊（短信注冊、賬密注冊、掃碼注冊）時：設置動態面板到對應的頁面。
• 手機號碼輸入框：設置文本框格式為number，輸入結束時需要判斷是否為11位的手機號碼。如果不是，提示文字內容為請輸入11位手機號碼。如果是11位數時，需要判斷手機號是否已存在，通過按輸入的手機號碼對賬號密碼中繼器進行篩選，如果中繼器可見條數>0，則手機號已注冊，提示用戶，手機號碼已注冊。
• 發送驗證碼按鈕：如果手機號碼輸入正確，且未注冊，啟用發送驗證碼按鈕。點擊該按鈕是，系統生成一個6位數的隨機驗證碼，這里需要用到radom函數。如果手機號碼輸入不正確或未輸入，設置提示文字，請輸入11位手機號碼。
• 密碼輸入框：這里的話需要設置密碼長度為8-20位，必須含數字和英文，這是一般系統密碼的要求，如有特殊要求可以自行設置，如果密碼格式不正確，設置提示文字內容為請輸入8-20位含數字和英文的密碼。
• 注冊按鈕：點擊時，首先判斷手機號碼是否正確。如不正確，設置設置提示文字內容為請輸入11位手機號碼，再判斷手機號碼是否已注冊。如果未注冊，接著判斷短信驗證碼輸入框的文字與隨機生成的6位數是否一致，如果一致，最后判斷密碼格式是否正確，如果正確顯示登錄成功的彈窗，并且進入首頁。
• 馬上登錄按鈕：點擊該按鈕設置動態面板頁面為短信登錄頁面。

5. 賬密注冊

材料

• 動態面板（短信注冊、賬密注冊、掃碼注冊）
• 輸入框：賬號輸入框、密碼輸入框、確認密碼輸入框
• 按鈕：注冊按鈕，馬上登錄按鈕
• 密碼賬號中繼器

如下圖所示擺放：

交互事件

• 點擊（短信注冊、賬密注冊、掃碼注冊）時：設置動態面板到對應的頁面。
• 賬號輸入框：失去焦點時，需要判斷賬號是否已存在，通過按輸入的賬號對賬號密碼中繼器進行篩選，如果中繼器可見條數>0，則賬號已注冊，提示用戶，賬號已注冊。
• 密碼輸入框：這里的話需要設置密碼長度為8-20位，必須含數字和英文，這是一般系統密碼的要求，如有特殊要求可以自行設置，如果密碼格式不正確，設置提示文字內容為請輸入8-20位含數字和英文的密碼。
• 確認密碼輸入框：輸入的密碼需要和密碼輸入框的一致，如果不一致，設置提示文字為兩次輸入的密碼不一致，請重新輸入。
• 注冊按鈕：點擊時，首先判斷賬號是否已注冊。如果未注冊，接著判斷密碼格式是否正確；如果正確，最后判斷兩次密碼輸入是否一致。如果一致，顯示登錄成功的彈窗，并且進入首頁。
• 馬上登錄按鈕：點擊該按鈕設置動態面板頁面為賬密登錄頁面。

6. 郵箱注冊

材料

• 動態面板（短信注冊、賬密注冊、掃碼注冊）
• 輸入框：郵箱輸入框、驗證碼輸入框、密碼輸入框
• 按鈕：注冊按鈕，馬上登錄按鈕、發送驗證碼按鈕
• 密碼賬號中繼器

如下圖所示擺放：

交互事件

• 點擊（短信注冊、賬密注冊、掃碼注冊）時：設置動態面板到對應的頁面。
• 電子郵箱輸入框：輸入結束時需要判斷是否電子郵箱地址是否正確。如果不正確，提示文字內容為請輸入正確的電子郵箱地址；如果正確，需要判斷電子郵箱是否已存在。通過按輸入的電子郵箱對賬號密碼中繼器進行篩選，如果中繼器可見條數>0，則電子郵箱已注冊，提示用戶，電子郵箱已注冊。
• 發送驗證碼按鈕：如果電子郵箱輸入正確，且未注冊，啟用發送驗證碼按鈕。點擊該按鈕是，系統生成一個6位數的隨機驗證碼，這里需要用到radom函數。如果電子郵箱輸入不正確或未輸入，設置提示文字，請輸入正確的電子郵箱地址。
• 密碼輸入框：這里的話需要設置密碼長度為8-20位，必須含數字和英文，這是一般系統密碼的要求，如有特殊要求可以自行設置，如果密碼格式不正確，設置提示文字內容為請輸入8-20位含數字和英文的密碼。
• 注冊按鈕：點擊時，首先判斷電子郵箱地址是否正確。如不正確，設置設置提示文字內容為請輸入正確的電子郵箱地址，再判斷電子郵箱地址是否已注冊。如果未注冊，接著判斷電子郵箱驗證碼輸入框的文字與隨機生成的6位數是否一致，如果一致，最后判斷密碼格式是否正確，如果正確顯示登錄成功的彈窗，并且進入首頁。
• 馬上登錄按鈕：點擊該按鈕設置動態面板頁面為短信登錄頁面。

7. 通過短信找回密碼

材料

• 動態面板（短信重置密碼、郵箱重置密碼）
• 輸入框：手機號碼輸入框、短信驗證碼輸入框、密碼輸入框
• 按鈕：立即注冊按鈕，重置密碼按鈕，馬上登錄按鈕、發送驗證碼按鈕
• 密碼賬號中繼器

如下圖所示擺放：

交互事件

• 點擊短信重置密碼、郵箱重置密碼時：設置動態面板到對應的頁面。
• 手機號碼輸入框：設置文本框格式為number，輸入結束時需要判斷是否為11位的手機號碼。如果不是，提示文字內容為請輸入11位手機號碼。如果是11位數時，需要判斷手機號是否已存在，通過按輸入的手機號碼對賬號密碼中繼器進行篩選。如果中繼器可見條數=0，則手機號未注冊，提示用戶，該手機號碼未注冊。
• 發送驗證碼按鈕：如果手機號碼輸入正確，且已經注冊，啟用發送驗證碼按鈕。點擊該按鈕時，系統生成一個6位數的隨機驗證碼，這里需要用到radom函數。如果手機號碼輸入不正確或未輸入，設置提示文字，請輸入11位手機號碼。
• 密碼輸入框：這里的話需要設置密碼長度為8-20位，必須含數字和英文，這是一般系統密碼的要求，如有特殊要求可以自行設置，如果密碼格式不正確，設置提示文字內容為請輸入8-20位含數字和英文的密碼。
• 注冊按鈕：點擊時，首先判斷手機號碼是否正確。如不正確，設置設置提示文字內容為請輸入11位手機號碼，再判斷手機號碼是否已注冊。如果已注冊，接著判斷短信驗證碼輸入框的文字與隨機生成的6位數是否一致，如果一致，最后判斷密碼格式是否正確，如果正確，這里先要更新中繼器該手機號對應的密碼行，然后顯示登錄成功的彈窗，并且進入首頁。
• 馬上登錄按鈕：點擊該按鈕設置動態面板頁面為短信登錄頁面。

8. 通過郵箱找回密碼

材料

• 動態面板（短信重置密碼、郵箱重置密碼）
• 輸入框：郵箱輸入框、驗證碼輸入框、密碼輸入框
• 按鈕：立即注冊按鈕，馬上登錄按鈕、發送驗證碼按鈕
• 密碼賬號中繼器

如下圖所示擺放：

交互事件

• 點擊（短信注冊、賬密注冊、掃碼注冊）時：設置動態面板到對應的頁面。
• 電子郵箱輸入框：輸入結束時需要判斷是否電子郵箱地址是否正確。如果不正確，提示文字內容為請輸入正確的電子郵箱地址；如果正確，需要判斷電子郵箱是否已存在，通過按輸入的電子郵箱對賬號密碼中繼器進行篩選，如果中繼器可見條數=0，則電子郵箱未注冊，提示用戶，電子郵箱未注冊。
• 發送驗證碼按鈕：如果電子郵箱輸入正確，且已注冊，啟用發送驗證碼按鈕。點擊該按鈕時，系統生成一個6位數的隨機驗證碼，這里需要用到radom函數。如果電子郵箱輸入不正確或未輸入，設置提示文字，請輸入正確的電子郵箱地址。
• 密碼輸入框：這里的話需要設置密碼長度為8-20位，必須含數字和英文。這是一般系統密碼的要求，如有特殊要求可以自行設置，如果密碼格式不正確，設置提示文字內容為請輸入8-20位含數字和英文的密碼。
• 注冊按鈕：點擊時，首先判斷電子郵箱地址是否正確。如不正確，設置設置提示文字內容為請輸入正確的電子郵箱地址；再判斷電子郵箱地址是否已注冊；如果已注冊，接著判斷電子郵箱驗證碼輸入框的文字與隨機生成的6位數是否一致，如果一致，最后判斷密碼格式是否正確。如果正確，這里先要更新中繼器該電子郵箱對應的密碼行，然后顯示登錄成功的彈窗，并且進入首頁。
• 馬上登錄按鈕：點擊該按鈕設置動態面板頁面為短信登錄頁面。

這樣就制作完成了。喜歡該原型的小伙伴們點個訂閱，也可以在評論處給我留言哦。

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

題圖來自 Unsplash，基于CC0協議