編輯導語：我們在使用很多產品時，首先都會經歷的就是注冊登錄這一步，從以前的手機號、郵箱等方式，到現在的第三方直接授權登錄，也是用戶登錄系統(tǒng)的一種轉變；本文作者分享了關于注冊登錄找回密碼模塊的設計構思，我們一起來了解一下。

一、注冊模塊的設計構思

用戶登陸注冊系統(tǒng)分為兩大類，一類是自建用戶系統(tǒng)（例如：手機號、用戶名、郵箱），另一類是第三方賬號授權用戶系統(tǒng)（例如：微信、支付寶、淘寶等）。

1. 手機號注冊賬號

設計說明：

1）輸入手機號、驗證碼、密碼（均為必填）

• 輸入密碼：輸入密碼時輸入框右側出現“顯示/隱藏icon”，默認密碼顯示狀態(tài)，點擊可切換隱藏狀態(tài)；
• 輸入手機號、驗證碼：輸入手機號、驗證碼時輸入框右側出現“清空icon”，點擊清空按鈕后將已輸入的內容清空；
• 輸入框字數限制：手機號：11位；密碼：大于等于8位，不超過20位；
• 輸入手機號、驗證碼時喚起數字鍵盤；輸入密碼時喚起全鍵盤；
• 兩次密碼輸入不一致：兩次輸入的密碼不一致，請重新輸入。

2）手機號、驗證碼、密碼校驗：

• 手機號格式錯誤：提示用戶“請輸入正確的手機號”；
• 手機號重復注冊：提示用戶“該手機號碼已被注冊“；
• 密碼格式錯誤：提示用戶“密碼至少八位，同時包含數字以及字母”；
• 未填寫手機號，獲取驗證碼按鈕置灰，不允許點擊；
• 點擊驗證碼按鈕，自動發(fā)送短信驗證碼并提示用戶“驗證碼已發(fā)送，5分鐘內輸入有效”；
• 驗證碼不正確：提示用戶“驗證碼不正確，請重新輸入”。

3）勾選用戶服務協議：未勾選用戶服務協議不允許注冊，提示用戶“請閱讀并勾選用戶服務協議”。

4）單個手機號，單日接收驗證碼的次數和頻率限制：

• 驗證碼接收次數：1h內不得超過5次,若超過5次，用戶點擊獲取驗證碼的按鈕后彈窗提示“獲取驗證碼次數已達上限，請一個小時后再試”；
• 獲取驗證碼的時間間隔為60s,有效期5min，點擊獲取驗證碼按鈕后，按鈕文字變?yōu)椤爸匦芦@?。?9s）”并倒計時；
• 若多次獲取驗證碼，僅最后一次獲取的驗證碼有效。

5）注冊成功后自動登錄，跳轉至“xxxxx”界面（或返回至原頁面，若用戶在“我的”頁面觸發(fā)登錄，則登錄成功后返回至“我的”頁面）。

2. 用戶名注冊賬號

在自建用戶系統(tǒng)中，用戶名 + 密碼的這種注冊方式已經很少見了，這種方式有很大的弊端，若用戶忘記用戶名或密碼就找不回賬號了；通常會將用戶名+密碼與手機號或郵箱結合，忘記密碼可以通過手機號或郵箱找回，將文中提到的手機號注冊賬號或郵箱注冊賬號加個“用戶名”字段即可，該文章就不詳細講解。

3. 郵箱注冊賬號（無需驗證郵箱的注冊方式）

設計說明：

1）輸入郵箱、密碼（均為必填）

• 輸入郵箱：輸入郵箱時輸入框右側出現“清空icon”，點擊清空按鈕后將已輸入的內容清空；
• 輸入密碼：輸入密碼時輸入框右側出現“顯示/隱藏icon”，默認密碼顯示狀態(tài)，點擊可切換隱藏狀態(tài)；
• 輸入框字數限制：密碼：大于等于8位，不超過20位；
• 輸入郵箱、密碼時喚起全鍵盤；
• 兩次密碼輸入不一致：兩次輸入的密碼不一致，請重新輸入。

