這個(gè)原型實(shí)現(xiàn)了任何你能想到的輪播交互，enjoy~

一、前期準(zhǔn)備

APP端的輪播效果，適合于banner的展示，在實(shí)戰(zhàn)中有很多的用處。首先我們應(yīng)該想一想，輪播樣式在界面上都應(yīng)該有什么，無(wú)非是兩點(diǎn)，一是banner，二是輪播的dot。第一步我們就應(yīng)該在Axure中搭出來(lái)banner和dot的樣式。這里我設(shè)置的是三個(gè)banner的輪播樣式。對(duì)于banner和輪播用的dot而言，牽扯到不同的狀態(tài)之間的切換，這里我們用到的是動(dòng)態(tài)面板，動(dòng)態(tài)面板可以有多種不同的狀態(tài)，通過(guò)添加交互用例實(shí)現(xiàn)面板之間的切換。

針對(duì)banner和輪播點(diǎn)，我們分別建立動(dòng)態(tài)面板，并命名為“banner”和“dot”，方便之后的操作。Banner面板里面建立三個(gè)狀態(tài)，命名為“1”“2”“3”，每個(gè)狀態(tài)里面放一張需要展示的banner。

這里需要注意的兩點(diǎn)細(xì)節(jié)：

1. 三個(gè)狀態(tài)的banner尺寸必須相同；
2. 三張圖片最好都加上淺色的邊框，這樣做的原因一是美觀，二是防止你的banner底色和界面底色重合，不能很好的分清兩者之間的邊界，這里我的邊框顏色選用的是#F2F2F2。

同樣的，dot也建立三個(gè)狀態(tài)，命名為“1”“2”“3”，每個(gè)狀態(tài)對(duì)應(yīng)的是不同的banner，紅點(diǎn)表示的是當(dāng)前的狀態(tài)被選中，灰點(diǎn)表示的是當(dāng)前狀態(tài)未選中。

這里的紅色我沒(méi)有選擇#FF0000這個(gè)最紅的顏色，而是選擇了弱一點(diǎn)的#DD0000，顏色上要好看一些，同樣的，灰點(diǎn)選的顏色依然是淺灰#F2F2F2。

具體樣式如下圖所示：

搭好了架子之后，我們這里要思考一下輪播會(huì)有哪些交互。現(xiàn)網(wǎng)中的常見(jiàn)輪播交互，我進(jìn)行了一個(gè)列舉：

1. 常規(guī)狀態(tài)下的循環(huán)滾動(dòng)。
2. 手指往左往右滑動(dòng)的樣式改變。
3. 手指點(diǎn)擊dot之后的樣式改變（這個(gè)交互由于dot現(xiàn)在做的越來(lái)越小，已經(jīng)不是很常見(jiàn)了）。

三點(diǎn)之間由簡(jiǎn)入繁，接下來(lái)，我們就依次的實(shí)現(xiàn)這三種交互。

二、常規(guī)狀態(tài)下的循環(huán)滾動(dòng)

這個(gè)交互在現(xiàn)網(wǎng)中的原型教學(xué)中比比皆是，但對(duì)于初學(xué)者來(lái)說(shuō)，只是知其然不知其所以然，很多細(xì)節(jié)沒(méi)有注意到，不能舉一反三。具體的操作步驟，我們可以先想一下APP端輪播的效果，都是載入頁(yè)面之后，banner就會(huì)開(kāi)始輪播，所以我們?cè)凇绊?yè)面載入時(shí)”這塊加一個(gè)交互用例，選擇設(shè)置面板狀態(tài)，對(duì)dot和banner分別進(jìn)行設(shè)置。對(duì)于banner和dot面板，都要在狀態(tài)選擇里面勾選“next”，next表示針對(duì)面板當(dāng)前的狀態(tài)的下一個(gè)狀態(tài)。并且勾選下面的向后循環(huán)，向后循環(huán)的意思是：如果當(dāng)前面板是最后一個(gè)狀態(tài)，next會(huì)跳到面板的第一個(gè)狀態(tài)。有些同學(xué)會(huì)誤認(rèn)為向后循環(huán)勾選了，面板就會(huì)一直輪播下去，其實(shí)不然。要想讓面板輪播，還需勾選上“循環(huán)間隔”，這樣才能保證面板的循環(huán)輪播。

接下來(lái)就是細(xì)節(jié)上的優(yōu)化，通常的輪播，banner會(huì)有一個(gè)從左到右的一個(gè)路徑，而dot的交互樣式是紅點(diǎn)逐漸的變?yōu)榛疑?，灰點(diǎn)逐漸的變?yōu)榧t色。所以針對(duì)banner和dot有不同的動(dòng)畫(huà)效果，banner選擇“向左滑動(dòng)”，dot選擇“逐漸”。完成之后點(diǎn)擊保存，運(yùn)行一下我們會(huì)發(fā)現(xiàn)，剛進(jìn)入頁(yè)面的時(shí)候面板就已經(jīng)開(kāi)始輪播，第一個(gè)狀態(tài)我們都沒(méi)來(lái)得及看就變成第二個(gè)了，這時(shí)我們應(yīng)該在“頁(yè)面載入時(shí)”加一個(gè)等待一秒鐘的交互，再運(yùn)行一遍效果就好了很多。

具體的操作如上圖所示，用Axure實(shí)現(xiàn)APP端的輪播，就完成了。

三、手指往左往右滑動(dòng)的樣式改變

