1、繪製登入視窗
(1)首先,開啟Axure8.0,在站點地圖裡選擇一個頁面,重新命名為“登入視窗”,雙擊該頁面,進入該頁面的編輯模式。然後在元件庫中拖拽一個矩形元件到線框圖面板中,單擊右鍵選擇“轉化為動態面板”,將其轉化為動態面板,並將其命名為“login”
(2)雙擊login動態面板,選擇動態面板的State1,進入狀態1的編輯模式。可看到線框圖面板中有一個矩形,我們將它調整為適當的大小。
2、繪製登入表單
文字框元件1:命名為“username”,作為使用者名稱輸入框,設定提示文字為“請輸入您的使用者名稱”;
文字框元件2:命名為“passwords”,作為密碼輸入框,設定提示文字為“請輸入您的密碼”,作為密碼框,當用戶輸入文字,應該是以密文的形式展示,因此還需要文字框的型別設定為“密碼”;
標籤文字:命名為“tip”,作為頁面錯誤提示的文字展示區域,設定文字居中顯示,文字顏色為紅色;
3、為表單提交新增錯誤提示
(3)選擇左側“新增動作”中的“設定文字”,在右側的“配置動作”中選擇“tip”元件,設定文字為“使用者名稱不能為空”,如下圖:
4、錯誤提示的隱藏
當錯誤提示後,使用者要再次輸入時,錯誤提示應消失。
(1)為元件“username”,新增獲取焦點時的用例,設定當username獲取焦點時,tip元件的文字為空;元件“passwords”也是;
至此,一個簡單的登入視窗就大致實現。按鍵盤"F5"鍵,就可以預覽原型啦。
1、繪製登入視窗
(1)首先,開啟Axure8.0,在站點地圖裡選擇一個頁面,重新命名為“登入視窗”,雙擊該頁面,進入該頁面的編輯模式。然後在元件庫中拖拽一個矩形元件到線框圖面板中,單擊右鍵選擇“轉化為動態面板”,將其轉化為動態面板,並將其命名為“login”
(2)雙擊login動態面板,選擇動態面板的State1,進入狀態1的編輯模式。可看到線框圖面板中有一個矩形,我們將它調整為適當的大小。
2、繪製登入表單
文字框元件1:命名為“username”,作為使用者名稱輸入框,設定提示文字為“請輸入您的使用者名稱”;
文字框元件2:命名為“passwords”,作為密碼輸入框,設定提示文字為“請輸入您的密碼”,作為密碼框,當用戶輸入文字,應該是以密文的形式展示,因此還需要文字框的型別設定為“密碼”;
標籤文字:命名為“tip”,作為頁面錯誤提示的文字展示區域,設定文字居中顯示,文字顏色為紅色;
3、為表單提交新增錯誤提示
(3)選擇左側“新增動作”中的“設定文字”,在右側的“配置動作”中選擇“tip”元件,設定文字為“使用者名稱不能為空”,如下圖:
4、錯誤提示的隱藏
當錯誤提示後,使用者要再次輸入時,錯誤提示應消失。
(1)為元件“username”,新增獲取焦點時的用例,設定當username獲取焦點時,tip元件的文字為空;元件“passwords”也是;
至此,一個簡單的登入視窗就大致實現。按鍵盤"F5"鍵,就可以預覽原型啦。