使用Axure設計出頁面登陸頁面的設置指南_裝機軟件

　　一些用戶還不清楚使用Axure制作出網頁登陸頁面的操作步驟，今天小編就講解了關于使用Axure制作出網頁登陸頁面的操作教程。

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

　　2、從元件庫中拖選橫線控件，將方框進行一個簡單劃分，之后在方框上部分拖入一個文本標簽，并輸入文字login;

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

　　4、拖入用作輸入用戶名和密碼的文本框后還需對他們進行一些設置，如：設置文本類型，文本提示(用來提示用戶應該輸入什么內容)，最大輸入字數等。

　　5、這里有個注意的就是文本提示后有兩個提示隱藏的選項Typing和獲得焦點。Typing表示的是當用戶輸入時，文本框的提示文字才會隱藏，獲得焦點表示的是當文本框獲得了點擊表示輸入時(用戶還沒輸入)，文本框的提示就隱藏了。圖為用戶名和密碼的文本框屬性設置：

　　6、為體現良好的人性交互，當用戶輸入密碼錯誤或者用戶名不存在時界面會提示，這里我們拖入一個標簽框作為提示，如圖;

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

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

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

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

　　以上就是小編帶來的使用Axure制作出網頁登陸頁面的操作教程，希望幫助到有需要的朋友。