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

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

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

目錄

1、用戶真的使用輪播嗎

2、輪播的輪換形式

3、輪播的進(jìn)度展示

4、輪播定位

5、輪播的切換

6、對(duì)輪播進(jìn)行分類

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

8、輪播異形化

9、輪播時(shí)間

10、總結(jié)

一、用戶真的使用輪播嗎

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

促銷輪播banner

品牌推廣輪播banner

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

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

輪播的頁數(shù)

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

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

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

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

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

二、輪播的輪換形式

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

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

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

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

三、輪播的進(jìn)度展示

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

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

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

四、輪播的定位

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

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

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

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

五、輪播的切換

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

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

切換的距離和位置

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

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

反觀移動(dòng)端在輪播中除了展示banner進(jìn)度外很少展示切換按鈕，移動(dòng)端更加依賴手勢(shì)交互。

六、對(duì)輪播進(jìn)行分類

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

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

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

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

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

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

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

八、輪播個(gè)性化

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

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

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

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

九、自動(dòng)輪播時(shí)間

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

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

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

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

十、總結(jié)

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

文章來源：UI中國(guó)   作者：愛吃貓的魚____
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

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