登錄窗口在我們?nèi)粘Ｊ褂脩?yīng)用或者打開(kāi)網(wǎng)站時(shí)都會(huì)碰到，已經(jīng)屢見(jiàn)不鮮，今天瀏覽網(wǎng)頁(yè)的時(shí)候，看到一個(gè)登錄窗口，感覺(jué)動(dòng)效還挺好的，就用Axure做了一個(gè)原型，供大家參考學(xué)習(xí)。

效果描述

1、Email獲取焦點(diǎn)時(shí)，提示文案“Email”變小上移，同時(shí)下劃線變色顯示待輸入狀態(tài)；失去焦點(diǎn)時(shí)，無(wú)輸入則返回默認(rèn)狀態(tài)，有輸入則只有下劃線回到默認(rèn)狀態(tài)，Code輸入同理。

2、拖動(dòng)滑塊進(jìn)行驗(yàn)證，沒(méi)拖到最右邊，拖動(dòng)結(jié)束時(shí)彈回原位置；拖到最右邊，拖動(dòng)結(jié)束時(shí)顯示驗(yàn)證成功！

原型演示鏈接：http://jabzj8.axshare.com

元件準(zhǔn)備

Email輸入框：“Email”文本+無(wú)邊框文本框+下劃線（Code同理）

滑動(dòng)驗(yàn)證：滑塊動(dòng)態(tài)面板+底層滑道

登錄按鈕：登錄按鈕

命名：“Email”文本命名“hint”；無(wú)邊框文本命名“input”；滑動(dòng)動(dòng)態(tài)面板命名為“slider”；底層滑動(dòng)命名為“slider frame”；登錄按鈕命名為“button”。

添加用例

一、首先制作Email輸入效果

無(wú)邊框文本框“input”獲取焦點(diǎn)時(shí)，Email文本“hint”變小上移，同時(shí)下劃線變色顯示待輸入狀態(tài)；失去焦點(diǎn)時(shí)，無(wú)輸入則返回默認(rèn)狀態(tài)，有輸入則只有下劃線回到默認(rèn)狀態(tài)。

1、設(shè)置“hint”的選中狀態(tài)為字號(hào)變小一點(diǎn)；畫一條帶顏色的下劃線，命名為“l(fā)ine”并設(shè)置為隱藏。

2、選中“input”，添加用例“當(dāng)獲取焦點(diǎn)時(shí)，hint選中狀態(tài)為Ture；hint200ms線性移到某個(gè)位置（我是直接移動(dòng)到某個(gè)坐標(biāo)的）；且line向右滑動(dòng)100s顯示”。

3、為“input”失去焦點(diǎn)時(shí)添加用例，這里分沒(méi)有輸入的情況和有輸入的情況，設(shè)置用例時(shí)需要添加條件，添加用例“if 文字于 input == “”時(shí)（即輸入為空時(shí)），hint選中狀態(tài)為False；hint200ms線性回到初始位置（我也是直接移動(dòng)到初始坐標(biāo)的）；且line向右滑動(dòng)100s隱藏”。

4、再添加用例2，其他情況時(shí)，也就是有輸入的情況，添加用例“l(fā)ine向右滑動(dòng)100s隱藏”。

5、Code輸入效果模仿Email輸入制作就可以了。

二、制作滑塊滑動(dòng)驗(yàn)證效果

拖動(dòng)滑塊進(jìn)行驗(yàn)證，沒(méi)拖到最右邊，拖動(dòng)結(jié)束時(shí)彈回原位置；拖到最右邊，拖動(dòng)結(jié)束時(shí)顯示驗(yàn)證成功！

1、設(shè)置滑塊“slider”（設(shè)置為動(dòng)態(tài)面板才能添加拖動(dòng)事件）可以拖動(dòng)，添加用例“拖動(dòng)時(shí)，slider在？水平拖動(dòng)”，這時(shí)需要設(shè)置邊界？，保證slider在這個(gè)邊界區(qū)間滑動(dòng)，而不是隨意拖動(dòng)位置。

這里用滑塊slider的左側(cè)和右側(cè)所處x軸數(shù)值為邊界區(qū)間，即滑塊在>=左側(cè)x坐標(biāo)值、<=右側(cè)x坐標(biāo)值之間拖動(dòng)，如下圖所示。

用例設(shè)置界面如下：

2、設(shè)置滑塊slider拖動(dòng)結(jié)束時(shí)的效果，有兩種情況，一是沒(méi)拖到最右邊，返回原位置；另一種是拖到最右邊，驗(yàn)證通過(guò)。這邊我們可以在最右邊添加一個(gè)透明的元件，我用的是熱區(qū)“contact”，我們可以設(shè)置滑塊slider沒(méi)接觸到熱區(qū)和接觸到熱區(qū)，即沒(méi)拖到最右邊和拖到最右邊（contact和底層滑道有1像素的重疊）。

為拖動(dòng)結(jié)束時(shí)，添加用例“if 區(qū)域于 slider 接觸 區(qū)域于 contact，底層滑道slider frame設(shè)置文本為?恭喜您，驗(yàn)證通過(guò)?。籹lider設(shè)置文本為對(duì)號(hào)（用的是字體圖標(biāo)）”（提示：這里的設(shè)置文本，都是選擇的富文本，不是值，因?yàn)楦晃谋究梢跃庉嬜煮w的顏色和大小等屬性）。

3、再添加用例2，其他情況時(shí)，即沒(méi)有接觸到contact時(shí)，添加用例“回到拖動(dòng)前位置”。

三、制作登錄按鈕移入和點(diǎn)擊狀態(tài)。

登錄按鈕“button”移入時(shí)有反饋，點(diǎn)擊有反饋，點(diǎn)擊后回到默認(rèn)狀態(tài)，所以要設(shè)置懸停和按下?tīng)顟B(tài)（上面說(shuō)的選中狀態(tài)的設(shè)置就在這里設(shè)置）。

完成，生成Html預(yù)覽

按下“F5”預(yù)覽下，看看實(shí)際效果吧！

有問(wèn)題可以隨時(shí)交流哦！

本文由 @ 焦戶易美 （微信公眾號(hào)“焦戶易美”）原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。