Axure案例：超逼真模擬註冊登入
註冊和登入作為網際網路產品的一項基礎系統功能，本文將從原型及互動設計的角度講述如何實現這兩項基礎功能，如果想學習註冊和登入的產品功能設計，可以參考我之前寫的一片文章 《註冊登入可能沒你想的那麼簡單》 。
註冊
1. 期望互動效果
賬號：
- 賬號輸入框只能輸入11位數字，超過11位則無法輸入；
- 假設手機號13301182876已被註冊，則提示：該賬號已被註冊；
- 假設輸入11個1時，系統判斷不是手機號，則提示：請輸入正確的手機號；
- 賬號輸入為空，則提示：請輸入手機號。
密碼：
- 密碼為空，提示：請設定密碼；
- 密碼設定錯誤，提示：請輸入6-12位的字母、數字（密碼設定的要求）。
簡訊驗證碼：
- 驗證碼為空，提示：請填寫驗證碼；
- 輸入錯誤的驗證碼，提示：請輸入正確的驗證碼（假設正確的驗證碼是0258）；
- 假設1分鐘後驗證碼過期（為了模擬互動效果，縮短過期時間），提示：驗證碼已過期，請重新獲取。
2. 元件準備
首先利用元件文字標籤、文字框、按鈕等基礎元件快速搭建好註冊頁面的線框圖，將賬號介面的輸入框屬性設定為phone number，限制只能輸入數字。密碼文字框的屬性設定為密碼，對密碼的顯示進行加密，視覺上看到的都是星號。
將賬號、簡訊、驗證碼的提示資訊放置在各輸入項的下方，預設隱藏。
3. 互動思路分析
賬號 ：通過文字改變事件限制賬號輸入框只能輸入11位數字，即當賬號文字框中的文字長度大於11位時，則賬號文字框的值為=[[LVAR1.substr(0,11)]]，其中區域性變數LVAR1為賬號文字框的文字。函式表示式的意思為針對賬號文字框的文字，從0位開始，擷取前11位長度的字串內容，原函式為substr(start,length)。
為賬號文字框設定失去焦點事件並配置多個用例，實現各種提示效果。
用例設定如下：
- 用例一： 當賬號文字框文字=13301182876，提示文字內容為“該賬號已被註冊”，顯示賬號提示資訊；
- 用例二： 當賬號文字框文字=11111111111，提示文字內容為“請輸入正確的手機號”，顯示賬號提示資訊；
- 用例三： 當賬號文字框內容為空時，提示文字內容為“請輸入手機號”，顯示賬號提示資訊；
- 用例四： 隱藏提示資訊。
密碼 ：通過文字改變事件限制密碼輸入框只能輸入12位，即當密碼文字框中的文字長度大於12位時，則密碼文字框的值為=[[LVAR1.substr(0,12)]]，其中區域性變數LVAR1為密碼文字框的文字。函式的用法與解釋請參照上文賬號輸入框的限制。
通過為密碼文字框設定多個失去焦點用例，來實現各種密碼錯誤情況的提示。
幾個用例的設定方法如下：
- 用例一： 當密碼文字框內容為空時，提示“請設定密碼”，顯示密碼提示資訊；
- 用例二： 當密碼文字框的內容=111111111111，提示“請輸入6-12位的字母、數字”，顯示密碼提示資訊；
- 用例三： 隱藏密碼提示資訊。
簡訊驗證碼：
為註冊按鈕設定4個滑鼠單擊事件用例，設定如下：
- 用例一： 當簡訊驗證碼文字框內容為空時，提示“請填寫驗證碼”，顯示驗證碼提示資訊；
- 用例二： 當簡訊驗證碼文字框內容≠0258時，提示“請輸入正確的驗證碼”，顯示驗證碼提示資訊；
- 用例三： 當簡訊碼下發時間超過1分鐘時（假設1分鐘超時過期），則提示“驗證碼已過期，請重新獲取”，顯示驗證碼提示資訊；
- 用例四： 隱藏驗證碼提示資訊。
登入
1. 期望互動效果
賬號：
- 只能輸入數字，且限制為11位；
- 賬號為空，提示：請輸入賬號；
- 假設輸入11個1為錯誤賬號，提示：賬號不存在，請重新輸入。
密碼：
- 密碼長度限制在6-12位；
- 密碼為空，提示：請輸入密碼；
- 假設輸入錯誤密碼ceshi1111，提示：密碼與賬戶名不匹配，請檢查密碼。
元件準備工作同註冊頁面一致，不在此重複說明
2. 互動思路分析
賬號 ：通過文字改變事件限制賬號輸入框只能輸入11位數字，即當賬號文字框中的文字長度大於11位時，則賬號文字框的值為=[[LVAR1.substr(0,11)]]，其中區域性變數LVAR1為賬號文字框的文字。函式表示式的意思為針對賬號文字框的文字，從0位開始，擷取前11位長度的內容，原函式為substr(start,length)。
為賬號文字框設定失去焦點事件的3個用例，設定如下：
- 用例一：當賬號文字框內容為空時，提示文字內容為“請輸入賬號”，顯示賬號提示資訊；
- 用例二：當賬號文字框內容=11111111111，提示文字內容為“賬號不存在，請重新輸入”，顯示賬號提示資訊；
- 用例三：隱藏賬號提示資訊。
密碼 ：通過文字改變事件限制密碼輸入框只能輸入12位，即當密碼文字框中的文字長度大於12位時，則密碼文字框的值為=[[LVAR1.substr(0,12)]]，其中區域性變數LVAR1為密碼文字框的文字。函式的用法與解釋請參照上文賬號輸入框的限制。
為密碼文字框設定失去焦點事件並配置多個用例，用例配置如下：
- 用例一：當密碼文字框內容為空時，提示“請輸入密碼”，顯示密碼提示資訊；
- 用例二：當密碼文字框的內容=111111111111，提示“賬戶名與密碼不匹配，請檢查密碼”，顯示密碼提示資訊；
- 用例三：隱藏密碼提示資訊。
結語
以上便於關於註冊和登入頁面中的各種互動提示及輸入限制的實現思路與方法，點選預覽檢視效果，預祝同學們也可以自己動手實現註冊登入的高保效果哦。
#專欄作家#
拼搏的80後，人人都是產品經理專欄作家。10年網際網路從業經歷，具有各型別B端、C端產品的設計經驗，關注區塊鏈及人工智慧的技術發展及應用場景探索。
本文原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖作者提供