不管是在PC端還是移動(dòng)端，輪播圖是常見的設(shè)計(jì)元素，一般產(chǎn)品的首頁位置都會(huì)通過輪播圖的方式來展示重點(diǎn)推薦的內(nèi)容。本文作者介紹了如何用Axure實(shí)現(xiàn)輪播圖效果的操作步驟，與大家分享。

案例展示：輪播圖

工具：Axure RP9

一、輪播圖設(shè)計(jì)構(gòu)思

二、按部就班，逐個(gè)擊破

1. 先畫輪播圖的整體的結(jié)構(gòu)

如下圖：動(dòng)態(tài)面板（375*195）、圓（3個(gè)，10*10）、向左、向右按鈕圖片（40*40）

（1) 動(dòng)態(tài)面板：給動(dòng)態(tài)面板每一層面板填充顏色（因?yàn)橛姓覉D糾結(jié)癥，哈哈哈）

（2）三個(gè)圓（專業(yè)術(shù)語：指示器）：圓設(shè)置成選項(xiàng)組。（選項(xiàng)組作用：同一個(gè)選項(xiàng)組的元件，當(dāng)其中一個(gè)部件被選中時(shí)，系統(tǒng)會(huì)自動(dòng)取消選擇其他部件。）

操作：同時(shí)選中三個(gè)圓（圓從左至右分別命名為“槽點(diǎn)1”、“槽點(diǎn)2”、“槽點(diǎn)3”），鼠標(biāo)右鍵，點(diǎn)擊【設(shè)置選項(xiàng)組】，給選選項(xiàng)組命名后，點(diǎn)擊確定；

依次給每一個(gè)圓【添加交互樣式】—【元件選中的樣式】選擇填充顏色。（注：第一個(gè)圓點(diǎn)要默認(rèn)選擇狀態(tài)：“形狀屬性”— 勾選“選中”）

雛形已出，接下就是功能了。

2. 自動(dòng)輪播

選擇 【動(dòng)態(tài)面板】 —? 點(diǎn)擊【新建交互】 — 選擇【載入時(shí)】— 【設(shè)置面板狀態(tài)】點(diǎn)擊完成就完成了自動(dòng)輪播的效果了，是不是很簡(jiǎn)單。

3. 點(diǎn)擊圓點(diǎn)切換

（1）設(shè)置面板狀態(tài)與圓點(diǎn)的對(duì)應(yīng)關(guān)系。? ? ?面板狀態(tài)為輪播圖1時(shí)，對(duì)應(yīng)圓點(diǎn)1；面板狀態(tài)為輪播圖2時(shí)，對(duì)應(yīng)圓點(diǎn)2；面板狀態(tài)為輪播圖3時(shí)，對(duì)應(yīng)圓點(diǎn)3。
點(diǎn)擊輪播面板，在交互中點(diǎn)擊【新建交互】—【狀態(tài)改變時(shí)】—【添加情形】，點(diǎn)擊確定。條件狀態(tài)設(shè)置如下：

重復(fù)以上操作兩次，條件為面板狀態(tài)==輪播圖2時(shí)，選中圓2；條件為面板狀態(tài)==輪播圖3時(shí)，選中圓3。如下圖：

（2）點(diǎn)擊圓點(diǎn)時(shí)展示對(duì)應(yīng)圖片，以及圖片進(jìn)入、退出動(dòng)畫方式的設(shè)置。點(diǎn)擊圓1，在交互中選擇【新建交互】，【單擊時(shí)】，【設(shè)置面板狀態(tài)】，選擇輪播圖1和動(dòng)畫方式。如下圖：

只有上面運(yùn)行預(yù)覽你會(huì)發(fā)現(xiàn)點(diǎn)擊之后輪播圖會(huì)不循環(huán)了，what？所以，點(diǎn)擊圓點(diǎn)出現(xiàn)對(duì)應(yīng)圖片后，還需要循環(huán)展示圖片的動(dòng)作，所以還需加上以下步驟：

選中圓1，點(diǎn)擊【添加動(dòng)作】點(diǎn)擊【設(shè)置面板】，選擇【下一項(xiàng)】狀態(tài),設(shè)置循環(huán)效果，如下圖：

對(duì)圓2、圓3進(jìn)行同樣的動(dòng)作設(shè)置（圓2選擇狀態(tài)為輪播圖2，圓3選擇狀態(tài)為輪播圖3）

4. 左右切換

（1）點(diǎn)擊向左按鈕時(shí)，展示前一張圖片。如果當(dāng)前圖片為第一張輪播圖，則點(diǎn)擊向左，出現(xiàn)第三張輪播圖

選中向左的元件，【新建交互】，【單擊時(shí)】，【添加情形】在情形下【添加動(dòng)作】【設(shè)置面板狀態(tài)】如下：

和上面的圓點(diǎn)設(shè)置一樣，要注意的是在點(diǎn)擊切換完成了，還需要繼續(xù)循環(huán)展示，所以需要繼續(xù)【添加動(dòng)作】、【設(shè)置面板狀態(tài)】如下：

（2）其他兩個(gè)情形思路和向右切換的思路也是一樣設(shè)置，如圖下：

5. 左右滑動(dòng)切換

這個(gè)左右滑動(dòng)切換和點(diǎn)擊上下切換，的區(qū)別只是，【新建交互】對(duì)動(dòng)態(tài)面板【向左拖動(dòng)結(jié)束時(shí)】和【向右拖動(dòng)結(jié)束時(shí)】，思路一樣，直接貼圖了哈。

設(shè)置完上面的，就可以在Axure中完成輪播圖的制作啦。點(diǎn)擊預(yù)覽，即可看到輪播圖的效果了~

可以保存好，當(dāng)母版，方便以后快速運(yùn)用額。

參考鏈接：

https://www.jianshu.com/p/628a22c1f653

本文由 @人事匆匆 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。