編輯導語：用戶登錄界面是吸引用戶的一個很重要的手段，新穎的界面往往可以給用戶留下深刻的印象，從而提升一款產(chǎn)品的好感。那么，如何用Axure制作漸變色用戶登錄交互呢？本文作者通過實際操作為我們進行了分享，快來一起學習吧啊。

在系統(tǒng)產(chǎn)品設(shè)計過程登錄窗口的交互設(shè)計是不可少步驟，今天符號給新人分享一個用Axure制作一個用戶登錄界面的教程。

先預覽一下最終實現(xiàn)的效果：

本教程案例主要使用到的元件有：

1. 矩形
2. 文本輸入框
3. 動態(tài)面板
4. 按鈕元件
5. 元件漸變

操作流程：

一、制作登錄背景

拖入一個矩形做為登錄的背景設(shè)置尺寸 1920×1080，如下圖：

設(shè)置背景顏色，這邊使用到了顏色漸變工具，顏色可以按需要設(shè)置，如下圖：

給背景設(shè)置鼠標移入交互。這邊也是用到了漸變。原理就是鼠標懸停后，改變背景的顏色。

設(shè)置頁面載入時，背景大小。

如下圖，分別設(shè)置背景的對應(yīng)的寬高，這邊使用到[[Window.width]]和[[Window.height]]。主要功能是獲取當前窗口寬高，這樣在小點的屏幕小預覽就不會有滾動條了。

到此，登錄背景就完成了。

二、用戶名和密碼框設(shè)計

用戶名和密碼框由三個元件組成，矩形，文本輸入框，icon。我們可以先做好用戶名的，密碼原型一樣。

給矩形框設(shè)置選中交互、邊框顏色、可見邊框、線段顏色，可以按需要設(shè)置。

拖入一個文本輸入框，命名為賬戶，給這個文本框設(shè)置獲取焦點交互。

當獲取到焦點時，也就是輸入選中進入切換時，選中(ture)賬號和賬號icon（icon可在Iconfont獲?。?。

設(shè)置失去焦點時，將賬號和賬號icon設(shè)置為false。

到這邊用戶名輸入相關(guān)交互做好了。這時可以將其組合起來。復制一個密碼組合，進行密碼框交互修改。

三、登錄按鈕判斷制作

用戶登錄會有很多種情況，可能用戶名和密碼都不正確?；蛴幸粋€沒填寫我們希望在提示錯誤信息時，能在對應(yīng)的項目中做動效。

具體交互如下圖：

• 第一個case意思是，如果用戶名和密碼都為fuhao。點擊按鈕時，提示信息正確。
• 第二個case2意思是，如果用戶名為空時。點擊按鈕時，提示用戶名不能為空，并選中用戶矩形為ture。
• 第三個case3意思是，如果密碼為空時。點擊按鈕時，提示密碼不能為空，并選中用戶矩形為ture。

當然你還可以制作添加更多的交互，這邊不做講解。

作者：符號，目前從事互聯(lián)網(wǎng)電子商務(wù)項目，崗位產(chǎn)品負責人一枚

本文由 @符號 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議