作為日常交通工具，地鐵站內(nèi)每天人來人往，人們總是被站內(nèi)各種各樣的廣告給吸引，絢麗的色彩，突出的文案，無論行路多么匆忙，總是會注意到。

這類廣告常稱為“橫幅廣告”，即“ Banner 圖”。

???

什么是 Banner 輪播圖？

Banner：橫幅，展示廣告，由一張或多張圖片拼接；開頭提到的廣告就是單張 Banner 圖；多張圖片循環(huán)輪播即是我們所講到的 Banner 輪播圖。

互聯(lián)網(wǎng)歷史發(fā)展時間不長，因此很多應(yīng)用思想來源于傳統(tǒng)商業(yè)社會，并加以適配、改良、優(yōu)化。

例如將?Banner 圖應(yīng)用到互聯(lián)網(wǎng)后，一般不再是單張 Banner 圖，而通常是多張圖片輪播，因此習(xí)慣稱作?Banner 輪播圖或廣告輪播圖。

現(xiàn)實中多是單張 Banner 圖，而互聯(lián)網(wǎng)中多是多張 Banner 圖的原因是：

1）成本角度：

在街上或地鐵站內(nèi)可利用面積較大，將每張廣告全部展示出來是可以做到的。

而使用多張輪播對承載廣告頁的硬件成本較高，而在移動端或 PC 端，可展示的區(qū)域大小有限，多張圖片可提高空間的利用率。?

2）行為角度：

現(xiàn)實中我們路過廣告位的時間只有 1-2 秒，幾乎沒人會站在原地等下一個廣告，而在移動端或PC端，用戶只要沒有退出應(yīng)用，就存在看到其他 Banner 圖的可能性 ，廣告得到曝光的幾率更大。?

3）目的角度：

一張固定廣告頁不能立即獲得顯著收益，而是為了吸引用戶，加深用戶的印象，在“將來”產(chǎn)生消費行為。

而輪播圖的目的不僅僅是吸引用戶注意，還希望用戶立刻產(chǎn)生探索欲望，去點擊查看詳情或者查看下一張，產(chǎn)生收益時間更短。

功能概述

Banner 輪播圖常見于電商類或資訊類應(yīng)用或功能首頁或功能模塊主頁面，電商類 APP，例如淘寶、京東；資訊類App，例如 36 氪、人人都是產(chǎn)品經(jīng)理；還有其他比如網(wǎng)易云音樂 App 的發(fā)現(xiàn)模塊主頁等。

Banner 輪播圖通常位于首頁頂部，有時也會在頁面中間位置。以動態(tài)的形式為用戶呈現(xiàn)多張圖片，自動輪播的效果可以讓每張圖片得到較好的曝光。

位于首頁頂部的作用可提高廣告商品、優(yōu)質(zhì)內(nèi)容的曝光度，提高瀏覽到購買的轉(zhuǎn)化率和衡量內(nèi)容價值。

中間部位 Banner 輪播圖的作用是在可利用固定且較小的廣告位展示更多的廣告數(shù)量和內(nèi)容。

每張圖片都支持點擊跳轉(zhuǎn)到新落地頁，可以是外部網(wǎng)站、應(yīng)用程序內(nèi)頁或富文本。

前端展示

在移動端應(yīng)用的 Banner 圖片上一般展示的輪播圖控件，通常以多個小圓點或其他樣式顯示，作用是告訴用戶一共有多少張圖片，讓用戶有探索的欲望，并且提示用戶當(dāng)前展示的是第幾張。

在 PC 端還會有左右點擊按鈕，點擊切換到上一張或下一張。

但是如果圖片色彩過于豐富，控件不易看到，所以較好的方法是放在輪播圖下方。并且可以選擇其他的樣式，提升用戶體驗。

???

???

輪播規(guī)則

Banner 輪播圖為動態(tài)呈現(xiàn)，每張圖片停留時間，輪播方向均是在前端代碼中設(shè)置的定時任務(wù)。

而需要注意的是，圖片停留時間盡量不要少于 3 秒，避免用戶還沒有閱讀到圖片上全部信息，頁面就已經(jīng)切換了，造成不好的用戶體驗。

如果圖片上的內(nèi)容過多，那么停留時間可延長，但不要超過 5 秒，因為用戶看到第一張圖片后，就很快會被其他內(nèi)容吸引而離開，以至于后面的圖片得不到曝光。

具體每張圖片應(yīng)該停留多長時間，應(yīng)該根據(jù)圖片內(nèi)容而定，還可通過內(nèi)部測試，或其他實驗方式多次測試確定最佳停留時間。

Banner 輪播圖通常自動向左滑動，并且在移動端可以手動向左或向右劃動查看后一張或前一張圖片。

更新規(guī)則

Banner 輪播圖內(nèi)容具有跟蹤實時熱點和熱度推薦的作用，因此需要更新的頻率較高。

更換輪播圖內(nèi)容有兩種方式，一種是在前端代碼中設(shè)置輪播圖和跳轉(zhuǎn)鏈接，更換時需要同時修改代碼。

另一種方法是在運營后臺管理系統(tǒng)中進(jìn)行配置，輪播圖的名稱、定向投放、定時投放、順序、圖片、跳轉(zhuǎn)鏈接等，這樣的方式比較靈活，方便運營人員操作。

權(quán)重排序

我們知道，通常動態(tài)內(nèi)容比靜態(tài)內(nèi)容更吸引用戶，圖片比文字更吸引用戶。因此在一個頁面上，注意力權(quán)重比較，視頻>輪播圖>圖片>文字。

盡管輪播圖更吸引用戶注意，增加廣告的曝光度，但是其實用戶并沒有耐心等所有圖片自動輪播完，就已經(jīng)去到其他頁面或者手指已經(jīng)劃走了。

所以應(yīng)該把最重要，最想呈現(xiàn)給用戶的頁面放在第一張，保證得到最大可能的點擊率。越往后的圖片得到曝光機會越小，因此圖片應(yīng)該根據(jù)重要程度排序。

注意事項

視覺疲勞：長時間顯示固定 Banner 圖會加重用戶對該區(qū)域的麻木，并且用戶可能已經(jīng)不感興趣了。所以需要有頻率地對圖片進(jìn)行更新，并且每次更新都應(yīng)能吸引眼球。

跳轉(zhuǎn)參數(shù)：每個 Banner 圖都需要支持可點擊訪問，跳轉(zhuǎn)到新的落地頁面，因此需判斷落地頁地址是否參數(shù)化。如果沒有的話，需要單獨進(jìn)行開發(fā)。

容錯機制：?Banner 圖的訪問，加載，緩存的異常都需要考慮周全，產(chǎn)品需定義當(dāng)訪問異?；騼?nèi)容未加載出來異常頁面的呈現(xiàn)。

根據(jù)產(chǎn)品體量和 Banner 更新頻率決定是否緩存，如果是個大流量應(yīng)用并且 Banner 圖不常更新，那么最好在首次訪問時調(diào)用緩存。

總結(jié)

以上，均是從產(chǎn)品角度設(shè)計一個 Banner 輪播圖的注意要點，但是能夠吸引用戶的還是圖片的內(nèi)容，比如圖片的版面設(shè)計，包含信息，色彩組合等等，需要產(chǎn)品與運營和設(shè)計師共同完成。