做了個模仿淘寶搜索原型,先上圖啦
看似簡單的搜索欄,包括的內容可不少哦,包含了:矩形、文本框、動態(tài)面板等。
操作步驟:
一、添加元件
1.新建三個矩形, 寬:51,高:26
注:選中的交互樣式中,天貓的填充色與其它兩個不一樣哦。
2.新建一個動態(tài)面板,寬:720,高:39,命名為:搜索,添加3個狀態(tài),分別命名為: 寶貝、天貓、店鋪
3.分別編輯3個狀態(tài),以寶貝狀態(tài)為例
3.1.添加3個矩形
3.2.添加放大鏡圖片,命名:放大鏡-寶貝
以類似的方法添加另外兩個狀態(tài)中的元件;
二、添加動作
1.選中“寶貝”元件,添加鼠標單擊時的動作,如下圖
注:在此添加了光標定位,選中某個標簽時,光標就直接定位在搜索框內,可直接輸入文字,省去鼠標再次定位的動作,更加人性化,很多網站目前還是要再多點一步的。
用類似的方法添加另外兩個矩形的 鼠標單擊時的動作
2.為動態(tài)面板中“寶貝”狀態(tài)添加動作
選中“寶貝-搜索框”,添加文字改變時的動作和失去焦點的動作
用類似的方法添加另外兩個動態(tài)面板狀態(tài)的動作
完成到還差一步哦,在最后,添加頁面交互,添加頁面載入時的動作,如圖
到這里,大功告成
承擔因您的行為而導致的法律責任,
本站有權保留或刪除有爭議評論。
參與本評論即表明您已經閱讀并接受
上述條款。