提到輪播首先可能想到的是廣告，我們經(jīng)常在移動端首頁或網(wǎng)站首頁會看到各式各樣的輪播banner，不管在移動端還是網(wǎng)頁上通常點擊數(shù)據(jù)都是非常差的，本篇文章帶你深入了解banner輪播。

如果需要設(shè)計一個輪播，我們應(yīng)該考慮哪些因素？如何讓輪播更具有價值？如何讓輪播的體驗更好？如何避免輪播常見的問題。

本篇文章通過以下幾點探索輪播的特性，預(yù)計閱讀20分鐘

目錄

1、用戶真的使用輪播嗎

2、輪播的輪換形式

3、輪播的進度展示

4、輪播定位

5、輪播的切換

6、對輪播進行分類

7、使用縮略圖進行預(yù)知

8、輪播異形化

9、輪播時間

10、總結(jié)

一、用戶真的使用輪播嗎

用戶是否對輪播有感知，這個則需要根據(jù)不同的場景進行判斷，包括每個產(chǎn)品中的每個輪播對用戶用戶的定位也不相同，常見的應(yīng)用場景品牌曝光、活動營銷、產(chǎn)品展示，每個場景下相關(guān)的數(shù)據(jù)也不相同。

促銷輪播banner

品牌推廣輪播banner

產(chǎn)品介紹輪播banner

同時還有個關(guān)鍵因素，輪播的占比，這里以pc端為例若是產(chǎn)品是以品牌效應(yīng)吸引用戶的，大多輪播是以大的屏幕占比為主通常會占首屏的50%，如果是以營銷、內(nèi)容為主的產(chǎn)品，輪播通常以16:9、7:4的常規(guī)比例進行展示。

輪播的頁數(shù)

用戶在使用產(chǎn)品時會默認(rèn)忽略輪播區(qū)域，一般輪播都會有自動輪換機制，一定時間后自動輪放下一張banner，那么每當(dāng)頁面上進行輪播時便會吸引用戶進行關(guān)注，效果上會有一定的提升，所以在輪播中第二張第三張的效果往往會比第一張輪播的效果更有效一些。

還有一種用戶比較喜歡關(guān)注輪播過去的banner以此來滿足好奇心。

如果banner是作為內(nèi)容傳播希望用戶通過banner了解內(nèi)容，那么則要避免放在最后一位置，對于用戶而言最后一張輪播路徑過于長，并且用戶很少會手動滑動banner。

國外一家公司在針對輪播中進行了相關(guān)的研究測試，隨著頁數(shù)的增加用戶的點擊逐步下降。

那么如果想讓產(chǎn)品中的輪播更具有效果，則需要根據(jù)不同的場景設(shè)定策略達到目的。

二、輪播的輪換形式

不管在移動端還是手機端，輪播都有各種交互形式和尺寸，以pc為例在交互上會多樣化一些，常見的幾種則是通過滾輪滑動、通過點擊切換兩種。

如下圖某藝術(shù)網(wǎng)站，它則是通過鼠標(biāo)滾輪進行切換輪播banner，并且banner的占比也是鋪滿首屏，這種輪播形式適合一些品牌、產(chǎn)品宣傳等相關(guān)的網(wǎng)站以此來突出產(chǎn)品的亮點，同時也符合用戶目標(biāo)。

在看下面這個醫(yī)美網(wǎng)站它的切換方式則是通過鼠標(biāo)點擊進行切換，并且占比也是鋪滿首屏，在醫(yī)美領(lǐng)域用戶更關(guān)注美感，而輪播形態(tài)也是符合用戶的心理預(yù)期更加沉浸美觀。

而在移動端輪播的形式就比較統(tǒng)一，大多都是自動播放+手指滑動進行切換。

三、輪播的進度展示

在網(wǎng)頁中輪播都會有當(dāng)前的定位點，許多用戶的習(xí)慣是點擊進度條進行切換banner這樣能夠更快的達到目標(biāo)，不用一張一張切換，但是在有些產(chǎn)品中會忽略這一點，設(shè)計中會做的非常小導(dǎo)致用戶在點擊上可用性不太友好，如下圖中的banenr進度點設(shè)計上過于小導(dǎo)致點擊上有些阻礙。

如以下網(wǎng)站去除進度定位的方式，通過縮略圖預(yù)覽來告知用戶下一個banner的內(nèi)容，空白區(qū)域也可以添加縮略圖引導(dǎo)介紹等關(guān)鍵信息，幫助用戶提前預(yù)知在體驗上相對較好。

以下國外某網(wǎng)站在進度定位的設(shè)計上采用了標(biāo)簽文案方式進行設(shè)計，能夠幫助用戶更加全局的了解banner內(nèi)容

四、輪播的定位

定位主要是用來指示當(dāng)前輪播的進度，像上圖中講的便于用戶更加全局的觀看banner的張數(shù)和當(dāng)前進度。

以下網(wǎng)站的設(shè)計中則把定位與進度相結(jié)合，進度條展示該banner預(yù)計多久會切換下一張，對于自動切換的產(chǎn)品輪播這個更直觀的進度展示體驗上相對較好。

以下是某個國外網(wǎng)站，不管是pc還是移動端都在輪播底部添加了水平條，告知用戶當(dāng)前位置

