注冊(cè)和登錄作為互聯(lián)網(wǎng)產(chǎn)品的一項(xiàng)基礎(chǔ)系統(tǒng)功能，本文將從原型及交互設(shè)計(jì)的角度講述如何實(shí)現(xiàn)這兩項(xiàng)基礎(chǔ)功能，如果想學(xué)習(xí)注冊(cè)和登錄的產(chǎn)品功能設(shè)計(jì)，可以參考我之前寫(xiě)的一片文章《注冊(cè)登錄可能沒(méi)你想的那么簡(jiǎn)單》。

注冊(cè)

1. 期望交互效果

賬號(hào)：

• 賬號(hào)輸入框只能輸入11位數(shù)字，超過(guò)11位則無(wú)法輸入；
• 假設(shè)手機(jī)號(hào)13301182876已被注冊(cè)，則提示：該賬號(hào)已被注冊(cè)；
• 假設(shè)輸入11個(gè)1時(shí)，系統(tǒng)判斷不是手機(jī)號(hào)，則提示：請(qǐng)輸入正確的手機(jī)號(hào)；
• 賬號(hào)輸入為空，則提示：請(qǐng)輸入手機(jī)號(hào)。

密碼：

• 密碼為空，提示：請(qǐng)?jiān)O(shè)置密碼；
• 密碼設(shè)置錯(cuò)誤，提示：請(qǐng)輸入6-12位的字母、數(shù)字（密碼設(shè)置的要求）。

短信驗(yàn)證碼：

• 驗(yàn)證碼為空，提示：請(qǐng)?zhí)顚?xiě)驗(yàn)證碼；
• 輸入錯(cuò)誤的驗(yàn)證碼，提示：請(qǐng)輸入正確的驗(yàn)證碼（假設(shè)正確的驗(yàn)證碼是0258）；
• 假設(shè)1分鐘后驗(yàn)證碼過(guò)期（為了模擬交互效果，縮短過(guò)期時(shí)間），提示：驗(yàn)證碼已過(guò)期，請(qǐng)重新獲取。

2. 元件準(zhǔn)備

首先利用元件文本標(biāo)簽、文本框、按鈕等基礎(chǔ)元件快速搭建好注冊(cè)頁(yè)面的線(xiàn)框圖，將賬號(hào)界面的輸入框?qū)傩栽O(shè)置為phone number，限制只能輸入數(shù)字。密碼文本框的屬性設(shè)置為密碼，對(duì)密碼的顯示進(jìn)行加密，視覺(jué)上看到的都是星號(hào)。

將賬號(hào)、短信、驗(yàn)證碼的提示信息放置在各輸入項(xiàng)的下方，默認(rèn)隱藏。

3. 交互思路分析

賬號(hào)：通過(guò)文本改變事件限制賬號(hào)輸入框只能輸入11位數(shù)字，即當(dāng)賬號(hào)文本框中的文字長(zhǎng)度大于11位時(shí)，則賬號(hào)文本框的值為=[[LVAR1.substr(0,11)]]，其中局部變量LVAR1為賬號(hào)文本框的文字。函數(shù)表達(dá)式的意思為針對(duì)賬號(hào)文本框的文字，從0位開(kāi)始，截取前11位長(zhǎng)度的字符串內(nèi)容，原函數(shù)為substr(start,length)。

為賬號(hào)文本框設(shè)置失去焦點(diǎn)事件并配置多個(gè)用例，實(shí)現(xiàn)各種提示效果。

用例設(shè)置如下：

• 用例一：當(dāng)賬號(hào)文本框文字=13301182876，提示文字內(nèi)容為“該賬號(hào)已被注冊(cè)”，顯示賬號(hào)提示信息；
• 用例二：當(dāng)賬號(hào)文本框文字=11111111111，提示文字內(nèi)容為“請(qǐng)輸入正確的手機(jī)號(hào)”，顯示賬號(hào)提示信息；
• 用例三：當(dāng)賬號(hào)文本框內(nèi)容為空時(shí)，提示文字內(nèi)容為“請(qǐng)輸入手機(jī)號(hào)”，顯示賬號(hào)提示信息；
• 用例四：隱藏提示信息。

密碼：通過(guò)文本改變事件限制密碼輸入框只能輸入12位，即當(dāng)密碼文本框中的文字長(zhǎng)度大于12位時(shí)，則密碼文本框的值為=[[LVAR1.substr(0,12)]]，其中局部變量LVAR1為密碼文本框的文字。函數(shù)的用法與解釋請(qǐng)參照上文賬號(hào)輸入框的限制。

通過(guò)為密碼文本框設(shè)置多個(gè)失去焦點(diǎn)用例，來(lái)實(shí)現(xiàn)各種密碼錯(cuò)誤情況的提示。

幾個(gè)用例的設(shè)置方法如下：

