大家設計輪播圖的時候，是怎么操作的呢？本文作者分享了自己的做法，來看看~

輪者，循環也，姿勢者，知識、形態也，故此文乃探究循環知識乎？非也，循環播放姿勢也。

吾日三省吾身：傳授姿勢的時候，有說人話乎？一開頭，就發現沒有，于是吾再省吾身，決心悔改，接下來便開始好好講講在做輪播圖時候的一些東西。

其實，提到輪播圖，大家可能各種回憶就涌上了心頭，“痛苦”的回憶一般來的最快，比如：

各種App首頁醒目但輪轉的飛快讓你來不及看清的廣告位；

各種網站首頁圖片比網站本身想要凸顯的內容更突出的大Banner；

還有你點開朋友圈里某個不是朋友的家伙分享的鏈接，發現是個可以上下滑動循環觀看但你并不感興趣的廣告頁，然后你默默地或者煩躁地點了左上角的X。

但你也會記得，很多美好的回憶，比如：

你點進了某個電商App首頁輪播廣告位的一則限量免費搶購廣告并成功搶到了你心儀的商品；

你因為通過XX佳緣網首頁優質會員輪播推薦位成功找到你的另一半甚至此刻你看到這里還和你的另一半會心的對視一笑；

在朋友圈，你點開了某個你的好友分享的鏈接，在一幕一幕輪播的圖片和雞湯文案中，你不爭氣地留下了鄉愁的淚水，想起獨自在外已經好久沒有跟家里人打過電話了，于是默默的撥通了那個號碼。

剛才的這些有好有壞，而從產品角度來說，一個好的“輪播”頁面，除了它本身的內容、設計、交互外，也與它出現的渠道、場景、時間、人群等有關。

有的時候，所有一切都設計的很完美，精準的目標用戶在對的時間對的地點進入了對的頁面，結果，手機沒電了……等手機充好電，用戶可能已然忘卻了剛才去了哪個頁面，所以有的時候不得不說“謀事在人成事在天”。

扯遠了，言歸正傳，這篇文章我主要是想聊聊從Axure軟件制作的角度，怎么樣去實現一個常見的輪播圖，我覺得大部分輪播圖可以分為兩大類，即橫向輪播以及縱向輪播，有的人可能會說那我看有一些輪播圖做的很炫酷，每個頁面都可以后空翻360度接轉體180度落地接托馬斯回旋，但如果我們透過現象去看本質，絕大部分依然可以歸為這兩種（至少我見過的），無非就是在輪播基礎上加了一些特效。

今天就來找個案例，先實際看看效果大概是怎樣的，比如淘寶App首頁就包含橫向和縱向的兩種輪播，在這先以頂部的橫向輪播圖來講下做這個東西的思路，畢竟授人以魚不如授人以漁，具體的軟件操作看的再多，如果沒有形成一種解決問題的思路，可能下次遇到一個原型制作案例，還是無從下手只好需求“度娘”幫助。

一、觀察想象并拆解

那對于原型制作，一般我的思路，首先可能會傾向于去觀察它（基于已有的東西去做），或者是去想象它（基于眼前沒有，但腦海中可能成形的）。

觀察的目的在于看清楚它的結構和規律，是否可以進行拆解，拆解的目的是在于化解看起來不能解決的大問題，是否可以變成其實可以解決的小問題。

那么，這個案例當中，觀察的結果是啥呢？

1.整體結構：

首先它看起來是有兩大塊結構，圖片滑動部分和位置指示器部分。

2.自動輪播：

• 對于圖片滑動部分，在你不折騰它的時候，它自己是以恒定的間隔時間向左循環滑動的，而且滑動到最后一張的時候，又自動以向左的感覺滑到了第一張；
• 位置指示器跟圖片對應的張數是一致的，即圖片滑到了第幾張，指示器對應位置的圓點就處于選中的狀態（顏色變化），未選中狀態的圓點默認是白色。

3.手動干預：

與你去手動觸發的次數有關，例如，你手動去左滑或者右滑了幾次，那么輪播圖就會先就往相應的方向滑動幾次，即操作是一對一的，一次操作只會帶來一次結果影響，而且你手速極快的時候，就算滑動會滯后，但依然是你操作了幾次就會滑動幾次。

• 在圖片自動輪播時，強行手動左滑，圖片隨之滑動到下一張圖片，如果沒有繼續手動干預，圖片就又開始按照原方向自動輪播，指示器的選中狀態也是與圖片位置對應；
• 在圖片自動輪播時，強行手動右滑，圖片先隨之滑動到上一張圖片，如果沒有繼續手動干預，圖片就又開始按照原方向自動輪播，指示器的選中狀態也是與圖片位置對應。

二、各個擊破再組合

