Axure8.0原型案例:做一個“二般”的登錄窗口
登錄窗口在我們日常使用應用或者打開網站時都會碰到,已經屢見不鮮,今天瀏覽網頁的時候,看到一個登錄窗口,感覺動效還挺好的,就用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ā)布于人人都是產品經理。未經許可,禁止轉載。
在嗎?你那個無邊框文本框是通過文本框設置而成的還是就是一個組件?如果有,能發(fā)給我嗎?多謝!
在設置slider拖動結束時,設置slider的文本為對勾的時候,怎么使用的字體圖標,在富文本編輯中沒有添加的位置
那個無邊框文本框是通過文本框設置而成的還是就是一個組件?如果有,能發(fā)給我嗎?多謝!
技巧和技能相輔相成,一項技能包括多項技巧,技巧積累到一定程度會形成新的技能;一項技巧可容納多項技能,技能積累到一定程度會形成新的技巧。
“slider設置文本為對號(用的是字體圖標)”,請問slider里面的文本怎么設置為字體圖標?元件文字嗎?
http://www.axure.com.cn/2309/ 跟文字使用一樣,可以通過字號改變大小,可以像文字一樣去使用,只不過顯示的是圖標
第一點,slider是先畫一個圓形,然后在里面輸入字體圖標,然后再轉化成動態(tài)面板(你可以網上搜一下字體圖標);第二點確實是我寫錯了,謝謝指正
ok
1、關于“slider設置文本為對號(用的是字體圖標)”這一段不是很能理解,前面的操作已經將slider設置成動態(tài)了,那這里的用例是怎么做?
2、關于“再添加用例2,其他情況時,也就是有輸入的情況,添加用例“l(fā)ine向右滑動100s隱藏”。”對應圖片上的內容是“向左滑動”