2）郵箱、密碼校驗：

• 郵箱格式錯誤：提示用戶“請輸入正確的郵箱”；
• 郵箱重復注冊：提示用戶“該郵箱已被注冊“；
• 密碼格式錯誤：提示用戶“密碼至少八位，同時包含數字以及字母”；

3）勾選用戶服務協議：未勾選用戶服務協議不允許注冊，提示用戶“請閱讀并勾選用戶服務協議”。

4）注冊成功后自動登錄，跳轉至“xxxxx”界面（或返回至原頁面，若用戶在“我的”頁面觸發(fā)登錄，則登錄成功后返回至“我的”頁面）。

4. 郵箱注冊賬號（需驗證郵箱的注冊方式）

由于無需驗證郵箱的注冊方式存在著可能亂填寫郵箱，或郵箱填寫錯誤的情況，導致忘記密碼后無法找回賬號或郵箱真正的主人無法注冊，所以最好是在注冊時進行郵箱驗證。

設計說明：

1）輸入郵箱、驗證碼、密碼（均為必填）

• 輸入郵箱、驗證碼：輸入郵箱、驗證碼時輸入框右側出現“清空icon”，點擊清空按鈕后將已輸入的內容清空；
• 輸入密碼：輸入密碼時輸入框右側出現“顯示/隱藏icon”，默認密碼顯示狀態(tài)，點擊可切換隱藏狀態(tài)；
• 輸入框字數限制：密碼：大于等于8位，不超過20位；
• 輸入驗證碼時喚起數字鍵盤；輸入郵箱、密碼時喚起全鍵盤。

2）郵箱、驗證碼、密碼校驗：

• 郵箱格式錯誤：提示用戶“請輸入正確的郵箱”；
• 郵箱重復注冊：提示用戶“該郵箱已被注冊“；
• 密碼格式錯誤：提示用戶“密碼至少八位，同時包含數字以及字母”；
• 未填寫郵箱，獲取驗證碼按鈕置灰，不允許點擊；
• 點擊驗證碼按鈕，自動發(fā)送郵箱驗證碼并提示用戶“驗證碼已發(fā)送，5分鐘內輸入有效”；
• 驗證碼不正確：提示用戶“驗證碼不正確，請重新輸入”。

3）勾選用戶服務協議：未勾選用戶服務協議不允許注冊，提示用戶“請閱讀并勾選用戶服務協議”。

4）單個郵箱，單日接收驗證碼的次數和頻率限制：

• 驗證碼接收次數：1h內不得超過5次,若超過5次，用戶點擊獲取驗證碼的按鈕后彈窗提示“獲取驗證碼次數已達上限，請一個小時后再試”；
• 獲取驗證碼的時間間隔為60s,有效期5min，點擊獲取驗證碼按鈕后，按鈕文字變?yōu)椤爸匦芦@?。?9s）”并倒計時；
• 若多次獲取驗證碼，僅最后一次獲取的驗證碼有效。

5）注冊成功后自動登錄，跳轉至“xxxxx”界面（或返回至原頁面，若用戶在“我的”頁面觸發(fā)登錄，則登錄成功后返回至“我的”頁面）。

5. 第三方賬號授權

通過第三方賬號授權的方式進行登錄并獲取用戶信息（openid、頭像、昵稱、地區(qū)、性別、手機號），省去用戶注冊步驟，以下以“微信授權”為例子講述。

• 用戶點擊“微信授權登錄”，打開微信app，調起授權用戶微信個人信息頁面，用戶點擊同意/拒絕；
• 點擊拒絕則登錄失?。?/li>
• 點擊同意則登錄成功。

二、登錄模塊的設計構思

1. 用戶名+密碼登錄

