用Axure8.0制作簡單的登錄窗口

22 評論 66896 瀏覽 105 收藏 6 分鐘

在這里寫文章,一來是為了記錄自己的一個學(xué)習(xí)過程,二來也是為了讓自己能夠融入到這個平臺的創(chuàng)作氛圍里。請大家多多關(guān)照。通過寫文章,來記錄自己的學(xué)習(xí)內(nèi)容,深刻自己的理解,也是有意識地讓自己養(yǎng)成有想法、愛思考、懂表達(dá)、懂分享的良好習(xí)慣。

下面就由我來分享,我剛剛學(xué)習(xí)的內(nèi)容:用Axure8.0制作簡單的登錄窗口。

1、繪制登錄窗口

(1)首先,打開Axure8.0,在站點地圖里選擇一個頁面,重命名為“登錄窗口”,雙擊該頁面,進(jìn)入該頁面的編輯模式。然后在元件庫中拖拽一個矩形元件到線框圖面板中,單擊右鍵選擇“轉(zhuǎn)化為動態(tài)面板”,將其轉(zhuǎn)化為動態(tài)面板,并將其命名為“l(fā)ogin”

makethenamelogin

(2)雙擊login動態(tài)面板,選擇動態(tài)面板的State1,進(jìn)入狀態(tài)1的編輯模式。可看到線框圖面板中有一個矩形,我們將它調(diào)整為適當(dāng)?shù)拇笮 ?/p>

(3)首先,從元件庫中拖入一條水平線,作為標(biāo)題欄的分割線;然后,繼續(xù)拖入一個三級標(biāo)題文本標(biāo)簽,修改文本為“登錄窗口”,放置在標(biāo)題欄位置;最后,拖入一個占位符,將其命名為“btn_close”,作為登錄窗口的關(guān)閉按鈕。如下圖:

windowlogin

2、繪制登錄表單

(1)從元件庫中的表單元件中拖入兩個文本框元件,一個標(biāo)簽文本,和一個按鈕,并在屬性面板編輯各個元件的屬性:

  • 文本框元件1:命名為“username”,作為用戶名輸入框,設(shè)置提示文本為“請輸入您的用戶名”;
  • 文本框元件2:命名為“passwords”,作為密碼輸入框,設(shè)置提示文本為“請輸入您的密碼”,作為密碼框,當(dāng)用戶輸入文本,應(yīng)該是以密文的形式展示,因此還需要文本框的類型設(shè)置為“密碼”;
  • 標(biāo)簽文本:命名為“tip”,作為頁面錯誤提示的文本展示區(qū)域,設(shè)置文本居中顯示,文本顏色為紅色;
  • 按鈕:命名為“btn_login”,作為登錄按鈕,設(shè)置文本為“登錄”;

formlogin

3、為表單提交添加錯誤提示

當(dāng)提交表單時,用戶名或密碼為空,會有錯誤提示。因此需要為登錄按鈕添加用例。

(1)點擊“登錄按鈕”,選擇右側(cè)交互面板中的“鼠標(biāo)單擊時”,會出現(xiàn)如下圖的用例編輯對話框。此時可以開始編輯用例。

addcase

(2)點擊“添加條件”,添加的條件則為用戶名為空,如下圖,if 文字于username==”” 就是表示如果username為空時的意思;

addif

點擊確定,回到用例編輯對話框;

(3)選擇左側(cè)“添加動作”中的“設(shè)置文本”,在右側(cè)的“配置動作”中選擇“tip”元件,設(shè)置文本為“用戶名不能為空”,如下圖:

maketip

點擊“確定”,Case1(用戶名不能為空)即完成;接下來可按照以上的步驟完成 Case2(密碼不能為空)的情況。

4、錯誤提示的隱藏

當(dāng)錯誤提示后,用戶要再次輸入時,錯誤提示應(yīng)消失。

(1)為元件“username”,添加獲取焦點時的用例,設(shè)置當(dāng)username獲取焦點時,tip元件的文本為空;元件“passwords”也是;

tipout

5、關(guān)閉按鈕的實現(xiàn)

