欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時(shí)間:2017-01-09 09:57:03   作者:佚名   我要評(píng)論
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)諒。

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è)面?

相關(guān)文章

  • Axure RP 8怎么價(jià)格2D圖形轉(zhuǎn)換成3D圖?

    Axure RP 8怎么價(jià)格2D圖形轉(zhuǎn)換成3D圖?Axure RP 8中繪制的平面圖想轉(zhuǎn)換成3d立體圖,該怎么設(shè)置呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下
    2017-01-06
  • Axure RP 8設(shè)怎么繪制拱橋倒影圖?

    Axure RP 8設(shè)怎么繪制拱橋倒影圖?想要制作一個(gè)圓拱橋并且設(shè)置倒影相互映襯,該怎么繪制呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下
    2017-01-06
  • Axure RP 8怎么利用按鈕控制單選框和復(fù)選框?

    Axure RP 8怎么利用按鈕控制單選框和復(fù)選框?Axure中想要設(shè)計(jì)一個(gè)通過(guò)按鈕來(lái)空值單選框和復(fù)選框的原型,該怎么制作呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下
    2017-01-05
  • Axure RP 8怎么制作圓形不斷變換透明度的效果?

    Axure RP 8怎么制作圓形不斷變換透明度的效果?Axure RP 8中想要繪制五個(gè)大小不同的圓形,中間的圓形可以控制周?chē)鷪A形的與透明度,該怎么誰(shuí)及呢?下面我們就來(lái)看看詳細(xì)的教
    2017-01-05
  • Axure RP 8怎么給下拉列表框添加多個(gè)值?

    Axure RP 8怎么給下拉列表框添加多個(gè)值?Axure RP 8中想要制作一個(gè)下拉列表,有多個(gè)數(shù)值,該怎么制作呢?下面我們就來(lái)Axure給下拉列表框添加多行值的教程,需要的朋友可以
    2017-01-05
  • Axure RP 8橢圓形元件怎么設(shè)置透明度陰影等屬性?

    Axure RP 8橢圓形元件怎么設(shè)置透明度陰影等屬性?Axure RP 8中自帶了橢圓形元件,這個(gè)元件怎么設(shè)置陰影、邊框、填充色呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考
    2017-01-04
  • Axure RP 8怎么設(shè)計(jì)內(nèi)聯(lián)框架原型?

    Axure RP 8怎么設(shè)計(jì)內(nèi)聯(lián)框架原型?Axure設(shè)計(jì)網(wǎng)頁(yè)原型的時(shí)候,想要做一個(gè)內(nèi)部嵌套框架或頁(yè)面,將視頻、頁(yè)面、地圖放入框架中,該怎么設(shè)計(jì)呢?下面我們就來(lái)看看詳細(xì)的教程,
    2017-01-04
  • Axure RP 8怎么制作一個(gè)旋轉(zhuǎn)的圓角圖片?

    Axure RP 8怎么制作一個(gè)旋轉(zhuǎn)的圓角圖片?Axure中想要旋轉(zhuǎn)圖片元件,將直角圖形變成圓角,該怎么設(shè)置呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下
    2017-01-04
  • Axure RP 8怎么制作按鈕控制下拉框選項(xiàng)?

    Axure RP 8怎么制作按鈕控制下拉框選項(xiàng)?Axure RP 8中想要制作一個(gè)按鈕觸發(fā)事件,該怎么制作呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下
    2017-01-01
  • Axure RP 8怎么制作驗(yàn)證碼倒計(jì)時(shí)原型?

    Axure RP 8怎么制作驗(yàn)證碼倒計(jì)時(shí)原型?平時(shí)我們填寫(xiě)手機(jī)驗(yàn)證碼的時(shí)候,驗(yàn)證碼都是有時(shí)效的,該怎么設(shè)置一分鐘的倒計(jì)時(shí)時(shí)效呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以
    2016-12-30

最新評(píng)論