欧洲杯几年举办一次,湖人总冠军段子,国米vs佛罗伦萨,湖人掘金西部决赛,极速nba,历年nba总冠军

圖片版權所屬：站長之家

注冊和登錄作為互聯網產品的一項基礎系統功能，本文將從原型及交互設計的角度講述如何實現這兩項基礎功能，如果想學習注冊和登錄的產品功能設計，可以參考我之前寫的一片文章《注冊登錄可能沒你想的那么簡單》。

注冊

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端產品的設計經驗，關注區塊鏈及人工智能的技術發展及應用場景探索。