注冊(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ì)，可以參考我之前寫的一片文章《注冊(cè)登錄可能沒你想的那么簡單》。

注冊(cè)

1. 期望交互效果

賬號(hào)：

賬號(hào)輸入框只能輸入 11 位數(shù)字，超過 11 位則無法輸入；

假設(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í)顚戲?yàn)證碼；

輸入錯(cuò)誤的驗(yàn)證碼，提示：請(qǐng)輸入正確的驗(yàn)證碼（假設(shè)正確的驗(yàn)證碼是0258）；

假設(shè) 1 分鐘后驗(yàn)證碼過期（為了模擬交互效果，縮短過期時(shí)間），提示：驗(yàn)證碼已過期，請(qǐng)重新獲取。

2. 元件準(zhǔn)備

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

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

3. 交互思路分析

賬號(hào)：通過文本改變事件限制賬號(hào)輸入框只能輸入 11 位數(shù)字，即當(dāng)賬號(hào)文本框中的文字長度大于 11 位時(shí)，則賬號(hào)文本框的值為=[[lvar1.substr(0,11)]]，其中局部變量lvar1 為賬號(hào)文本框的文字。函數(shù)表達(dá)式的意思為針對(duì)賬號(hào)文本框的文字，從 0 位開始，截取前 11 位長度的字符串內(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)提示信息；

用例四：隱藏提示信息。

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

通過為密碼文本框設(shè)置多個(gè)失去焦點(diǎn)用例，來實(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ù)字”，顯示密碼提示信息；

用例三：隱藏密碼提示信息。

分享標(biāo)題：網(wǎng)站建設(shè)：注冊(cè)登錄應(yīng)注意哪些？
鏈接地址：http://redsoil1982.com.cn/news4/106454.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)