Axure就不多介紹了，一般對產品崗位比較了解的都知道，常用的原型工具。這里為大家做一個用動態(tài)面板做簡單的banner圖片輪播的方法。

原型設計工具Axure RP Pro 8.1特別版 中文漢化特別版(附漢化包+注冊碼+安裝教程)

• 類型：輔助設計
• 大?。?/span>90.5MB
• 語言：簡體中文
• 時間：2018-05-24

查看詳情

一、基礎準備工作

1、打開Axure，頁面名稱命名為“圖片輪播”；在左側部件（線框圖）中，選擇動態(tài)面板，左鍵選中，并按住左鍵，拖動其至工作臺頁面中，如圖，在上方菜單欄將寬調整為400，高為200（寬高根據(jù)個人需求來自行設置）

2、雙擊建立的動態(tài)面板，彈出“動態(tài)面板狀態(tài)管理”窗口。給當前動態(tài)面板起名字為“圖片輪播”；在面板狀態(tài)區(qū)域，點擊“+”增加狀態(tài)，需要有幾個圖片輪播，建立幾個狀態(tài)，在每個狀態(tài)上，右鍵，可重命名，當前我們做三個圖片輪播的，命名為“圖1”“圖2“”圖3“。完成后，點擊窗口的確定按鈕。

3、在右側窗口下方“部件管理”，雙擊動態(tài)面板的狀態(tài)“圖1”；（注意，如果看不到部件管理，可以在菜單欄的“視圖”-“面板”設置）；在左側的“部件”，左鍵選中并拖動一個“圖片”放置于當前的工作窗口中。

4、雙擊圖片的圖標，彈出選擇圖片的路徑框，這里大家選擇需要輪播的圖片就可以了，將圖片選中后確認即可在工作臺窗口打開圖片；這里需要大家注意，如果圖片的邊緣位于當前狀態(tài)框（虛線）的外面，需要拖動當前圖片到虛線內，或者過大的需要裁剪（選中圖片，右鍵可裁剪圖片），或者調整圖片大小，能將圖片放置于虛線框內，否則完成后的原型會無法顯示全等問題。

5、設置完成圖1后，我們需要用同樣的方法設置圖2和圖3，這里不細說了

6、三個圖片均設置完成后，點擊左側上方的“圖片輪播“頁面，返回主頁面，這里我們可以看到之前的動態(tài)面板已經(jīng)默認顯示圖1的圖片了。

二、圖片輪播的動態(tài)面板設置步驟

1、選中動態(tài)工作頁面的動態(tài)面板，在右側“部件交互和注釋”的“載入時”右鍵，選擇“新增用例”，彈出窗口“用例編輯器”

2、在“用例編輯器”窗口“動態(tài)面板”，選擇設置面板狀態(tài)。

3、在第四步“配置動作”，選中“設置圖片輪播”，前面會表示√，表示選中；在“選中狀態(tài)”選擇“next”（表示正序輪播）previous（表示倒敘輪播）；并選中下面的“從最后一個到第一個自動循環(huán)”（這樣才能實現(xiàn)一直輪播）；可以選擇循環(huán)間隔時間，亦可以默認不設置。

4、進入時，退出時的動畫可以根據(jù)需求自行設置，我這里選擇了一個進入時，向右滑動，完成后，點擊確定按鈕。

5、可以F5預覽，或者生成原型文件，部分瀏覽器不支持的，建議大家默認IE。ok了，完成。

相關推薦：

Axure RP 8怎么創(chuàng)建圖形母板?

Axure 8.0中怎么制作手機上下滑動效果?

Axure RP 8怎么設置控制多選列表傳值的效果?

最新評論