Axure實例教程:仿淘寶搜索原型
發(fā)布時間:2022-03-21 09:54 [ 我要自學網原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 1891

做了個模仿淘寶搜索原型,先上圖啦
axure原型:簡單搜索
看似簡單的搜索欄,包括的內容可不少哦,包含了:矩形、文本框、動態(tài)面板等。

操作步驟:

一、添加元件

1.新建三個矩形, 寬:51,高:26 , 無填充色、無邊框, 分別命名為:寶貝、天貓、店鋪,并為三個矩形添加交互,設置鼠標懸停與選中的交互樣式;
注:選中的交互樣式中,天貓的填充色與其它兩個不一樣哦。
2.新建一個動態(tài)面板,寬:720,高:39,命名為:搜索,添加3個狀態(tài),分別命名為: 寶貝、天貓、店鋪 ;
3.分別編輯3個狀態(tài),以寶貝狀態(tài)為例
3.1.添加3個矩形
    1.寬:720,高:39,填充色:橙色
    2.寬:616,高:33,命名:寶貝-搜索框
    3.寬:81,高:35 ,填充色:橙色 ,字體:白色
3.2.添加放大鏡圖片,命名:放大鏡-寶貝
以類似的方法添加另外兩個狀態(tài)中的元件;

二、添加動作

1.選中“寶貝”元件,添加鼠標單擊時的動作,如下圖
注:在此添加了光標定位,選中某個標簽時,光標就直接定位在搜索框內,可直接輸入文字,省去鼠標再次定位的動作,更加人性化,很多網站目前還是要再多點一步的。
axure原型:簡單搜索

用類似的方法添加另外兩個矩形的 鼠標單擊時的動作 

2.為動態(tài)面板中“寶貝”狀態(tài)添加動作
選中“寶貝-搜索框”,添加文字改變時的動作和失去焦點的動作

axure原型:簡單搜索
用類似的方法添加另外兩個動態(tài)面板狀態(tài)的動作

完成到還差一步哦,在最后,添加頁面交互,添加頁面載入時的動作,如圖
axure原型:簡單搜索
到這里,大功告成

UI交互app及axure設計教程
我要自學網商城 ¥50 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔因您的行為而導致的法律責任,
本站有權保留或刪除有爭議評論。
參與本評論即表明您已經閱讀并接受
上述條款。
V
特惠充值
聯系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設計 室內設計 室外設計 機械設計 工業(yè)自動化 影視動畫 程序開發(fā) 網頁設計 會計課程 興趣成長 AIGC