一般注冊過程包括以下步驟：
1.用戶按照提示填寫表單。
2.用戶在填寫表單的時候提示是正確否輸入了內(nèi)容，如果沒有，提示用戶。
3.用戶提交表單，所有項(xiàng)是否都正確，如果出錯，提示哪項(xiàng)有錯誤。
4.用戶成功提交表單或者取消表單。
在填寫表單過程中，常見驗(yàn)證方法有如下幾種：
1.用戶是否在注冊的用戶名或ID中使用了非法字符。
2.用戶是否輸入了內(nèi)容。
3.兩次輸入的密碼是否一致。
4.是否是合格的Email地址。
5.長度是否在6-12個字符之間。
下面我們用Axure7.0來完成通用注冊的設(shè)計，以下包括最基本的輸入框變化和提示文字變化。
一.表單的布局
拖拽7個文本標(biāo)簽，然后給它們命名為如圖所示。
全部選中，點(diǎn)擊右對齊使得他們都對其，再點(diǎn)擊垂直分布，使他們的上下間距相同。
拖拽5個文本框，分別對應(yīng)如下項(xiàng)目，然后全選，選擇左對齊。
選中每行的文本和文本框選擇上下居中，使每行的都對其。
為性別添加相應(yīng)輸入部件，用兩個單選按鈕，對齊。姓名為男和女。
選中它們，右鍵，選擇指定單選按鈕組，然后在彈出的框中輸入組名性別，這樣就實(shí)現(xiàn)了單選。
為所在地添加一個下拉列表部件。然后編輯列表項(xiàng)，為列表?xiàng)l添加選項(xiàng)。
再添加一個按鈕部件，命名為: 立即注冊
二.制作輸入框變化框邊
當(dāng)我們填寫某個文本框輸入框時，輸入框會被高光顯示，然后右側(cè)提示用戶輸入什么。如果輸入的不符合要求，右側(cè)會提示。
選中5個文本輸入框，右鍵，選擇隱藏邊框。（最后會說明為什么隱藏）
拖拽一個動態(tài)面板，命名為郵箱。再添加一個狀態(tài)，分別命名為輸入和未輸入。
再輸入狀態(tài)下添加兩個矩形，邊框顏色和填充顏色如圖。第二個矩形是提示文字。
矩形大小比文本框多出2個像素大小，為了切換狀態(tài)時完全覆蓋最初的文本框。
把最先放上去的那個文本輸入框置于頂層。
切換到未輸入狀態(tài)，把輸入狀態(tài)下第一個矩形復(fù)制到這里，再把邊框顏色改為默認(rèn)的灰色。
修改面板順序，把未輸入狀態(tài)放在前面。
點(diǎn)擊預(yù)覽，界面如下圖所示。
三.讓邊框動起來
為我的郵箱輸入框添加如下狀態(tài)，使得鼠標(biāo)移動到那里未輸入狀態(tài)，不在那里為未輸入狀態(tài)。
生成后看到如下界面：
四.添加其他輸入框和提示
這部需要把郵箱那部分制作好的動態(tài)面板復(fù)制到其他輸入項(xiàng)中。
復(fù)制到其他選項(xiàng)，注意調(diào)整坐標(biāo)。
修改其他動態(tài)面板名字。
需改其他動態(tài)面板輸入狀態(tài)下的提示文字。
把動態(tài)面板都至于底層，輸入框置于頂層。
分別添加狀態(tài)，與郵箱添加狀態(tài)時一樣。
五.完成效果
在此我們將最開始的文本輸入框隱藏，代替它的的動態(tài)面板的未輸入狀態(tài)，邊框?yàn)楹谏，在鼠?biāo)移動后就變?yōu)檩斎霠顟B(tài)，顯示為藍(lán)色和提示文字。這樣就完成了注冊設(shè)計中的邊框效果和提示文字。還有驗(yàn)證輸入，驗(yàn)證密碼，處理驗(yàn)證碼等以后再做總結(jié)。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。