真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

用Axure制作網(wǎng)站注冊(cè)表單原型圖文教程

一般注冊(cè)過(guò)程包括以下步驟:

10余年的宜豐網(wǎng)站建設(shè)經(jīng)驗(yàn),針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù),響應(yīng)快,48小時(shí)及時(shí)工作處理。營(yíng)銷(xiāo)型網(wǎng)站的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同,自動(dòng)調(diào)整宜豐建站的顯示方式,使網(wǎng)站能夠適用不同顯示終端,在瀏覽器中調(diào)整網(wǎng)站的寬度,無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站,都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì),從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“宜豐網(wǎng)站設(shè)計(jì)”,“宜豐網(wǎng)站推廣”以來(lái),每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

1.用戶(hù)按照提示填寫(xiě)表單。

2.用戶(hù)在填寫(xiě)表單的時(shí)候提示是正確否輸入了內(nèi)容,如果沒(méi)有,提示用戶(hù)。

3.用戶(hù)提交表單,所有項(xiàng)是否都正確,如果出錯(cuò),提示哪項(xiàng)有錯(cuò)誤。

4.用戶(hù)成功提交表單或者取消表單。

在填寫(xiě)表單過(guò)程中,常見(jiàn)驗(yàn)證方法有如下幾種:

1.用戶(hù)是否在注冊(cè)的用戶(hù)名或ID中使用了非法字符。

2.用戶(hù)是否輸入了內(nèi)容。

3.兩次輸入的密碼是否一致。

4.是否是合格的Email地址。

5.長(zhǎng)度是否在6-12個(gè)字符之間。

下面我們用Axure7.0來(lái)完成通用注冊(cè)的設(shè)計(jì),以下包括最基本的輸入框變化和提示文字變化。

一.表單的布局

拖拽7個(gè)文本標(biāo)簽,然后給它們命名為如圖所示。

全部選中,點(diǎn)擊右對(duì)齊使得他們都對(duì)其,再點(diǎn)擊垂直分布,使他們的上下間距相同。

拖拽5個(gè)文本框,分別對(duì)應(yīng)如下項(xiàng)目,然后全選,選擇左對(duì)齊。

選中每行的文本和文本框選擇上下居中,使每行的都對(duì)其。

為性別添加相應(yīng)輸入部件,用兩個(gè)單選按鈕,對(duì)齊。姓名為男和女。

選中它們,右鍵,選擇指定單選按鈕組,然后在彈出的框中輸入組名性別,這樣就實(shí)現(xiàn)了單選。

為所在地添加一個(gè)下拉列表部件。然后編輯列表項(xiàng),為列表?xiàng)l添加選項(xiàng)。

再添加一個(gè)按鈕部件,命名為: 立即注冊(cè)

二.制作輸入框變化框邊

當(dāng)我們填寫(xiě)某個(gè)文本框輸入框時(shí),輸入框會(huì)被高光顯示,然后右側(cè)提示用戶(hù)輸入什么。如果輸入的不符合要求,右側(cè)會(huì)提示。

選中5個(gè)文本輸入框,右鍵,選擇隱藏邊框。(最后會(huì)說(shuō)明為什么隱藏)

拖拽一個(gè)動(dòng)態(tài)面板,命名為郵箱。再添加一個(gè)狀態(tài),分別命名為輸入和未輸入。

再輸入狀態(tài)下添加兩個(gè)矩形,邊框顏色和填充顏色如圖。第二個(gè)矩形是提示文字。

矩形大小比文本框多出2個(gè)像素大小,為了切換狀態(tài)時(shí)完全覆蓋最初的文本框。

把最先放上去的那個(gè)文本輸入框置于頂層。

切換到未輸入狀態(tài),把輸入狀態(tài)下第一個(gè)矩形復(fù)制到這里,再把邊框顏色改為默認(rèn)的灰色。

修改面板順序,把未輸入狀態(tài)放在前面。

面板順序

點(diǎn)擊預(yù)覽,界面如下圖所示。

三.讓邊框動(dòng)起來(lái)

為我的郵箱輸入框添加如下?tīng)顟B(tài),使得鼠標(biāo)移動(dòng)到那里未輸入狀態(tài),不在那里為未輸入狀態(tài)。

生成后看到如下界面:

四.添加其他輸入框和提示

這部需要把郵箱那部分制作好的動(dòng)態(tài)面板復(fù)制到其他輸入項(xiàng)中。

復(fù)制到其他選項(xiàng),注意調(diào)整坐標(biāo)。

修改其他動(dòng)態(tài)面板名字。

需改其他動(dòng)態(tài)面板輸入狀態(tài)下的提示文字。

把動(dòng)態(tài)面板都至于底層,輸入框置于頂層。

分別添加狀態(tài),與郵箱添加狀態(tài)時(shí)一樣。

五.完成效果

在此我們將最開(kāi)始的文本輸入框隱藏,代替它的的動(dòng)態(tài)面板的未輸入狀態(tài),邊框?yàn)楹谏?,在鼠?biāo)移動(dòng)后就變?yōu)檩斎霠顟B(tài),顯示為藍(lán)色和提示文字。這樣就完成了注冊(cè)設(shè)計(jì)中的邊框效果和提示文字。還有驗(yàn)證輸入,驗(yàn)證密碼,處理驗(yàn)證碼等以后再做總結(jié)。


分享標(biāo)題:用Axure制作網(wǎng)站注冊(cè)表單原型圖文教程
文章網(wǎng)址:http://weahome.cn/article/cpigdc.html

其他資訊

在線咨詢(xún)

微信咨詢(xún)

電話咨詢(xún)

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部