1）輸入用戶名、密碼，點擊登錄；未輸入用戶名和密碼時，“登錄”按鈕置灰，不允許點擊；已輸入用戶名和密碼，“登錄”按鈕為可點擊狀態(tài)；輸入用戶名、密碼時，喚起全鍵盤；輸入用戶名、密碼時，輸入框右側出現“清空icon”，點擊清空按鈕后將已輸入的內容清空；密碼輸入框右側設計“顯示/隱藏icon”，默認密碼隱藏狀態(tài)。

2）用戶名、密碼校驗：密碼或用戶名不存在/不匹配，則提示用戶“用戶名與密碼不匹配，請重新輸入”。

3）賬號被停用：提示用戶“賬號已被停用，請聯系管理員！”。

4）登錄成功后進入首頁。

5）退出登錄：點擊退出登錄按鈕后則退出到登錄頁。

2. 手機號+密碼/驗證碼

手機號+驗證碼登錄方式：

1）輸入手機號、驗證碼，點擊登錄；未輸入手機號和驗證碼時，“登錄”按鈕置灰，不允許點擊；未輸入手機號時，“發(fā)送驗證碼”按鈕置灰，不允許點擊；已輸入手機號和驗證碼，“登錄”按鈕為可點擊狀態(tài)；輸入手機號和驗證碼時，喚起數字鍵盤；輸入手機號、驗證碼時，輸入框右側出現“清空icon”，點擊清空按鈕后將已輸入的內容清空。

2）用戶點擊“發(fā)送驗證碼”按鈕后，提示“驗證碼已發(fā)送”。

3）驗證碼校驗：輸入的驗證碼錯誤，提示“驗證碼不正確，請重新輸入”。

4）單個手機號，單日接收驗證碼的次數和頻率限制：

• 驗證碼接收次數：1h內不得超過5次,若超過5次，用戶點擊獲取驗證碼的按鈕后彈窗提示“獲取驗證碼次數已達上限，請一個小時后再試！”；
• 獲取驗證碼的時間間隔為60s,有效期5min，點擊獲取驗證碼按鈕后，按鈕文字變?yōu)椤爸匦芦@?。?9s）”；
• 若多次獲取驗證碼，僅最后一次獲取的驗證碼有效；

5）手機號格式錯誤或手機號不存在：提示用戶“請輸入正確的手機號”。

6）賬號被停用：提示用戶“賬號已被停用，請聯系管理員！”。

7）登錄成功后進入首頁。

8）退出登錄：點擊退出登錄按鈕后則退出到登錄頁。

手機號+密碼登錄方式：

1）輸入手機號、密碼，點擊登錄；未輸入手機號和密碼時，“登錄”按鈕置灰，不允許點擊；已輸入手機號和密碼，“登錄”按鈕為可點擊狀態(tài)；輸入手機號，喚起數字鍵盤；輸入密碼時，喚起全鍵盤；輸入手機號、密碼時，輸入框右側出現“清空icon”，點擊清空按鈕后將已輸入的內容清空；密碼輸入框右側設計“顯示/隱藏icon”，默認密碼隱藏狀態(tài)。

2）手機號格式錯誤：提示用戶“請輸入正確的手機號”。

3）手機號、密碼校驗：密碼或手機號不存在/不匹配，則提示用戶“手機號與密碼不匹配，請重新輸入”。

4）賬號被停用：提示用戶“賬號已被停用，請聯系管理員！”。

5）登錄成功后進入首頁。

6）退出登錄：點擊退出登錄按鈕后則退出到登錄頁。

3. 郵箱+密碼

1）輸入郵箱、密碼，點擊登錄；未輸入郵箱和密碼時，“登錄”按鈕置灰，不允許點擊；已輸入用戶名和密碼，“登錄”按鈕為可點擊狀態(tài)；輸入用戶名、密碼時，喚起全鍵盤；輸入郵箱、密碼時，輸入框右側出現“清空icon”，點擊清空按鈕后將已輸入的內容清空；密碼輸入框右側設計“顯示/隱藏icon”，默認密碼隱藏狀態(tài)。

