Axure教程：Web端登錄、註冊、找回密碼原型設計
上次和大家分享瞭如何製作手機端的登錄註冊原型，《Axure教程：一個通用的app註冊/登錄頁
所以今天就和大家分享一下怎麼樣用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位數是否一致，如果一致，最後判斷密碼格式是否正確。如果正確，這裏先要更新中繼器該電子郵箱對應的密碼行，然後顯示登錄成功的彈窗，並且進入首頁。