起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)Axure教程：制作漸變色用戶登錄交互
編輯導(dǎo)語(yǔ)：用戶登錄界面是吸引用戶的一個(gè)很重要的手段，新穎的界面往往可以給用戶留下深刻的印象，從而提升一款產(chǎn)品的好感。那么，如何用Axure制作漸變色用戶登錄交互呢？本文作者通過(guò)實(shí)際操作為我們進(jìn)行了分享，快來(lái)一起學(xué)習(xí)吧啊。
在系統(tǒng)產(chǎn)品設(shè)計(jì)過(guò)程登錄窗口的交互設(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è)置頁(yè)面載入時(shí)，背景大小。
如下圖，分別設(shè)置背景的對(duì)應(yīng)的寬高，這邊使用到[[Window.width]]和[[Window.height]]。主要功能是獲取當(dāng)前窗口寬高，這樣在小點(diǎn)的屏幕小預(yù)覽就不會(huì)有滾動(dòng)條了。
到此，登錄背景就完成了。
二、用戶名和密碼框設(shè)計(jì)
用戶名和密碼框由三個(gè)元件組成，矩形，文本輸入框，icon。我們可以先做好用戶名的，密碼原型一樣。
給矩形框設(shè)置選中交互、邊框顏色、可見(jiàn)邊框、線段顏色，可以按需要設(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í)可以將其組合起來(lái)。復(fù)制一個(gè)密碼組合，進(jìn)行密碼框交互修改。
三、登錄按鈕判斷制作
用戶登錄會(huì)有很多種情況，可能用戶名和密碼都不正確?；蛴幸粋€(gè)沒(méi)填寫我們希望在提示錯(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í)，提示密碼不能為空，并選中用戶矩形為ture。
當(dāng)然你還可以制作添加更多的交互，這邊不做講解。
作者：符號(hào)，目前從事互聯(lián)網(wǎng)電子商務(wù)項(xiàng)目，崗位產(chǎn)品負(fù)責(zé)人一枚
本文由 @符號(hào) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
??
牛
原型預(yù)覽地址：https://www.2u3u.com/soft/