Axure教程：制作漸變色用戶登錄交互

Axure教程：制作漸變色用戶登錄交互在系統(tǒng)產(chǎn)品設(shè)計(jì)過程登錄窗口的交互設(shè)計(jì)是不可少步驟，今天符號(hào)給新人分享一個(gè)用Axure制作一個(gè)用戶登錄界面的教程。先預(yù)覽一下最終實(shí)現(xiàn)的效果：本教程案例主要使用到的元件有：矩形文本輸入框動(dòng)態(tài)面板按鈕元件元件漸變操作流程：一、制作登錄背景拖入一個(gè)矩形做為登錄的背景設(shè)置尺寸1920×1080，如下圖：設(shè)置背景顏色，這邊使用到了顏色漸變工具，顏色可以按需要設(shè)置，如下圖：給背景設(shè)置鼠標(biāo)移入交互。這邊也是用到了漸變。原理就是鼠標(biāo)懸停后，改變背景的顏色。設(shè)置頁面載入時(shí)，背景大小。如下圖，分別設(shè)置背景的對(duì)應(yīng)的寬高，這邊使用到[[Window.width]]和[[Window.height]]。主要功能是獲取當(dāng)前窗口寬高，這樣在小點(diǎn)的屏幕小預(yù)覽就不會(huì)有滾動(dòng)條了。到此，登錄背景就完成了。二、用戶名和密碼框設(shè)計(jì)用戶名和密碼框由三個(gè)元件組成，矩形，文本輸入框，icon。我們可以先做好用戶名的，密碼原型一樣。給矩形框設(shè)置選中交互、邊框顏色、可見邊框、線段顏色，可以按需要設(shè)置。拖入一個(gè)文本輸入框，命名為賬戶，給這個(gè)文本框設(shè)置獲取焦點(diǎn)交互。當(dāng)獲取到焦點(diǎn)時(shí)，也就是輸入選中進(jìn)入切換時(shí)，選中(ture)賬號(hào)和賬號(hào)icon（icon可在Iconfont獲?。?。設(shè)置失去焦點(diǎn)時(shí)，將賬號(hào)和賬號(hào)icon設(shè)置為false。到這邊用戶名輸入相關(guān)交互做好了。這時(shí)可以將其組合起來。復(fù)制一個(gè)密碼組合，進(jìn)行密碼框交互修改。三、登錄按鈕判斷制作用戶登錄會(huì)有很多種情況，可能用戶名和密碼都不正確。或有一個(gè)沒填寫我們希望在提示錯(cuò)誤信息時(shí)，能在對(duì)應(yīng)的項(xiàng)目中做動(dòng)效。具體交互如下圖：第一個(gè)case意思是，如果用戶名和密碼都為fuhao。點(diǎn)擊按鈕時(shí)，提示信息正確。第二個(gè)case2意思是，如果用戶名為空時(shí)。點(diǎn)擊按鈕時(shí)，提示用戶名不能為空，并選中用戶矩形為ture。第三個(gè)case3意思是，如果密碼為空時(shí)。點(diǎn)擊按鈕時(shí)，提示密