網站建設:注冊登錄應注意哪些?

2021-04-04    分類: 網站建設

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


注冊

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 位的字母、數字”,顯示密碼提示信息;


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

分享標題:網站建設:注冊登錄應注意哪些?
鏈接地址:http://www.kartarina.com/news4/106454.html

網站建設、網絡推廣公司-創新互聯,是專注品牌與效果的網站制作,網絡營銷seo公司;服務項目有網站建設

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

h5響應式網站建設
主站蜘蛛池模板: 日韩精品中文字幕无码一区| 蜜桃成人无码区免费视频网站 | 成年免费a级毛片免费看无码| 特黄熟妇丰满人妻无码| 中文字幕乱码无码人妻系列蜜桃| 精品亚洲成A人无码成A在线观看| 人妻无码中文字幕| 亚洲综合无码一区二区痴汉| 国产成人精品一区二区三区无码 | 狠狠久久精品中文字幕无码| 国产成人无码AV一区二区| 免费无码看av的网站| 亚洲性无码一区二区三区| 久久无码无码久久综合综合| 国产日韩AV免费无码一区二区三区| 亚洲人成无码网站在线观看 | 亚洲av中文无码字幕色不卡| 国产精品午夜无码体验区 | 国模无码一区二区三区| 999久久久无码国产精品| 亚洲国产精品无码久久久蜜芽| 国产一区二区三区无码免费| 国产高清不卡无码视频| 亚洲午夜无码片在线观看影院猛 | 精品无码久久久久久国产| 亚洲欧洲无码AV不卡在线| 精品无码久久久久国产| 无码AV中文一区二区三区| 高h纯肉无码视频在线观看| 永久免费无码日韩视频| 亚洲?V无码成人精品区日韩 | 国产精品无码AV一区二区三区| 国产精品无码久久久久| 国产精品午夜无码av体验区| 国产裸模视频免费区无码| 亚洲AV中文无码乱人伦| 国产高新无码在线观看| 国产精品99精品无码视亚| 日韩人妻精品无码一区二区三区 | 亚洲国产成人无码av在线播放| 日韩精品人妻系列无码专区 |