看著簡(jiǎn)單,老司機(jī)做出來(lái)就完全不一樣

2022-7-29    純純

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

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

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

目錄

1、用戶真的使用輪播嗎

2、輪播的輪換形式

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

4、輪播定位

5、輪播的切換

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

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

8、輪播異形化

9、輪播時(shí)間

10、總結(jié)

一、用戶真的使用輪播嗎

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

促銷(xiāo)輪播banner

品牌推廣輪播banner

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

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

輪播的頁(yè)數(shù)

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

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

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

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

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

二、輪播的輪換形式

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

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

在看下面這個(gè)醫(yī)美網(wǎng)站它的切換方式則是通過(guò)鼠標(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)頁(yè)中輪播都會(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ì)上過(guò)于小導(dǎo)致點(diǎn)擊上有些阻礙。

如以下網(wǎng)站去除進(jìn)度定位的方式,通過(guò)縮略圖預(yù)覽來(lái)告知用戶下一個(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)容

四、輪播的定位

定位主要是用來(lá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ù)過(guò)小的話則需要進(jìn)行循環(huán)播放,如果過(guò)多的頁(yè)數(shù)則第一步和最后一步不可點(diǎn)擊。

切換的距離和位置

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

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

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

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

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

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

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

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

在banner首屏中,顯示的內(nèi)容越多,越能激發(fā)用戶進(jìn)行點(diǎn)擊,像上面講過(guò)的農(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)站是蘋(píng)果官網(wǎng),讓產(chǎn)品抽象化展示。

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

八、輪播個(gè)性化

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

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

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

蘋(píng)果官網(wǎng)進(jìn)入后隨意點(diǎn)擊產(chǎn)品介紹頁(yè)后會(huì)發(fā)現(xiàn),蘋(píng)果把輪播結(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)播放的過(guò)程中如果用戶鼠標(biāo)hover上去后,則需要判定播放暫定,避免用戶錯(cuò)過(guò)感興趣的內(nèi)容。

十、總結(jié)

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


藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系

作者:愛(ài)吃貓的魚(yú)____    來(lái)源:站酷

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)bouu.cn )是一家專(zhuān)注而深入的界面設(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ù)UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


分享本文至:

日歷

鏈接

個(gè)人資料

存檔