超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

提到輪播首先可能想到的是廣告，我們經(jīng)常在移動端首頁或網(wǎng)站首頁會看到各式各樣的輪播banner，不管在移動端還是網(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、對輪播進(jìn)行分類

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

8、輪播異形化

9、輪播時(shí)間

10、總結(jié)

一、用戶真的使用輪播嗎

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

促銷輪播banner

品牌推廣輪播banner

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

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

輪播的頁數(shù)

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

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

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

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

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

二、輪播的輪換形式

不管在移動端還是手機(jī)端，輪播都有各種交互形式和尺寸，以pc為例在交互上會多樣化一些，常見的幾種則是通過滾輪滑動、通過點(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ù)期更加沉浸美觀。

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

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

在網(wǎng)頁中輪播都會有當(dāng)前的定位點(diǎn)，許多用戶的習(xí)慣是點(diǎn)擊進(jìn)度條進(jìn)行切換banner這樣能夠更快的達(dá)到目標(biāo)，不用一張一張切換，但是在有些產(chǎn)品中會忽略這一點(diǎn)，設(shè)計(jì)中會做的非常小導(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)上相對較好。

以下國外某網(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ì)多久會切換下一張，對于自動切換的產(chǎn)品輪播這個(gè)更直觀的進(jìn)度展示體驗(yàn)上相對較好。

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

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

五、輪播的切換

在剛才上面舉的例子中很多優(yōu)秀的網(wǎng)站在設(shè)計(jì)上都很有創(chuàng)新性，但是需要注意一個(gè)點(diǎn)，在輪播中不只有自動播放，還需要考慮用戶手動切換，因?yàn)樵趯?shí)際用戶瀏覽中可能會對產(chǎn)品的播放時(shí)間達(dá)不到預(yù)期，此時(shí)則會使用手動切換，除去可點(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í)長，距離越短時(shí)間越快，為了避免用戶操作失誤在相對較近的切換按鈕則需要在視覺上做的比較突出，便于用戶尋找。

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

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

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

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

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

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

七、使用縮略圖進(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展示給用戶觀看。

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

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

八、輪播個(gè)性化

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

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

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

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

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

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

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

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

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

十、總結(jié)

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