Axure就不多介紹了,一般對(duì)產(chǎn)品崗位比較了解的都知道,常用的原型工具。這里為大家做一個(gè)用動(dòng)態(tài)面板做簡(jiǎn)單的banner圖片輪播的方法。
一、基礎(chǔ)準(zhǔn)備工作
1、打開(kāi)Axure,頁(yè)面名稱命名為“圖片輪播”;在左側(cè)部件(線框圖)中,選擇動(dòng)態(tài)面板,左鍵選中,并按住左鍵,拖動(dòng)其至工作臺(tái)頁(yè)面中,如圖,在上方菜單欄將寬調(diào)整為400,高為200(寬高根據(jù)個(gè)人需求來(lái)自行設(shè)置)
2、雙擊建立的動(dòng)態(tài)面板,彈出“動(dòng)態(tài)面板狀態(tài)管理”窗口。給當(dāng)前動(dòng)態(tài)面板起名字為“圖片輪播”;在面板狀態(tài)區(qū)域,點(diǎn)擊“+”增加狀態(tài),需要有幾個(gè)圖片輪播,建立幾個(gè)狀態(tài),在每個(gè)狀態(tài)上,右鍵,可重命名,當(dāng)前我們做三個(gè)圖片輪播的,命名為“圖1”“圖2“”圖3“。完成后,點(diǎn)擊窗口的確定按鈕。
3、在右側(cè)窗口下方“部件管理”,雙擊動(dòng)態(tài)面板的狀態(tài)“圖1”;(注意,如果看不到部件管理,可以在菜單欄的“視圖”-“面板”設(shè)置);在左側(cè)的“部件”,左鍵選中并拖動(dòng)一個(gè)“圖片”放置于當(dāng)前的工作窗口中。
4、雙擊圖片的圖標(biāo),彈出選擇圖片的路徑框,這里大家選擇需要輪播的圖片就可以了,將圖片選中后確認(rèn)即可在工作臺(tái)窗口打開(kāi)圖片;這里需要大家注意,如果圖片的邊緣位于當(dāng)前狀態(tài)框(虛線)的外面,需要拖動(dòng)當(dāng)前圖片到虛線內(nèi),或者過(guò)大的需要裁剪(選中圖片,右鍵可裁剪圖片),或者調(diào)整圖片大小,能將圖片放置于虛線框內(nèi),否則完成后的原型會(huì)無(wú)法顯示全等問(wèn)題。
5、設(shè)置完成圖1后,我們需要用同樣的方法設(shè)置圖2和圖3,這里不細(xì)說(shuō)了
6、三個(gè)圖片均設(shè)置完成后,點(diǎn)擊左側(cè)上方的“圖片輪播“頁(yè)面,返回主頁(yè)面,這里我們可以看到之前的動(dòng)態(tài)面板已經(jīng)默認(rèn)顯示圖1的圖片了。
二、圖片輪播的動(dòng)態(tài)面板設(shè)置步驟
1、選中動(dòng)態(tài)工作頁(yè)面的動(dòng)態(tài)面板,在右側(cè)“部件交互和注釋”的“載入時(shí)”右鍵,選擇“新增用例”,彈出窗口“用例編輯器”
新聞熱點(diǎn)
疑難解答