經過上面的觀察以及分析，那么接下來就是各個擊破每個小的點即可。

1.整體結構搭建（滑動部分和指示器部分）

（1）滑動部分

要實現滑動，可能如果你是經常使用Axure的人，馬上就會想到用動態面板，然后每個頁面分別在不同的狀態里面。

那如果你是一個剛用Axure不久的人，可能還不知道動態面板這個神奇的東西，只知道拖框框，那可能你的思路就是想辦法移動框框，至于怎么自動移動，可能就是設置給框框添加移動的動作？至于怎么循環，可能給框框添加顯示隱藏的相關動作？對于初學者，其實都可以按你的想法去試試，看看能不能得到你想要的一個結果，哪怕得不到，又何妨，人生不就是要勇于嘗試嘛。

我按照動態面板先搭建出了需要滑動部分的結構：

（2）指示器部分

指示器部分的話，其實就是幾個小圓點，放在滑動部分上方，設置好以后，如下：

2.自動輪播

（1）滑動部分

上一步，我們把所需要的元件已經擺放到位，看上去已然有模有樣，但你要是預覽一下，就會發現它還沒有“輪”起來，那要怎么去“輪”呢，其實如果使用的是動態面板，這個功能就很容易實現：

（2）指示器部分

這部分的話，按照前面觀察拆解出來的，我們需要搞定的就是讓圓點處于選中狀態是根據圖片的切換來變動的，而上一步我們設置了圖片切換就是切換動態面板的各個狀態，那只需要根據狀態的不同，去設置圓點的狀態即可：

3.手動干預

到了這一個環節，已經離大功告成又近了一步，而既然這里是橫向的輪播圖，那其實對于手動的這種滑動，我們也只需要去考慮手動左滑和右滑的場景了，畢竟一個橫向自動輪播圖，是斷然不需要你去“上下其手”了，就算你這么做了，也是徒勞。

所以那我們其實對動態面板去向左拖動和向右拖動結束時，對應的面板狀態就好了，即向左拖完了，面板狀態就切換為下一個，向右拖完了，面板狀態就切換為上一個：

然后預覽，會發現能夠正常的自動輪播，手動向左拖動后也能夠正?；瑒?，但如果手動向右拖動后，就會發現，拖了一次以后，輪播圖就不輪了，停那了……場面一度十分尷尬，那么問題出在哪呢？到底是道德的淪喪還是人性的扭曲呢？

這里，就有個東西需要講一下了，在動態面板的屬性里面有一些系統自帶的事件，而剛才我們在三個事件里面（載入時、向左拖動結束時、向右拖動結束時）添加了用例以及對應的動作，而問題恰好就出在事件這塊，對于“載入時”這個事件，它其實只會執行一次，也就是剛打開頁面時（或刷新頁面時），會執行這個事件添加的用例以及對應設置的動作，執行結束就停止執行，直到再次觸發，那我們分析一下在打開這個神奇的原型時，到底代碼邏輯是怎么走的。

首先，打開頁面就執行了“載入時”的事件里添加的動作，即循環向左滑動，如果不對頁面做其他操作，那理論上就會一直循環左滑，但因為我們為“向左拖動結束時”也添加了動作，所以手動去向左滑動時，這個時候，就跳出了“載入時”的動作，只不過因為我們為“向左拖動結束時”添加的動作也是循環左滑，所以維持了之前的表面狀態。

再看看“向右拖動結束時”這個事件，我們為它添加的用例里的動作是向右滑動并勾選上了向前循環（勾上它的原因是因為如果恰好在1號位置向前滑時，如果沒有勾上，則沒法滑動到最后一號位置），但也就是因為這個事件里的小動作，使得邏輯跳出了之前事件里的動作，而是走到這個事件里面來，而這個事件向前移動一頁就停止了，所以頁面處于停止狀態。

知道了原因，那么解決辦法就好說了，就在“向右拖動結束時”這個事件對應的用例結尾，添加能夠讓頁面循環左滑的邏輯即可：

然后，按同樣的思路，做好縱向的輪播即可，最終，做好的效果圖如下：

點擊此處預覽

最后，如果說我們做了這樣的輪播圖，當要去把它用到實際工作中時，發現涉及到的尺寸不一樣，所以每次改的時候，必須把外面的尺寸以及動態面板里的每一個狀態尺寸都去更改才行，著實讓人十分的崩潰，因為它并沒有成為一個方便快捷可以直接拿來簡單修改就通用的組件。

所以我的問題是，如果想要在上面的基礎上，使得這個輪播圖組件更簡單的改變尺寸，比如改變最外層即可，那你能想到的方法是什么，按照我文中提到的觀察-想象-拆解-各個擊破-組合的方法，你可以想到多少種做法？

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

題圖來自 Pexels ，基于 CC0 協議