前言
注冊(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ě)的一片文章《創(chuàng)業(yè)公司新產(chǎn)品的注冊(cè)登錄如何設(shè)計(jì)》
注冊(cè)
期望交互效果
賬號(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)重新獲取
元件準(zhǔn)備
首先利用元件文本標(biāo)簽耙考、文本框、按鈕等基礎(chǔ)元件快速搭建好注冊(cè)頁(yè)面的線框圖潭兽，將賬號(hào)界面的輸入框?qū)傩栽O(shè)置為phone number倦始，限制只能輸入數(shù)字；密碼文本框的屬性設(shè)置為密碼讼溺，對(duì)密碼的顯示進(jìn)行加密楣号，視覺(jué)上看到的都是星號(hào)。將賬號(hào)怒坯、短信炫狱、驗(yàn)證碼的提示信息放置在各輸入項(xiàng)的下方，默認(rèn)隱藏剔猿。
交互思路分析
賬號(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)證碼提示信息
登錄
期望交互效果
賬號(hào)
1）只能輸入數(shù)字则奥，且限制為11位
2）賬號(hào)為空考润，提示：請(qǐng)輸入賬號(hào)
3）假設(shè)輸入11個(gè)1為錯(cuò)誤賬號(hào)，提示：賬號(hào)不存在读处，請(qǐng)重新輸入
密碼
1）密碼長(zhǎng)度限制在6-12位
2）密碼為空糊治，提示：請(qǐng)輸入密碼
3）假設(shè)輸入錯(cuò)誤密碼ceshi1111，提示：密碼與賬戶(hù)名不匹配罚舱，請(qǐng)檢查密碼
元件準(zhǔn)備工作注冊(cè)頁(yè)面一致井辜，不在此重復(fù)說(shuō)明
交互思路分析
賬號(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è)置如下：
用例一：當(dāng)賬號(hào)文本框內(nèi)容為空時(shí)，提示文字內(nèi)容為“請(qǐng)輸入賬號(hào)”呕臂，顯示賬號(hào)提示信息
用例二：當(dāng)賬號(hào)文本框內(nèi)容=11111111111破托，提示文字內(nèi)容為“賬號(hào)不存在，請(qǐng)重新輸入”歧蒋，顯示賬號(hào)提示信息
用例三：隱藏賬號(hào)提示信息
密碼：通過(guò)文本改變事件限制密碼輸入框只能輸入12位土砂，即當(dāng)密碼文本框中的文字長(zhǎng)度大于12位時(shí)，則密碼文本框的值為=[[LVAR1.substr(0,12)]]谜洽，其中局部變量LVAR1為密碼文本框的文字萝映。函數(shù)的用法與解釋請(qǐng)參照上文賬號(hào)輸入框的限制。
為密碼文本框設(shè)置失去焦點(diǎn)事件并配置多個(gè)用例阐虚，用例配置如下：
用例一：當(dāng)密碼文本框內(nèi)容為空時(shí)序臂，提示“請(qǐng)輸入密碼”，顯示密碼提示信息
用例二：當(dāng)密碼文本框的內(nèi)容=111111111111实束，提示“賬戶(hù)名與密碼不匹配奥秆，請(qǐng)檢查密碼”，顯示密碼提示信息
用例三：隱藏密碼提示信息
結(jié)語(yǔ)
以上便于關(guān)于注冊(cè)和登錄頁(yè)面中的各種交互提示及輸入限制的實(shí)現(xiàn)思路與方法咸灿，點(diǎn)擊預(yù)覽查看效果构订，預(yù)祝同學(xué)們也可以自己動(dòng)手實(shí)現(xiàn)注冊(cè)登錄的高保效果哦。
如果你對(duì)Axure或原型設(shè)計(jì)有興趣避矢，希望系統(tǒng)性地學(xué)習(xí)Axure知識(shí)悼瘾，掌握更多Axure使用技巧；或者希望通過(guò)臨摹交互案例审胸，進(jìn)一步提升高保交互設(shè)計(jì)能力亥宿。請(qǐng)點(diǎn)擊下方關(guān)注按鈕，查看更多連載作品歹嘹。