單擊占位符“btn_close”,為其添加鼠標(biāo)單擊時的用例,選擇“顯示/隱藏”,在“配置動作”欄中選擇“l(fā)ogin”動態(tài)面板,可見性選擇“隱藏”,點擊確定,完成用例。

至此,一個簡單的登錄窗口就大致實現(xiàn)。按鍵盤”F5″鍵,就可以預(yù)覽原型啦。

 

作者: Lydia(微信號 Lydia_Lion),初入行產(chǎn)品經(jīng)理。

本文由 @Lydia 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. (標(biāo)簽文本:命名為“tip”)這一步?jīng)]懂,有圖片看看嘛

    來自湖北 回復(fù)
  2. 為什么到后面就沒有截圖了

    來自福建 回復(fù)
  3. 您好,我想請問一下:tip文字框我在輸入文字的時候是居中顯示的,但是在預(yù)覽頁面按登陸后的提示語是從中間往右邊展開的,請問是怎么回事?可以怎么更改呀?希望有路過的大佬解答一下

    來自浙江 回復(fù)
  4. 實用啊

    來自廣東 回復(fù)
  5. tip是不是得設(shè)為隱藏呢?不然一直居中顯示在框里 ??

    來自陜西 回復(fù)
    1. 是的,初始化狀態(tài)是隱藏狀態(tài)… ??

      來自廣東 回復(fù)
    2. 好的,謝謝大神

      來自陜西 回復(fù)
  6. 密碼文本框設(shè)置類型為密碼,“請您輸入密碼”的提示語也變成原點了。。。 ??

    來自北京 回復(fù)
    1. 你一定是把提示語直接天到文本框里了,提示語要在屬性欄里面設(shè)置的

      來自廣東 回復(fù)
  7. 作為一個特別初級的人,想說照著這個做不出來 ??

    來自北京 回復(fù)
    1. 多操作

      來自浙江 回復(fù)
  8. 做出來熟悉了很多 謝謝您

    來自湖北 回復(fù)
  9. 最近一周都在學(xué)習(xí)原型制作,看了你的這個案例,我想說,哇,我雖然有可能做出來可我不一定能講述出來!可見,你基礎(chǔ)功很扎實,如果可以,認(rèn)識一下。我也是即將入行的產(chǎn)品小白。。。

    回復(fù)
  10. 你在哪家公司實習(xí)???

    回復(fù)
  11. 由于為文本框設(shè)置了提示文本,所以為空的條件任何時候都不存在啊,請問這塊是怎么處理的?

    來自北京 回復(fù)
    1. 您好,文本框設(shè)置的提示文本僅是引導(dǎo)用戶在哪個文本框輸入哪些信息,并不是提交表單后會提交到數(shù)據(jù)庫的數(shù)據(jù),所以為空的情況是會出現(xiàn)的,而且用戶可能手誤一開始便點擊了登錄鍵的。

      來自廣東 回復(fù)
    2. 我設(shè)的怎么因為有提示文本,所以為空時的提示就不能觸發(fā),去掉提示文本時候可以。。。我再琢磨琢磨吧,多謝!

      來自北京 回復(fù)
    3. 你檢查一下你設(shè)置的是不是提示文本,按照你說的,你應(yīng)該是在輸入框直接填了提示文案了,所以才沒有不為空的情況。提示文本是在右上角“屬性”里面的“提示文字”設(shè)置的,設(shè)置完文字是灰色的不是黑色的。

      來自廣東 回復(fù)
  12. 說句實在話啊盆友,沒看出來轉(zhuǎn)成動態(tài)面板的作用····

    來自廣東 回復(fù)
    1. 我估計他想轉(zhuǎn)成母板

      來自上海 回復(fù)
    2. 前輩,我原本是想讓關(guān)閉鍵實現(xiàn)整個窗口的關(guān)閉,所以就把它轉(zhuǎn)成動態(tài)面板變成一個整體了… 不足之處望多多指教哈… ??

      來自廣東 回復(fù)
    3. 試著按教程做了一下,很細(xì)致,不過在那個重新輸入那塊,怎么都覺得有點問題,不過我終于順利做一個東東了

      來自安徽 回復(fù)