• 用例一：當(dāng)密碼文本框內(nèi)容為空時(shí)，提示“請(qǐng)?jiān)O(shè)置密碼”，顯示密碼提示信息；
• 用例二：當(dāng)密碼文本框的內(nèi)容=111111111111，提示“請(qǐng)輸入6-12位的字母、數(shù)字”，顯示密碼提示信息；
• 用例三：隱藏密碼提示信息。

短信驗(yàn)證碼：

為注冊(cè)按鈕設(shè)置4個(gè)鼠標(biāo)單擊事件用例，設(shè)置如下：

• 用例一：當(dāng)短信驗(yàn)證碼文本框內(nèi)容為空時(shí)，提示“請(qǐng)?zhí)顚?xiě)驗(yàn)證碼”，顯示驗(yàn)證碼提示信息；
• 用例二：當(dāng)短信驗(yàn)證碼文本框內(nèi)容≠0258時(shí)，提示“請(qǐng)輸入正確的驗(yàn)證碼”，顯示驗(yàn)證碼提示信息；
• 用例三：當(dāng)短信碼下發(fā)時(shí)間超過(guò)1分鐘時(shí)（假設(shè)1分鐘超時(shí)過(guò)期），則提示“驗(yàn)證碼已過(guò)期，請(qǐng)重新獲取”，顯示驗(yàn)證碼提示信息；
• 用例四：隱藏驗(yàn)證碼提示信息。

登錄

1. 期望交互效果

賬號(hào)：

• 只能輸入數(shù)字，且限制為11位；
• 賬號(hào)為空，提示：請(qǐng)輸入賬號(hào)；
• 假設(shè)輸入11個(gè)1為錯(cuò)誤賬號(hào)，提示：賬號(hào)不存在，請(qǐng)重新輸入。

密碼：

• 密碼長(zhǎng)度限制在6-12位；
• 密碼為空，提示：請(qǐng)輸入密碼；
• 假設(shè)輸入錯(cuò)誤密碼ceshi1111，提示：密碼與賬戶(hù)名不匹配，請(qǐng)檢查密碼。

元件準(zhǔn)備工作同注冊(cè)頁(yè)面一致，不在此重復(fù)說(shuō)明

2. 交互思路分析

賬號(hào)：通過(guò)文本改變事件限制賬號(hào)輸入框只能輸入11位數(shù)字，即當(dāng)賬號(hào)文本框中的文字長(zhǎng)度大于11位時(shí)，則賬號(hào)文本框的值為=[[LVAR1.substr(0,11)]]，其中局部變量LVAR1為賬號(hào)文本框的文字。函數(shù)表達(dá)式的意思為針對(duì)賬號(hào)文本框的文字，從0位開(kāi)始，截取前11位長(zhǎng)度的內(nèi)容，原函數(shù)為substr(start,length)。

為賬號(hào)文本框設(shè)置失去焦點(diǎn)事件的3個(gè)用例，設(shè)置如下：

1. 用例一：當(dāng)賬號(hào)文本框內(nèi)容為空時(shí)，提示文字內(nèi)容為“請(qǐng)輸入賬號(hào)”，顯示賬號(hào)提示信息；
2. 用例二：當(dāng)賬號(hào)文本框內(nèi)容=11111111111，提示文字內(nèi)容為“賬號(hào)不存在，請(qǐng)重新輸入”，顯示賬號(hào)提示信息；
3. 用例三：隱藏賬號(hào)提示信息。

密碼：通過(guò)文本改變事件限制密碼輸入框只能輸入12位，即當(dāng)密碼文本框中的文字長(zhǎng)度大于12位時(shí)，則密碼文本框的值為=[[LVAR1.substr(0,12)]]，其中局部變量LVAR1為密碼文本框的文字。函數(shù)的用法與解釋請(qǐng)參照上文賬號(hào)輸入框的限制。

為密碼文本框設(shè)置失去焦點(diǎn)事件并配置多個(gè)用例，用例配置如下：

1. 用例一：當(dāng)密碼文本框內(nèi)容為空時(shí)，提示“請(qǐng)輸入密碼”，顯示密碼提示信息；
2. 用例二：當(dāng)密碼文本框的內(nèi)容=111111111111，提示“賬戶(hù)名與密碼不匹配，請(qǐng)檢查密碼”，顯示密碼提示信息；
3. 用例三：隱藏密碼提示信息。

結(jié)語(yǔ)

以上便于關(guān)于注冊(cè)和登錄頁(yè)面中的各種交互提示及輸入限制的實(shí)現(xiàn)思路與方法，點(diǎn)擊預(yù)覽查看效果，預(yù)祝同學(xué)們也可以自己動(dòng)手實(shí)現(xiàn)注冊(cè)登錄的高保效果哦。

#專(zhuān)欄作家#

拼搏的80后，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。10年互聯(lián)網(wǎng)從業(yè)經(jīng)歷，具有各類(lèi)型B端、C端產(chǎn)品的設(shè)計(jì)經(jīng)驗(yàn)，關(guān)注區(qū)塊鏈及人工智能的技術(shù)發(fā)展及應(yīng)用場(chǎng)景探索。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖作者提供