Axure是一種簡單常見的快速設計原型工具，能快速高效的設計原型，還支持多人協作設計以及版本控制管理。今天就給大家分享一下比較長常見的用戶登錄制作方法，產品小白看過來!

　　一、元件準備

　　首選得知道用戶名和密碼的輸入框是有哪些元件組成的，矩形、icon、文本框就是最近本的元件了。

　　先來看用戶名輸入框，元件進行命名，矩形框為“矩形1”，文本框為“用戶名”。文本框屬性設置：類型為“text”，勾選“隱藏邊框”。提示文字寫“用戶名、郵箱、手機號”。這樣三個元件組合命名為“用戶名輸入框”。

　　現在輪到密碼輸入框，跟上面的操作其實大同小異，矩形框為“矩形2”，文本框為“密碼”。文本框屬性設置：類型為“密碼”，勾選“隱藏邊框”。提示文字寫“登錄密碼”。

　　如下圖所示，排列好各元件在界面中的位置，原件準備這一步就算完成了。

　　二、登錄交互

　　登錄交互其實就包括兩個方面：鼠標選中輸入框“高亮”和點擊登錄時用戶名和密碼的校驗。

　　1、選中輸入框“高亮”

　　如下圖所標識1、2、3、4的順序進行用戶名輸入框和icon進行設置，icon的選中狀態設置是相同的方式。

　　然后選中用戶名文本框，如圖所示設置獲取和失去焦點時，選中狀態的矩形和icon的值。

　　密碼輸入框的設置也是一樣的，設置成功預覽如下圖。

　　2、點擊登錄時的校驗交互

　　登錄驗證組成部分：用戶名、密碼為空，用戶名不存在和用戶或密碼輸入錯誤登陸登錄失敗。

　　這就需要添加一個動態面板，命名為“提示”，設置為“隱藏”，如圖所示添加好4種對應狀態。其中“登陸成功”可以不用，因為登錄成功后就直接跳轉了，并不用再提示。

　　最后是設置登錄按鈕校驗交互，“用例編輯”―“鼠標單擊時”鼠標點擊時用例就添加好了，“編輯條件”下設立條件，點擊“確定”即可，再增加下推元件效果就完成了。

　　整體效果預覽如下：

　　好了，這就是Axure的用法，如果小伙伴么還有其他好的方法，歡迎評論區分享。