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