Axure實例演示—登錄界面


                                 實例演示 ——登錄界面                                                 

                                             

 

①畫原型

用Axure畫一個簡潔的登錄頁面,包括用戶名(標簽名為txtUserName)和密碼(標簽名為txtPassword)的輸入框和登錄按鈕(txtSubmit)三個元素即可。

以上界面只是簡單的拖曳元件即可完成。

 

 

交互設計:

①當用戶文本框和密碼文本框獲得焦點時,則顯示輸入狀態,刪除提示文字(請輸入密碼,請輸入用戶名);如果失去焦點,且沒有輸入任何文字則顯示提示文字。效果如下:

做法:選擇用戶輸入框;單擊獲得焦點事件添加一個用例。

 

單擊設置變量/部件值,選擇打開設置值編輯器。

設置如下:部件文字  (txtUserName)等於值(空),即當用戶名輸入文本框獲得焦點時置空。

當文本框失去焦點時,如果用戶沒有輸入信息,則仍顯示提示信息(請輸入用戶名、請輸入密碼):

首先添加失去焦點事件的用例:

添加條件:當用戶沒有輸入任何值時:

繼續設置部件值(請輸入用戶名)

②輸入正確和錯誤的判斷及提示

輸入正確提示:

制作動態面板,設置其為隱藏:

單擊SIGNIN,添加OnClick(點擊時)用例,添加條件如下(添加方式看上文)

 

效果展示:

錯誤提示的方式跟上面的正確提示的方式類似,只是條件不同,條件為:

 

效果為:

 

       以上是簡單的登錄界面的實現,通過繼續學習,我會逐步更新自己所學。

 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM