1. 0411-39943997
    工作時間:周一至周日 8:30-17:30
    技術文庫
    Technical Library

    H5手機端網站/APP/小程序注冊、登錄、找回密碼模塊的設計構思

    標簽: APP開發   訪問: 3312022-05-25

    一、注冊模塊的設計構思

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

    1. 手機號注冊賬號

    設計說明:

    1)輸入手機號、驗證碼、密碼(均為必填)

    • 輸入密碼:輸入密碼時輸入框右側出現“顯示/隱藏icon”,默認密碼顯示狀態,點擊可切換隱藏狀態;

    • 輸入手機號、驗證碼:輸入手機號、驗證碼時輸入框右側出現“清空icon”,點擊清空按鈕后將已輸入的內容清空;

    • 輸入框字數限制:手機號:11位;密碼:大于等于8位,不超過20位;

    • 輸入手機號、驗證碼時喚起數字鍵盤;輸入密碼時喚起全鍵盤;

    • 兩次密碼輸入不一致:兩次輸入的密碼不一致,請重新輸入。

    2)手機號、驗證碼、密碼校驗:

    • 手機號格式錯誤:提示用戶“請輸入正確的手機號”;

    • 手機號重復注冊:提示用戶“該手機號碼已被注冊“;

    • 密碼格式錯誤:提示用戶“密碼至少八位,同時包含數字以及字母”;

    • 未填寫手機號,獲取驗證碼按鈕置灰,不允許點擊;

    • 點擊驗證碼按鈕,自動發送短信驗證碼并提示用戶“驗證碼已發送,5分鐘內輸入有效”;

    • 驗證碼不正確:提示用戶“驗證碼不正確,請重新輸入”。

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

    4)單個手機號,單日接收驗證碼的次數和頻率限制:

    • 驗證碼接收次數:1h內不得超過5次,若超過5次,用戶點擊獲取驗證碼的按鈕后彈窗提示“獲取驗證碼次數已達上限,請一個小時后再試”;

    • 獲取驗證碼的時間間隔為60s,有效期5min,點擊獲取驗證碼按鈕后,按鈕文字變為“重新獲?。?9s)”并倒計時;

    • 若多次獲取驗證碼,僅最后一次獲取的驗證碼有效。

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

    2. 用戶名注冊賬號

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

    3. 郵箱注冊賬號(無需驗證郵箱的注冊方式)

    設計說明:

    1)輸入郵箱、密碼(均為必填)

    • 輸入郵箱:輸入郵箱時輸入框右側出現“清空icon”,點擊清空按鈕后將已輸入的內容清空;

    • 輸入密碼:輸入密碼時輸入框右側出現“顯示/隱藏icon”,默認密碼顯示狀態,點擊可切換隱藏狀態;

    • 輸入框字數限制:密碼:大于等于8位,不超過20位;

    • 輸入郵箱、密碼時喚起全鍵盤;

    • 兩次密碼輸入不一致:兩次輸入的密碼不一致,請重新輸入。

    2)郵箱、密碼校驗:

    • 郵箱格式錯誤:提示用戶“請輸入正確的郵箱”;

    • 郵箱重復注冊:提示用戶“該郵箱已被注冊“;

    • 密碼格式錯誤:提示用戶“密碼至少八位,同時包含數字以及字母”;

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

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

    4. 郵箱注冊賬號(需驗證郵箱的注冊方式)

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

    設計說明:

    1)輸入郵箱、驗證碼、密碼(均為必填)

    • 輸入郵箱、驗證碼:輸入郵箱、驗證碼時輸入框右側出現“清空icon”,點擊清空按鈕后將已輸入的內容清空;

    • 輸入密碼:輸入密碼時輸入框右側出現“顯示/隱藏icon”,默認密碼顯示狀態,點擊可切換隱藏狀態;

    • 輸入框字數限制:密碼:大于等于8位,不超過20位;

    • 輸入驗證碼時喚起數字鍵盤;輸入郵箱、密碼時喚起全鍵盤。

    2)郵箱、驗證碼、密碼校驗:

    • 郵箱格式錯誤:提示用戶“請輸入正確的郵箱”;

    • 郵箱重復注冊:提示用戶“該郵箱已被注冊“;

    • 密碼格式錯誤:提示用戶“密碼至少八位,同時包含數字以及字母”;

    • 未填寫郵箱,獲取驗證碼按鈕置灰,不允許點擊;

    • 點擊驗證碼按鈕,自動發送郵箱驗證碼并提示用戶“驗證碼已發送,5分鐘內輸入有效”;

    • 驗證碼不正確:提示用戶“驗證碼不正確,請重新輸入”。

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

    4)單個郵箱,單日接收驗證碼的次數和頻率限制:

    • 驗證碼接收次數:1h內不得超過5次,若超過5次,用戶點擊獲取驗證碼的按鈕后彈窗提示“獲取驗證碼次數已達上限,請一個小時后再試”;

    • 獲取驗證碼的時間間隔為60s,有效期5min,點擊獲取驗證碼按鈕后,按鈕文字變為“重新獲?。?9s)”并倒計時;

    • 若多次獲取驗證碼,僅最后一次獲取的驗證碼有效。

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

    5. 第三方賬號授權

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

    • 用戶點擊“微信授權登錄”,打開微信app,調起授權用戶微信個人信息頁面,用戶點擊同意/拒絕;

    • 點擊拒絕則登錄失??;

    • 點擊同意則登錄成功。

    二、登錄模塊的設計構思 1. 用戶名+密碼登錄

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

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

    3)賬號被停用:提示用戶“賬號已被停用,請聯系管理員!”。

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

    5)退出登錄:點擊退出登錄按鈕后則退出到登錄頁。

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

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

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

    2)用戶點擊“發送驗證碼”按鈕后,提示“驗證碼已發送”。

    3)驗證碼校驗:輸入的驗證碼錯誤,提示“驗證碼不正確,請重新輸入”。

    4)單個手機號,單日接收驗證碼的次數和頻率限制:

    • 驗證碼接收次數:1h內不得超過5次,若超過5次,用戶點擊獲取驗證碼的按鈕后彈窗提示“獲取驗證碼次數已達上限,請一個小時后再試!”;

    • 獲取驗證碼的時間間隔為60s,有效期5min,點擊獲取驗證碼按鈕后,按鈕文字變為“重新獲?。?9s)”;

    • 若多次獲取驗證碼,僅最后一次獲取的驗證碼有效;

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

    6)賬號被停用:提示用戶“賬號已被停用,請聯系管理員!”。

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

    8)退出登錄:點擊退出登錄按鈕后則退出到登錄頁。

    手機號+密碼登錄方式:

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

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

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

    4)賬號被停用:提示用戶“賬號已被停用,請聯系管理員!”。

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

    6)退出登錄:點擊退出登錄按鈕后則退出到登錄頁。

    3. 郵箱+密碼

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

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

    3)賬號被停用:提示用戶“賬號已被停用,請聯系管理員!”。

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

    5)退出登錄:點擊退出登錄按鈕后則退出到登錄頁。

    4. 第三方賬號授權登錄

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

    5. 游客登錄

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

    三、找回密碼模塊的設計構思 1. 手機號找回密碼

    1)輸入手機號、驗證碼、密碼、再次輸入密碼(均為必填):

    • 輸入密碼:輸入密碼時輸入框右側出現“顯示/隱藏icon”,默認密碼隱藏狀態;

    • 輸入手機號、驗證碼、密碼時輸入框右側出現“清空icon”,點擊清空按鈕后將已輸入的內容清空;

    • 輸入框字數限制:手機號:11位;密碼:大于等于6位,不超過20位;

    2)手機號、密碼、短信驗證碼校驗:

    • 手機號格式錯誤或手機號不存在:提示用戶“請輸入正確的手機號!”;

    • 未填寫手機號,獲取驗證碼按鈕置灰,不允許點擊;

    • 點擊驗證碼按鈕,自動發送短信驗證碼并提示用戶“驗證碼已發送,5min內輸入有效”;

    • 短信驗證碼不正確:提示用戶“短信驗證碼不正確,請重新輸入!”;

    • 密碼格式錯誤:提示用戶“請輸入6-20個字符的密碼”;

    • 兩次密碼輸入不一致:兩次輸入的密碼不一致,請重新輸入;

    3)單個手機號,單日接收驗證碼的次數和頻率限制:

    • 驗證碼接收次數:1h內不得超過5次,若超過5次,用戶點擊獲取驗證碼的按鈕后彈窗提示“獲取驗證碼次數已達上限,請一個小時后再試!”;

    • 獲取驗證碼的時間間隔為60s,有效期5min,點擊獲取驗證碼按鈕后,按鈕文字變為“重新獲?。?9s)”;

    • 若多次獲取驗證碼,僅最后一次獲取的驗證碼有效;

    4)找回密碼成功:提示用戶“密碼重置成功!”,并跳轉至“xxx”頁面。

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

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

    2. 郵箱找回密碼

    1)輸入郵箱、驗證碼、密碼、再次輸入密碼(均為必填):

    • 輸入密碼:輸入密碼時輸入框右側出現“顯示/隱藏icon”,默認密碼隱藏狀態;

    • 輸入郵箱、驗證碼、密碼時輸入框右側出現“清空icon”,點擊清空按鈕后將已輸入的內容清空;

    • 輸入框字數限制:密碼:大于等于6位,不超過20位;

    2)郵箱、密碼、短信驗證碼校驗:

    • 郵箱格式錯誤或手機號不存在:提示用戶“請輸入正確的郵箱”;

    • 未填寫郵箱,獲取驗證碼按鈕置灰,不允許點擊;

    • 點擊驗證碼按鈕,自動發送短信驗證碼并提示用戶“驗證碼已發送,5分鐘內輸入有效”;

    • 郵箱驗證碼不正確:提示用戶“驗證碼不正確,請重新輸入”;

    • 密碼格式錯誤:提示用戶“請輸入6-20個字符的密碼”;

    • 兩次密碼輸入不一致:提示用戶“兩次輸入的密碼不一致,請重新輸入”;

    3)單個郵箱,單日接收驗證碼的次數和頻率限制:

    • 驗證碼接收次數:1h內不得超過5次,若超過5次,用戶點擊獲取驗證碼的按鈕后彈窗提示“獲取驗證碼次數已達上限,請一個小時后再試”;

    • 獲取驗證碼的時間間隔為60s,有效期5min,點擊獲取驗證碼按鈕后,按鈕文字變為“重新獲?。?9s)”;

    • 若多次獲取驗證碼,僅最后一次獲取的驗證碼有效;

    4)找回密碼成功:提示用戶“密碼重置成功”,并跳轉至“xxx”頁面。

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

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


    Copyright? 2020 仟億科技,All rights reserved.
    国产3D征服美艳的护士动画