隨著市場上產(chǎn)品同質(zhì)化嚴(yán)重，產(chǎn)品的競爭力也更依賴體驗，在下圖中的數(shù)據(jù)可視化的網(wǎng)站上，在進度條上就利用了產(chǎn)品的特性以餅狀圖的形式進行展示。

五、輪播的切換

在剛才上面舉的例子中很多優(yōu)秀的網(wǎng)站在設(shè)計上都很有創(chuàng)新性，但是需要注意一個點，在輪播中不只有自動播放，還需要考慮用戶手動切換，因為在實際用戶瀏覽中可能會對產(chǎn)品的播放時間達不到預(yù)期，此時則會使用手動切換，除去可點擊的進度點，還需要上一張和下一張的入口切換。

在此基礎(chǔ)上需要注意，在處于最后一張banner時，下一張切換還能不能點擊，第一張時上一張切換還能不能切換，這個取決于產(chǎn)品特性和輪播張數(shù)，如果輪播張數(shù)過小的話則需要進行循環(huán)播放，如果過多的頁數(shù)則第一步和最后一步不可點擊。

切換的距離和位置

上一張和下一張的距離遠近取決于banner的大小，如果輪播banner占比較大時則需要考慮用戶的操作時長，距離越短時間越快，為了避免用戶操作失誤在相對較近的切換按鈕則需要在視覺上做的比較突出，便于用戶尋找。

如果banner占比在首屏中占比較少的情況下則需要讓切換按鈕的間距拉大，保持視覺平衡，因為小區(qū)域banner用戶能夠更加全局的觀看，在使用上不會猶豫。

反觀移動端在輪播中除了展示banner進度外很少展示切換按鈕，移動端更加依賴手勢交互。

六、對輪播進行分類

當(dāng)輪播banner過多時利用標(biāo)簽進行分類，用戶通過點擊標(biāo)簽進行查看相關(guān)的輪播組合。

此方式更適合一些電商平臺、新聞網(wǎng)站這種內(nèi)容過多的產(chǎn)品

如下圖國外社交媒體網(wǎng)站則使用了標(biāo)簽進行分類，此處提一句輪播不僅限于首屏banner。他的用處可落地在各個場景。

七、使用縮略圖進行預(yù)知

在banner首屏中，顯示的內(nèi)容越多，越能激發(fā)用戶進行點擊，像上面講過的農(nóng)業(yè)產(chǎn)品網(wǎng)站就使用下一張預(yù)覽圖的形式進行展示，當(dāng)然不僅局限于這種形式，如下圖中的餐飲網(wǎng)站把所有的輪播banner展示給用戶觀看。

相對于縮放圖，圖標(biāo)展示效果上也較好，空間占用更少，使用這種方式需要謹(jǐn)慎，對圖標(biāo)的識別性要求較高，我印象中能夠使用的這種方法的網(wǎng)站是蘋果官網(wǎng)，讓產(chǎn)品抽象化展示。

在移動端也存在這種設(shè)計手法，但是基于分辨率原因移動端的縮略圖展示過少，最常見的如下圖中的馬蜂窩和企鵝電競。

八、輪播個性化

輪播最大的缺陷則是像剛開始講的用戶會默認(rèn)為廣告，對此可以使用個性化設(shè)計突破用戶心理障礙，使輪播banner更具備親和力。

如下圖中的數(shù)碼科技網(wǎng)站，利用產(chǎn)品與背景的結(jié)合營造出一種功能性的展示。

再例如下圖中蘋果官網(wǎng)入口，結(jié)合百度的定制化功能在大搜中進行個性化處理，把常規(guī)的banner輪播以功能卡片形式進行展示，同時卡片承載產(chǎn)品動畫引導(dǎo)用戶進行點擊。

蘋果官網(wǎng)進入后隨意點擊產(chǎn)品介紹頁后會發(fā)現(xiàn)，蘋果把輪播結(jié)合鼠標(biāo)滾輪營造沉浸式觀看，每個屏效內(nèi)都展示產(chǎn)品一個功能特點，打破傳統(tǒng)banner的展現(xiàn)形式。

九、自動輪播時間

自動播放的輪播會根據(jù)用戶的耐心和用戶的訴求進行調(diào)整優(yōu)先級，如我們平常使用產(chǎn)品時會忽略banner廣告，我們會更加關(guān)注移動中的東西，特別是在移動端上通常是banner進行輪播時才會關(guān)注。

谷歌設(shè)計團隊曾對banner輪播的時間進行測試，測試結(jié)果得出5s-7s的輪播時間最佳，在這個時間內(nèi)用戶有足夠的時間對輪播banner上的產(chǎn)品內(nèi)容進行了解。

如下圖谷歌商店的輪播時間設(shè)定在6s。

同時還需要注意，在自動播放的過程中如果用戶鼠標(biāo)hover上去后，則需要判定播放暫定，避免用戶錯過感興趣的內(nèi)容。

十、總結(jié)

本文從輪播的樣式、特性、用戶對輪播的認(rèn)知等多方面的介紹，在實際產(chǎn)品中輪播有很多可用性上的問題存在，我們在設(shè)計中則需要根據(jù)自己產(chǎn)品的特性、用戶群體特點等多維度去思考適合什么樣的輪播形式。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)