實戰案例2:模擬百度賬號登錄界面設計,實現邊框變色及超鏈接

案例2:模擬百度賬號登錄界面設計

(1)元件準備:6個矩形,2個文本框,1個複選框,1張圖片

(2)分析:這個界面設計主要包括文本框的邊框變色及超鏈接的設置

                a.輸入框的樣式在兩種不同狀態下切換,當點擊時邊框變爲藍色,反之藍色消失,這個效果可以通過交互樣式實現;

                b.文本框獲取焦點時,呈現選中的樣式;

                c.文本框失去焦點時,呈現未選中的樣式;

                d.超鏈接的實現。

補充說明:

本案例中的輸入賬號及密碼這兩個“輸入框”是指矩形邊框與文本框共同的一組內容,而非文本框元件。



操作步驟:

1.“輸入框“”組合輸入實現:

首先選擇一個矩形,調整到適當大小,這裏爲了區分我們將它命名爲border01,然後選擇一個文本框,在屬性的提示文字中填寫“電話/郵箱/用戶名”,將它拖到矩形當中,使它儘量與border01大小吻合,並將該文本框命名爲“隱藏文本框01”;同理密碼輸入框的矩形命名爲border02,在屬性的提示文字中填寫“密碼”,並將文本框命名爲“隱藏文本框02”,爲了使界面美觀,我們將兩個文本框隱藏起來,具體操作如下:

2.邊框變色:當用戶點擊輸入框時,邊框變爲藍色。

 (1)邊框顏色選擇的具體操作:

(2)爲邊框顏色填充添加交互行爲:

(3)當不在選中邊框時,邊框顏色恢復初始狀態,要想實現這個功能,需要在“失去焦點時”添加一個交互行爲,添加方式與“獲取方式類似”,添加完成之後如下所示:

 

2.文本框的隱藏:

(1)未隱藏之前效果:

(2)雙擊文本框,勾選屬性中的隱藏邊框,隱藏之後如下所示:

3.選擇一個複選框並添加交互行爲,讓用戶可以選擇下次是否自動登錄,如下所示:

 

 添加一個按鈕,命名爲登錄按鈕,並修改按鈕標識爲“登錄”,這裏省略步驟。

4. 添加超鏈接,選擇兩個矩形,命名爲超鏈接01,在鼠標單擊時的交互中添加超鏈接,操作如下所示:

 “立即註冊”添加超鏈接的方式與“忘記密碼“”類似:

5.添加一張百度標識圖片及一個矩形來提示文字,將標識圖片直接複製到想要粘貼的位置,選擇一個矩形,在該矩形中輸入“用戶名密碼登錄”,並修改該矩形邊框的顏色爲白色,效果如下:

6.預覽效果與登錄百度賬號的頁面類似:

當點擊“忘記密碼”或者“立即註冊”會跳轉到設置的鏈接,這裏我是直接複製了百度賬號跳轉的鏈接,就不展示出來了。

經過這個案例的實操,我發現要模仿別人的頁面,花的時間也不算特別多,但是要想將整個操作過程全部完整的描述出來還是需要花很多時間的, 中間因爲種種事情間斷了很多次,導致搞了很久,今天終於把它完全整完了,歡迎大家指正。

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章