這是APP端最常見(jiàn)的交互，這樣的交互需求，來(lái)自于這樣的一個(gè)場(chǎng)景。用戶還沒(méi)有看清楚之前的一個(gè)banner展示的具體細(xì)節(jié)，就因?yàn)闀r(shí)間的關(guān)系換到下一個(gè)banner了，用戶想翻回去看之前的一個(gè)banner，于是就出現(xiàn)了手指左滑右滑的交互。

對(duì)于面板的左右滑動(dòng)，Axure里面給出了“向左拖動(dòng)結(jié)束時(shí)”和“向右拖動(dòng)結(jié)束時(shí)”的交互案例，向左相當(dāng)于滑到下一個(gè)banner，向右相當(dāng)于滑到上一個(gè)banner，理清了這個(gè)，我們就可以添加交互了，在“向左拖動(dòng)結(jié)束時(shí)”，選中設(shè)置面板狀態(tài)，分別勾選banner和dot，因?yàn)槭且故鞠乱粋€(gè)banner，選擇狀態(tài)中，選“next”，并勾選“向后循環(huán)”。這里，由于是滑動(dòng)到下一個(gè)banner，所以不需要勾選“循環(huán)間隔”。向右滑動(dòng)也是同理，唯一的區(qū)別是向右滑動(dòng)是滑到上一個(gè)banner，所以選擇狀態(tài)，要選“previous”。具體的操作如下圖所示：

面板的動(dòng)畫(huà)效果和剛才的輪播相同，banner選擇向左滑動(dòng)/向右滑動(dòng)，dot選擇逐漸。完成之后保存，手指左右滑動(dòng)的效果就實(shí)現(xiàn)了。

四、手指點(diǎn)擊dot之后的樣式改變

這個(gè)需求出現(xiàn)的原因和手指滑動(dòng)的類似，如果banner很多的話（超過(guò)了五個(gè)），手指左右滑動(dòng)找某一個(gè)banner就顯得很低效，點(diǎn)擊dot會(huì)直接轉(zhuǎn)到指定的banner。

具體的做法就是對(duì)dot面板里面的不同狀態(tài)進(jìn)行交互案例的添加。Dot面板里面有三個(gè)狀態(tài)，每一個(gè)的樣式對(duì)應(yīng)著不同的banner，拿第一個(gè)banner對(duì)應(yīng)的dot來(lái)說(shuō)，我們對(duì)dot里面的三個(gè)點(diǎn)分別增加交互案例。我們選中第二個(gè)點(diǎn)（表示要跳轉(zhuǎn)到第二個(gè)banner），鼠標(biāo)單擊時(shí)添加交互案例，選擇設(shè)置面板狀態(tài)，分別勾選banner和dot面板增加交互，由于是1跳到2，我們?cè)谶x擇狀態(tài)時(shí)，選擇“2”，然后分別為banner和dot設(shè)置動(dòng)畫(huà)效果，又由于1跳到2是下一個(gè)banner，所以banner動(dòng)畫(huà)效果是向左滑動(dòng)。具體的操作如下圖所示：

同理我們?cè)O(shè)置3的鼠標(biāo)單擊時(shí)的交互效果，對(duì)于1的狀態(tài)下點(diǎn)擊1本身，我們這里給了一個(gè)等待的交互效果。狀態(tài)1的交互設(shè)置好了，我們?cè)僬蘸J畫(huà)瓢，設(shè)置狀態(tài)2和狀態(tài)3的交互。

這里需要注意的一個(gè)細(xì)節(jié)就是，2跳到1，是上一個(gè)banner，動(dòng)畫(huà)效果要選擇向右滑動(dòng)，2跳到3，是下一個(gè)banner，動(dòng)畫(huà)效果選擇向左滑動(dòng)，狀態(tài)3的動(dòng)畫(huà)效果交互以此類推。

這樣設(shè)置完成之后，我們運(yùn)行一下，發(fā)現(xiàn)點(diǎn)擊dot的點(diǎn)之后，可以成功的完成banner的切換，但是隨后就沒(méi)有靜止下來(lái)沒(méi)有輪播了。出現(xiàn)這個(gè)現(xiàn)象的原因是，我們是在動(dòng)態(tài)面板里面添加的操作，并沒(méi)有像banner面板那樣在首頁(yè)，對(duì)動(dòng)態(tài)面板整體添加交互案例。這樣會(huì)導(dǎo)致首頁(yè)沒(méi)有變動(dòng)，只是dot動(dòng)態(tài)面板內(nèi)部的改變，首頁(yè)的變動(dòng)才會(huì)觸發(fā)我們?cè)凇绊?yè)面加載時(shí)”的交互案例設(shè)置（進(jìn)行輪播），動(dòng)態(tài)面板內(nèi)部的變動(dòng)會(huì)使進(jìn)程停留在動(dòng)態(tài)面板，而忽視了“頁(yè)面加載時(shí)”的交互案例設(shè)置，所以banner就不會(huì)在輪播了。

想要讓banner繼續(xù)輪播，我們的辦法也很簡(jiǎn)單，在dot面板內(nèi)部的交互中再加上一條，繼續(xù)輪播即可，如下圖中藍(lán)框所示（圖中紅框是之前的操作）。

點(diǎn)擊完成之后運(yùn)行，點(diǎn)完dot的點(diǎn)之后，也可以實(shí)現(xiàn)輪播了，這樣一來(lái)，手指點(diǎn)擊dot的交互樣式也實(shí)現(xiàn)了。

資源共享：

Axshare：http://rjsu3g.axshare.com

網(wǎng)盤(pán)鏈接: https://pan.baidu.com/s/1qYlzebU 密碼: uf4m

作者：Mitsuizq，微信公眾號(hào)：Mitsuizq

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

題圖來(lái)自 Pixabay，基于 CC0 協(xié)議