本文從產品設計角度列舉了以及相應注意事項。

本文從產品設計角度列舉了以及相應注意事項。

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

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

什么是 Banner 輪播圖？

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

互聯網歷史發展時間不長，因此很多應用思想來源于傳統商業社會，并加以適配、改良、優化。

例如將Banner 圖應用到互聯網后，一般不再是單張 Banner 圖，而通常是多張圖片輪播，因此習慣稱作Banner 輪播圖或廣告輪播圖。

現實中多是單張 Banner 圖，而互聯網中多是多張 Banner 圖的原因是：

1）成本角度：

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

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

2）行為角度：

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

3）目的角度：

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

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

功能概述

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

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

位于首頁頂部的作用可提高廣告商品、優質內容的曝光度，提高瀏覽到購買的轉化率和衡量內容價值。

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

每張圖片都支持點擊跳轉到新落地頁，可以是外部網站、應用程序內頁或富文本。

前端展示

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

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

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

輪播規則

Banner 輪播圖為動態呈現，每張圖片停留時間，輪播方向均是在前端代碼中設置的定時任務。

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

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

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

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

更新規則

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

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

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

權重排序

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

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

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

注意事項

• 視覺疲勞：長時間顯示固定 Banner 圖會加重用戶對該區域的麻木，并且用戶可能已經不感興趣了。所以需要有頻率地對圖片進行更新，并且每次更新都應能吸引眼球。
• 跳轉參數：每個 Banner 圖都需要支持可點擊訪問，跳轉到新的落地頁面，因此需判斷落地頁地址是否參數化。如果沒有的話，需要單獨進行開發。
• 容錯機制：Banner 圖的訪問，加載，緩存的異常都需要考慮周全，產品需定義當訪問異常或內容未加載出來異常頁面的呈現。

根據產品體量和 Banner 更新頻率決定是否緩存，如果是個大流量應用并且 Banner 圖不常更新，那么最好在首次訪問時調用緩存。

總結

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

作者：晴天；微信公眾號：impm6666

本文由 @晴天 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議