Axure怎么設(shè)計(jì)網(wǎng)頁(yè)的登陸頁(yè)面?

發(fā)布時(shí)間：2017-01-09 09:57:03 作者：佚名

Axure怎么設(shè)計(jì)網(wǎng)頁(yè)的登陸頁(yè)面？Axure中想要設(shè)計(jì)一個(gè)網(wǎng)頁(yè)的登陸界面，輸入用戶(hù)名密碼，該怎么設(shè)置呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下

Axure是一款功能強(qiáng)大的交互設(shè)計(jì)軟件，作為產(chǎn)品小白入門(mén)時(shí)的必學(xué)軟件，從做一個(gè)登錄界面開(kāi)始展開(kāi)我們的學(xué)習(xí)歷程。這里我用的是Axure RP 8為大家演示如何制作一個(gè)登錄界面。作為一個(gè)學(xué)習(xí)分享，如果有不妥之處，還望各位多多指教，敬請(qǐng)見(jiàn)諒。

快速產(chǎn)品原型設(shè)計(jì)工具 Axure RP Pro v7.0.0.3174 漢化綠色版

類(lèi)型：應(yīng)用其它
大?。?/span>8.97MB
語(yǔ)言：簡(jiǎn)體中文
時(shí)間：2014-12-22

查看詳情

1、打開(kāi)Axure，在默認(rèn)的元件庫(kù)先拖入一個(gè)矩形，在右側(cè)檢查器里設(shè)置矩形方框的大小、填充顏色，陰影和圓角半徑的數(shù)據(jù)，使其稍微美觀點(diǎn)，效果如圖：

2、從元件庫(kù)中拖選橫線(xiàn)控件，將方框進(jìn)行一個(gè)簡(jiǎn)單劃分，之后在方框上部分拖入一個(gè)文本標(biāo)簽，并輸入文字login；

3、之后分別拖入登錄界面剩余所需的控件合理放置到方框上，需拖入的控件有：兩個(gè)文本框，一個(gè)復(fù)選框，一個(gè)按鈕；為了美觀創(chuàng)意也可以拖選一些小標(biāo)記美化界面，這里全看個(gè)人創(chuàng)意喜好。（這里我隨便加了兩個(gè)水滴標(biāo)記）

4、

拖入用作輸入用戶(hù)名和密碼的文本框后還需對(duì)他們進(jìn)行一些設(shè)置，如：設(shè)置文本類(lèi)型，文本提示（用來(lái)提示用戶(hù)應(yīng)該輸入什么內(nèi)容），最大輸入字?jǐn)?shù)等。

5、這里有個(gè)注意的就是文本提示后有兩個(gè)提示隱藏的選項(xiàng)Typing和獲得焦點(diǎn)。Typing表示的是當(dāng)用戶(hù)輸入時(shí)，文本框的提示文字才會(huì)隱藏，獲得焦點(diǎn)表示的是當(dāng)文本框獲得了點(diǎn)擊表示輸入時(shí)（用戶(hù)還沒(méi)輸入），文本框的提示就隱藏了。圖為用戶(hù)名和密碼的文本框?qū)傩栽O(shè)置：

6、為體現(xiàn)良好的人性交互，當(dāng)用戶(hù)輸入密碼錯(cuò)誤或者用戶(hù)名不存在時(shí)界面會(huì)提示，這里我們拖入一個(gè)標(biāo)簽框作為提示，如圖；

7、到這里總體的界面設(shè)計(jì)就出來(lái)了，接下來(lái)是要對(duì)登錄界面的用例邏輯進(jìn)行設(shè)置，當(dāng)用戶(hù)名輸入為空、密碼輸入為空、用戶(hù)名輸入錯(cuò)誤、密碼輸入錯(cuò)誤、用戶(hù)名和密碼正確時(shí)都應(yīng)該有相應(yīng)的邏輯用例，這里以當(dāng)用戶(hù)名輸入為空做例子介紹如何設(shè)置登錄界面的用例。到這里總體的界面設(shè)計(jì)就出來(lái)了，接下來(lái)是要對(duì)登錄界面的用例邏輯進(jìn)行設(shè)置，當(dāng)用戶(hù)名輸入為空、密碼輸入為空、用戶(hù)名輸入錯(cuò)誤、密碼輸入錯(cuò)誤、用戶(hù)名和密碼正確時(shí)都應(yīng)該有相應(yīng)的邏輯用例，這里以當(dāng)用戶(hù)名輸入為空做例子介紹如何設(shè)置登錄界面的用例。

8、點(diǎn)擊登錄按鈕，在登錄按鈕屬性一欄的交互雙擊選擇“鼠標(biāo)單擊時(shí)”進(jìn)入點(diǎn)擊登錄按鈕動(dòng)作后的用例設(shè)置。在用例編輯器的頂部點(diǎn)擊新增條件，在條件生成的界面設(shè)置當(dāng)元件uname等于空時(shí)，點(diǎn)擊確定按鈕。之后繼續(xù)在用例編輯器上選擇“設(shè)置文本”，在配置動(dòng)作那一欄選擇tips元件，將文本的值設(shè)置為“Please enter your username !”，這樣就可以在用戶(hù)沒(méi)輸入密碼點(diǎn)擊登錄時(shí)在提示框顯示提示內(nèi)容。

9、其余的用例設(shè)置大致是一樣的，這里我的用例設(shè)置為當(dāng)用戶(hù)名，密碼為空或者輸入錯(cuò)誤時(shí)，點(diǎn)擊登錄按鈕提示框會(huì)顯示對(duì)應(yīng)的提示信息，當(dāng)用戶(hù)輸入正確的用戶(hù)名和密碼時(shí)（用戶(hù)名：幻云思密達(dá)，密碼：123456），點(diǎn)擊登錄按鈕跳轉(zhuǎn)到www.baidu.com。圖為本案例用例邏輯設(shè)置：

10、到這里就完成了一個(gè)登錄界面的制作了，按下F5就可以看看模型是咋樣的了。這里需要注意的是用例的設(shè)置先后順序也是有影響的，設(shè)置的時(shí)候一定要考慮清楚，比如如果先設(shè)置提醒用戶(hù)名或者密碼輸入錯(cuò)誤的用例再設(shè)置提醒當(dāng)用戶(hù)名或者密碼為空的用例時(shí)，模型的用例執(zhí)行是從第一個(gè)用例開(kāi)始的，所以后面的用戶(hù)名或密碼為空的提示可能就會(huì)被前一個(gè)當(dāng)用戶(hù)名或密碼錯(cuò)誤的提示覆蓋掉了（因?yàn)橛脩?hù)名或密碼為空也算是用戶(hù)名或密碼輸入錯(cuò)誤）。

相關(guān)推薦：

Axure RP 8怎么制作單選題中的單選框?

Axure8怎么使用動(dòng)態(tài)面板?Axure8的使用教程

Axure怎么制作頁(yè)面滾動(dòng)時(shí)菜單固定在頂部的頁(yè)面？