很多電商、知識付費、運動類產品的首頁位置都會通過輪播圖的方式來展示重點推薦的內容，方便用戶最快觸達信息，對產品數據增長起到重要作用，接下來講解下如何使用Axure呈現該原型。

先看效果：

我們先對整個流程進行思路梳理：

1

拖入一個動態面板部件，并命名為“background”。

雙擊動態面板，增加兩個狀態，并分別命名“圖1” “圖2” “圖3”。

拖入一個矩形元件，調整尺寸為W：10 H：2?，命名為“block1”，并復制兩個，分別命名為“block2” “block3”，并設置交互樣式為選中時“填充顏色”為白色。

此處要注意要將三個矩形同時選中并設置“選項組名稱”，選項組的作用是，同一個選項組部件，當其中一個部件被選中時，其它部件會自動取消選中狀態。

分別進入動態面板background里的三個狀態，在每個狀態中拖入一個占位符并放入指定位置，占位符中標記好相應的圖片1，圖片2，圖片3。

在這里我用的是“占位符”，在實際制作中可以直接拖入圖片元件就行。

以上是準備工作部分，圖中的帶殼手機外框是另外準備的元件庫，有需要的可以在我公眾號獲取。

2

第二部分對準備好的部件添加交互用例。

為“background”動態面板添加「狀態改變時」用例，首先需要添加一個條件判斷。

當動態面板的狀態為「圖1」時，設置選中狀態為「block1」。

和“圖1”狀態一樣，再添加2個條件判斷后選中的狀態，如圖：

為“background”狀態面版添加「載入時」用例，添加第一個動作為「選中時」選擇「block1」；添加第二個動作「設置面板狀態」，選擇狀態「Next」并勾選“向后循環”“循環間隔”，設置動畫模式，調整秒數。（秒數可按不同情況配置）

到此，就能實現文章開頭第一個動畫中的自動輪播效果，但還不能實現手勢拖拽的效果。

3

接下來我們制作手勢拖動時的交互效果。

分別進入動態面板“background”下的三個狀態，并把狀態內的所有內容全選后右鍵“轉化為動態面板”，將新轉化到的動態面板分別命名為“drag1”“dara2”“drag3”。

分別為三個動態面板添加拖動時的用例動作，具體如下圖：

以上就是所有的步驟，最終效果就是文章開頭中所示的樣子，在這個過程中，有三個技巧點，一個是狀態面板的循環效果，二是對應不同狀態，動態面板可以與部件進行聯動，三是對于動態面板內部的狀態可以再次轉化成動態面板，用作拖拽手勢的連接件。

希望大家能夠多次嘗試練習，理解其中的關鍵點，也希望大家能夠養成一種習慣，在進行練習前對任務流程進行思路梳理，這樣對理解邏輯更有幫助，有任何問題歡迎來留言。

作者：杰森，微信公眾號：十八般產品

本文由 @杰森 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels ，基于 CC0 協議