實例演示 ——登錄界面
①畫原型
用Axure畫一個簡潔的登錄頁面,包括用戶名(標簽名為txtUserName)和密碼(標簽名為txtPassword)的輸入框和登錄按鈕(txtSubmit)三個元素即可。
以上界面只是簡單的拖曳元件即可完成。
交互設計:
①當用戶文本框和密碼文本框獲得焦點時,則顯示輸入狀態,刪除提示文字(請輸入密碼,請輸入用戶名);如果失去焦點,且沒有輸入任何文字則顯示提示文字。效果如下:
做法:選擇用戶輸入框;單擊獲得焦點事件添加一個用例。
單擊設置變量/部件值,選擇打開設置值編輯器。
設置如下:部件文字 (txtUserName)等於值(空),即當用戶名輸入文本框獲得焦點時置空。
當文本框失去焦點時,如果用戶沒有輸入信息,則仍顯示提示信息(請輸入用戶名、請輸入密碼):
首先添加失去焦點事件的用例:
添加條件:當用戶沒有輸入任何值時:
繼續設置部件值(請輸入用戶名)
②輸入正確和錯誤的判斷及提示
輸入正確提示:
制作動態面板,設置其為隱藏:
單擊SIGNIN,添加OnClick(點擊時)用例,添加條件如下(添加方式看上文)
效果展示:
錯誤提示的方式跟上面的正確提示的方式類似,只是條件不同,條件為:
效果為:
以上是簡單的登錄界面的實現,通過繼續學習,我會逐步更新自己所學。