2）郵箱、密碼校驗：密碼或郵箱不存在/不匹配，則提示用戶“郵箱與密碼不匹配，請重新輸入”。

3）賬號被停用：提示用戶“賬號已被停用，請聯系管理員！”。

4）登錄成功后進入首頁。

5）退出登錄：點擊退出登錄按鈕后則退出到登錄頁。

4. 第三方賬號授權登錄

前面注冊那塊已講述，這里不再進行講述

5. 游客登錄

讓用戶在先體驗后登錄，需在一些點擊后需登錄的頁面做觸發(fā)登錄的標記，即一些頁面可供用戶免登錄即可瀏覽，而有些頁面則需要登錄后才可以瀏覽。

三、找回密碼模塊的設計構思

1. 手機號找回密碼

1）輸入手機號、驗證碼、密碼、再次輸入密碼（均為必填）：

• 輸入密碼:輸入密碼時輸入框右側出現“顯示/隱藏icon”，默認密碼隱藏狀態(tài)；
• 輸入手機號、驗證碼、密碼時輸入框右側出現“清空icon”，點擊清空按鈕后將已輸入的內容清空；
• 輸入框字數限制：手機號：11位；密碼：大于等于6位，不超過20位；

2）手機號、密碼、短信驗證碼校驗：

• 手機號格式錯誤或手機號不存在：提示用戶“請輸入正確的手機號！”；
• 未填寫手機號，獲取驗證碼按鈕置灰，不允許點擊；
• 點擊驗證碼按鈕，自動發(fā)送短信驗證碼并提示用戶“驗證碼已發(fā)送，5min內輸入有效”；
• 短信驗證碼不正確：提示用戶“短信驗證碼不正確，請重新輸入！”；
• 密碼格式錯誤：提示用戶“請輸入6-20個字符的密碼”；
• 兩次密碼輸入不一致：兩次輸入的密碼不一致，請重新輸入；

3）單個手機號，單日接收驗證碼的次數和頻率限制：

• 驗證碼接收次數：1h內不得超過5次,若超過5次，用戶點擊獲取驗證碼的按鈕后彈窗提示“獲取驗證碼次數已達上限，請一個小時后再試！”；
• 獲取驗證碼的時間間隔為60s,有效期5min，點擊獲取驗證碼按鈕后，按鈕文字變?yōu)椤爸匦芦@?。?9s）”；
• 若多次獲取驗證碼，僅最后一次獲取的驗證碼有效；

4）找回密碼成功：提示用戶“密碼重置成功！”，并跳轉至“xxx”頁面。

5）手機號已停用，聯系客服：用戶在手機號已停用的情況下，可以點擊聯系客服，點擊“聯系客服”彈出“手機號碼”彈窗，點擊呼叫則喚醒手機撥號。

注：在手機號已停用等，接收不了驗證碼的情況下，可聯系客服驗證身份，客服在后臺修改密碼。

2. 郵箱找回密碼

1）輸入郵箱、驗證碼、密碼、再次輸入密碼（均為必填）：

• 輸入密碼:輸入密碼時輸入框右側出現“顯示/隱藏icon”，默認密碼隱藏狀態(tài)；
• 輸入郵箱、驗證碼、密碼時輸入框右側出現“清空icon”，點擊清空按鈕后將已輸入的內容清空；
• 輸入框字數限制：密碼：大于等于6位，不超過20位；

2）郵箱、密碼、短信驗證碼校驗：

