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

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

  發(fā)布時間:2017-01-09 09:57:03   作者:佚名   我要評論
Axure怎么設(shè)計網(wǎng)頁的登陸頁面?Axure中想要設(shè)計一個網(wǎng)頁的登陸界面,輸入用戶名密碼,該怎么設(shè)置呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下

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

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

2、從元件庫中拖選橫線控件,將方框進(jìn)行一個簡單劃分,之后在方框上部分拖入一個文本標(biāo)簽,并輸入文字login;

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

4、

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

5、這里有個注意的就是文本提示后有兩個提示隱藏的選項Typing和獲得焦點。Typing表示的是當(dāng)用戶輸入時,文本框的提示文字才會隱藏,獲得焦點表示的是當(dāng)文本框獲得了點擊表示輸入時(用戶還沒輸入),文本框的提示就隱藏了。圖為用戶名和密碼的文本框?qū)傩栽O(shè)置

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

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

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

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

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

相關(guān)推薦:

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

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

Axure怎么制作頁面滾動時菜單固定在頂部的頁面?

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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

最新評論