Axure是一種簡單常見的快速設(shè)計原型工具，能快速高效的設(shè)計原型，還支持多人協(xié)作設(shè)計以及版本控制管理。今天就給大家分享一下比較長常見的用戶登錄制作方法，產(chǎn)品小白看過來!
一、元件準(zhǔn)備
首選得知道用戶名和密碼的輸入框是有哪些元件組成的，矩形、icon、文本框就是最近本的元件了。
先來看用戶名輸入框，元件進(jìn)行命名，矩形框?yàn)椤熬匦?”，文本框?yàn)椤坝脩裘薄Ｎ谋究驅(qū)傩栽O(shè)置：類型為“text”，勾選“隱藏邊框”。提示文字寫“用戶名、郵箱、手機(jī)號”。這樣三個元件組合命名為“用戶名輸入框”。
現(xiàn)在輪到密碼輸入框，跟上面的操作其實(shí)大同小異，矩形框?yàn)椤熬匦?”，文本框?yàn)椤懊艽a”。文本框?qū)傩栽O(shè)置：類型為“密碼”，勾選“隱藏邊框”。提示文字寫“登錄密碼”。
如下圖所示，排列好各元件在界面中的位置，原件準(zhǔn)備這一步就算完成了。
二、登錄交互
登錄交互其實(shí)就包括兩個方面：鼠標(biāo)選中輸入框“高亮”和點(diǎn)擊登錄時用戶名和密碼的校驗(yàn)。
1、選中輸入框“高亮”
如下圖所標(biāo)識1、2、3、4的順序進(jìn)行用戶名輸入框和icon進(jìn)行設(shè)置，icon的選中狀態(tài)設(shè)置是相同的方式。
然后選中用戶名文本框，如圖所示設(shè)置獲取和失去焦點(diǎn)時，選中狀態(tài)的矩形和icon的值。
密碼輸入框的設(shè)置也是一樣的，設(shè)置成功預(yù)覽如下圖。
2、點(diǎn)擊登錄時的校驗(yàn)交互
登錄驗(yàn)證組成部分：用戶名、密碼為空，用戶名不存在和用戶或密碼輸入錯誤登陸登錄失敗。
這就需要添加一個動態(tài)面板，命名為“提示”，設(shè)置為“隱藏”，如圖所示添加好4種對應(yīng)狀態(tài)。其中“登陸成功”可以不用，因?yàn)榈卿洺晒缶椭苯犹D(zhuǎn)了，并不用再提示。
最后是設(shè)置登錄按鈕校驗(yàn)交互，“用例編輯”—“鼠標(biāo)單擊時”鼠標(biāo)點(diǎn)擊時用例就添加好了，“編輯條件”下設(shè)立條件，點(diǎn)擊“確定”即可，再增加下推元件效果就完成了。
整體效果預(yù)覽如下：
好了，這就是Axure的用法，如果小伙伴么還有其他好的方法，歡迎評論區(qū)分享。
元?dú)庾烂?/a>
X
