本文給大家講一種banner輪播最簡單的實(shí)現(xiàn)方法，一起來看看~

前段時(shí)間做一個(gè)開放平臺(tái)的原型，大家討論完需求就希望，快點(diǎn)出原型（第二天），而且要求“高保真”。

于是在“快速”“高保真”的要求下，自己對(duì)于所有的頁面交互都要求是，對(duì)需要使用原型的用戶（產(chǎn)品、研發(fā)、測(cè)試）而言，達(dá)到對(duì)應(yīng)的效果，而自己在實(shí)現(xiàn)時(shí)采用最簡單的方法。

正巧今天看到網(wǎng)站上有教程教如何做一個(gè)輪播banner ，點(diǎn)開略看了一下，教程做的很復(fù)雜。其實(shí)使用axure做交互一般都比較簡單，但由于其各種小窗口太多了，各種截圖放一起，看上去很容易亂。之前小樓老師發(fā)布的一個(gè)教程，居然也被人吐槽講的這么亂怎么做產(chǎn)品（扶額）。

原型鏈接：http://eta1id.axshare.com/

1. 首先看下輪播banner的組成

上圖中，左邊是頁面 展現(xiàn)的 banner輪播的圖，右側(cè)則是對(duì)應(yīng)的兩個(gè)動(dòng)態(tài)面板。

可以看到右側(cè)動(dòng)態(tài)面板命名非常簡單（根本起不到提示作用，但這說明此處面板命名不太重要，自己能區(qū)分就可以）。

2. 接下來看一下兩個(gè)面板的交互效果

如上是對(duì)于 輪播圖片banner的 動(dòng)態(tài)面板設(shè)置。

設(shè)置面板在 【載入時(shí)】有交互，基本就是兩個(gè)動(dòng)作：

1. 面板不是在一加載就開始切換的，我設(shè)置的先等待1000毫秒。
2. 設(shè)置面板狀態(tài) 為【NEXT】（即按照1、2、3的順序進(jìn)行切換）；

勾選從最后一個(gè)到第一個(gè)自動(dòng)跳轉(zhuǎn)；勾選圖像輪播間隔。具體時(shí)間間隔可自己設(shè)置。

為了讓banner輪播看上去更逼真，可以加個(gè) 進(jìn)入和退出的動(dòng)畫。此處選擇的時(shí)向左滑動(dòng)，用時(shí)500毫秒。

以上是banner 面板的全部交互。

做完這個(gè)切換之后其實(shí)基本算是banner做完了，但是總覺得缺點(diǎn)什么——缺我們常見的banner切換時(shí)的頁面指示導(dǎo)航按鈕。

依然是采用很簡單的方式 很暴力的加上的。

首先面板中的1、2、3狀態(tài)內(nèi)容如下圖：

其對(duì)應(yīng)的交互面板，基本和banner面板的設(shè)置是一樣的。唯一的不同是，在面板切換間的效果，這里不再是向左滑動(dòng)，而是淡入淡出（畢竟三個(gè)指示按鈕滑來滑去，是很滑稽的）。

具體交互頁面如下：

額，說到這里，其實(shí)就沒了。

瀏覽最后再PO一下原型鏈接：http://eta1id.axshare.com/

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

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