登錄窗口在我們日常使用應用或者打開網站時都會碰到，已經屢見不鮮，今天瀏覽網頁的時候，看到一個登錄窗口，感覺動效還挺好的，就用Axure做了一個原型，供大家參考學習。

效果描述

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

2、拖動滑塊進行驗證，沒拖到最右邊，拖動結束時彈回原位置；拖到最右邊，拖動結束時顯示驗證成功！

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

元件準備

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

滑動驗證：滑塊動態(tài)面板+底層滑道

登錄按鈕：登錄按鈕

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

添加用例

一、首先制作Email輸入效果

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

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

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

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

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

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

二、制作滑塊滑動驗證效果

拖動滑塊進行驗證，沒拖到最右邊，拖動結束時彈回原位置；拖到最右邊，拖動結束時顯示驗證成功！

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

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

用例設置界面如下：

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

為拖動結束時，添加用例“if 區(qū)域于 slider 接觸 區(qū)域于 contact，底層滑道slider frame設置文本為?恭喜您，驗證通過！；slider設置文本為對號（用的是字體圖標）”（提示：這里的設置文本，都是選擇的富文本，不是值，因為富文本可以編輯字體的顏色和大小等屬性）。

3、再添加用例2，其他情況時，即沒有接觸到contact時，添加用例“回到拖動前位置”。

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

登錄按鈕“button”移入時有反饋，點擊有反饋，點擊后回到默認狀態(tài)，所以要設置懸停和按下狀態(tài)（上面說的選中狀態(tài)的設置就在這里設置）。

完成，生成Html預覽

按下“F5”預覽下，看看實際效果吧！

有問題可以隨時交流哦！

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