一般注冊過程包括以下步驟:
- 使用者按照提示填寫表單。
- 使用者在填寫表單的時候提示是正确否輸入了内容,如果沒有,提示使用者。
- 使用者送出表單,所有項是否都正确,如果出錯,提示哪項有錯誤。
- 使用者成功送出表單或者取消表單。
在填寫表單過程中,常見驗證方法有如下幾種:
- 使用者是否在注冊的使用者名或ID中使用了非法字元。
- 使用者是否輸入了内容。
- 兩次輸入的密碼是否一緻。
- 是否是合格的Email位址。
- 長度是否在6-12個字元之間。
下面我們用Axure7.0來完成通用注冊的設計,以下包括最基本的輸入框變化和提示文字變化。
一. 表單的布局
拖拽7個文本标簽,然後給它們命名為如圖所示。
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLi0zaHRGcWdUYuVzVa9GczoVdG1mWfVGc5RHLwkzX39GZhh2csATMflHLwEzX4xSZz91ZsADMx8FdsYkRGZkRG9lcvx2bjxSa2EWNhJTW1AlUxEFeVRUUfRHelRHL2EzXlpXazxyayFWbyVGdhd3LcV2Zh1Wa9M3clN2byBXLzN3btg3PnVGcq5SM3ITZlNTO0ATY5YjN5QzYiBTM3M2N0EjNzkDN4YmMi9CX3AzLchDMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjL0M3Lc9CX6MHc0RHaiojIsJye.jpeg)
全部選中,點選右對齊使得他們都對其,再點選垂直分布,使他們的上下間距相同。
拖拽5個文本框,分别對應如下項目,然後全選,選擇左對齊。
選中每行的文本和文本框選擇上下居中,使每行的都對其。
為性别添加相應輸入部件,用兩個單選按鈕,對齊。姓名為男和女。
選中它們,右鍵,選擇指定單選按鈕組,然後在彈出的框中輸入組名性别,這樣就實作了單選。
為所在地添加一個下拉清單部件。然後編輯清單項,為清單條添加選項。
再添加一個按鈕部件,命名為: 立即注冊
二. 制作輸入框變化框邊
當我們填寫某個文本框輸入框時,輸入框會被高光顯示,然後右側提示使用者輸入什麼。如果輸入的不符合要求,右側會提示。
選中5個文本輸入框,右鍵,選擇隐藏邊框。(最後會說明為什麼隐藏)
拖拽一個動态面闆,命名為郵箱。再添加一個狀态,分别命名為輸入和未輸入。
再輸入狀态下添加兩個矩形,邊框顔色和填充顔色如圖。第二個矩形是提示文字。
矩形大小比文本框多出2個像素大小,為了切換狀态時完全覆寫最初的文本框。
把最先放上去的那個文本輸入框置于頂層。
切換到未輸入狀态,把輸入狀态下第一個矩形複制到這裡,再把邊框顔色改為預設的灰色。
修改面闆順序,把未輸入狀态放在前面。
面闆順序
點選預覽,界面如下圖所示。
三. 讓邊框動起來
為我的郵箱輸入框添加如下狀态,使得滑鼠移動到那裡未輸入狀态,不在那裡為未輸入狀态。
生成後看到如下界面:
四. 添加其他輸入框和提示
這部需要把郵箱那部分制作好的動态面闆複制到其他輸入項中。
複制到其他選項,注意調整坐标。
修改其他動态面闆名字。
需改其他動态面闆輸入狀态下的提示文字。
把動态面闆都至于底層,輸入框置于頂層。
分别添加狀态,與郵箱添加狀态時一樣。
五.完成效果
在此我們将最開始的文本輸入框隐藏,代替它的的動态面闆的未輸入狀态,邊框為黑色,在滑鼠移動後就變為輸入狀态,顯示為藍色和提示文字。這樣就完成了注冊設計中的邊框效果和提示文字。還有驗證輸入,驗證密碼,處理驗證碼等以後再做總結。
作者:Poinz