• 郵箱格式錯誤或手機號不存在：提示用戶“請輸入正確的郵箱”；
• 未填寫郵箱，獲取驗證碼按鈕置灰，不允許點擊；
• 點擊驗證碼按鈕，自動發(fā)送短信驗證碼并提示用戶“驗證碼已發(fā)送，5分鐘內輸入有效”；
• 郵箱驗證碼不正確：提示用戶“驗證碼不正確，請重新輸入”；
• 密碼格式錯誤：提示用戶“請輸入6-20個字符的密碼”；
• 兩次密碼輸入不一致：提示用戶“兩次輸入的密碼不一致，請重新輸入”；

3）單個郵箱，單日接收驗證碼的次數和頻率限制：

• 驗證碼接收次數：1h內不得超過5次,若超過5次，用戶點擊獲取驗證碼的按鈕后彈窗提示“獲取驗證碼次數已達上限，請一個小時后再試”；
• 獲取驗證碼的時間間隔為60s,有效期5min，點擊獲取驗證碼按鈕后，按鈕文字變?yōu)椤爸匦芦@?。?9s）”；
• 若多次獲取驗證碼，僅最后一次獲取的驗證碼有效；

4）找回密碼成功：提示用戶“密碼重置成功”，并跳轉至“xxx”頁面。

5）郵箱已停用，聯系客服：用戶在手機號已停用的情況下，可以點擊聯系客服，點擊“聯系客服”彈出“手機號碼”彈窗，點擊呼叫則喚醒手機撥號。

注：在郵箱已停用等，接收不了驗證碼的情況下，可聯系客服驗證身份，客服在后臺修改密碼。

四、注銷賬號模塊的設計構思

1、用戶端注銷賬號界面，告知用戶注銷賬號的風險（例如下圖）

1）該賬號用戶個人資料將被情況：頭像、昵稱、實名認證…

2）該賬號綁定的第三方賬號、銀行卡、信用卡…

3）該賬號關聯的訂單記錄、瀏覽記錄、優(yōu)惠券記錄、消息記錄…

4）該賬號的余額等資金信息…

5）其他關聯信息

2、用戶點擊“已清楚風險，確定注銷”后，彈出二次確認彈窗

3、用戶點擊“立即注銷”，需校驗賬號是否存在未完成訂單，余額是否大于或等于0等等

1）若賬號存在未完成狀態(tài)的訂單，提示用戶“注銷申請?zhí)峤皇?，您存在未完成的訂單！?/p>

2）若賬號余額小于0，則提示用戶“注銷申請?zhí)峤皇。挠囝~為負
數，請先充值余額！”

3、校驗通過，則進入下一步，身份驗證，這里采用手機號+驗證碼驗證的方式

4、手機號驗證通過，點擊“確認注銷”，根據項目情況進行考慮，可確認注銷后直接注銷；也可設置凍結期，例如幾天后自動注銷，期間可以撤銷，以防用戶后悔。

1）注銷成功

2）設置凍結期

5、注銷成功后的數據處理

個人信息

1）頭像：賬號已被注銷的用戶頭像，變更為默認頭像

2）昵稱：變更為“賬號已注銷”

3）個人動態(tài)：清除，顯示用戶已注銷，不展示任何信息

4）與其他用戶/在平臺上的互動痕跡：保留

5）該賬號綁定的第三方賬號

金融信息

1）該賬號綁定的銀行卡、信用卡等：解除綁定

2）該賬號的余額：清空

訂單記錄、瀏覽記錄、優(yōu)惠券記錄、公告記錄等

1）后臺的用戶注冊記錄：保留，若用戶注銷則在用戶賬號旁邊括號備注“用戶已注銷”，用戶后續(xù)重新使用同一個手機號進行注冊，則給該賬號重新賦予一個新的ID，重新生成注冊記錄。

2）訂單記錄：保留，若用戶注銷則在用戶賬號旁邊括號備注“用戶已注銷”。

3）瀏覽記錄、優(yōu)惠券記錄、公告記錄：清空。

本文由 @水蜜桃 原創(chuàng)發(fā)布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。