不管是在PC端還是移動端，輪播圖是常見的設計元素，一般產品的首頁位置都會透過輪播圖的方式來展示重點推薦的內容。本文作者介紹瞭如何用Axure實現輪播圖效果的操作步驟，與大家分享。
案例展示：輪播圖
工具：Axure RP9
一、輪播圖設計構思
如下圖：動態面板（375*195）、圓（3個，10*10）、向左、向右按鈕圖片（40*40）
（1) 動態面板：給動態面板每一層面板填充顏色（因為有找圖糾結症，哈哈哈）
（2）三個圓（專業術語：指示器）：圓設定成選項組。（選項組作用：同一個選項組的元件，當其中一個部件被選中時，系統會自動取消選擇其他部件。）
操作：同時選中三個圓（圓從左至右分別命名為“槽點1”、“槽點2”、“槽點3”），滑鼠右鍵，點選【設定選項組】，給選選項組命名後，點選確定；
依次給每一個圓【新增互動樣式】—【元件選中的樣式】選擇填充顏色。（注：第一個圓點要預設選擇狀態：“形狀屬性”— 勾選“選中”）
雛形已出，接下就是功能了。
2. 自動輪播選擇 【動態面板】 — 點選【新建互動】 — 選擇【載入時】— 【設定面板狀態】點選完成就完成了自動輪播的效果了，是不是很簡單。
（1）設定面板狀態與圓點的對應關係。 面板狀態為輪播圖1時，對應圓點1；面板狀態為輪播圖2時，對應圓點2；面板狀態為輪播圖3時，對應圓點3。 點選輪播面板，在互動中點選【新建互動】—【狀態改變時】—【新增情形】，點選確定。條件狀態設定如下：
重複以上操作兩次，條件為面板狀態==輪播圖2時，選中圓2；條件為面板狀態==輪播圖3時，選中圓3。如下圖：
（2）點選圓點時展示對應圖片，以及圖片進入、退出動畫方式的設定。點選圓1，在互動中選擇【新建互動】，【單擊時】，【設定面板狀態】，選擇輪播圖1和動畫方式。如下圖：
只有上面執行預覽你會發現點選之後輪播圖會不迴圈了，what？所以，點選圓點出現對應圖片後，還需要迴圈展示圖片的動作，所以還需加上以下步驟：
選中圓1，點選【新增動作】點選【設定面板】，選擇【下一項】狀態,設定迴圈效果，如下圖：
對圓2、圓3進行同樣的動作設定（圓2選擇狀態為輪播圖2，圓3選擇狀態為輪播圖3）
4. 左右切換（1）點擊向左按鈕時，展示前一張圖片。如果當前圖片為第一張輪播圖，則點擊向左，出現第三張輪播圖
選中向左的元件，【新建互動】，【單擊時】，【新增情形】在情形下【新增動作】【設定面板狀態】如下：
和上面的圓點設定一樣，要注意的是在點選切換完成了，還需要繼續迴圈展示，所以需要繼續【新增動作】、【設定面板狀態】如下：
（2）其他兩個情形思路和向右切換的思路也是一樣設定，如圖下：
這個左右滑動切換和點選上下切換，的區別只是，【新建互動】對動態面板【向左拖動結束時】和【向右拖動結束時】，思路一樣，直接貼圖了哈。
設定完上面的，就可以在Axure中完成輪播圖的製作啦。點選預覽，即可看到輪播圖的效果了~
可以儲存好，當母版，方便以後快速運用額。
參考連結：https://www.jianshu.com/p/628a22c1f653
本文由 @人事匆匆 原創釋出於人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基於CC0協議。