Banner、圖片滾動、滑塊、特色內容模塊，或其它你能想得出的類似叫法——它們在網頁上隨處可見。Banner常被用于電商網站特別是其主頁上。大多數電商網站的桌面網站主頁都有Banner。

但主頁Banner真的對用戶有用嗎？或者說它們能算作一種簡潔的內容呈現方式嗎？

網站Banner的有用之處在于，你能用它來告訴市場營銷領域或者高級管理人員「你們的最新想法已經呈現在主頁上啦」。要么用Banner把用戶忽略的內容放在你的主頁，要么，如果你想的話，就永遠別用Banner。

事實上，若能堅持一些重要的操作細則，主頁Banner 可以得到很好的宣傳效果，還會對用戶很有幫助。本文將探討這些操作細則，并簡單介紹如何設計好的Banner。

什么是Banner？

Banner是在主頁上顯示市場營銷信息的一種推廣形式。設計師通過Banner，不用讓用戶滾動瀏覽剩余頁面也可實現資訊密度（指一份信息所能提供的相關信息量的相對指標）最大化。Banner呈現形式和大小非常多樣，但通常情況下，Banner（正如本文所述）都有如下特征：

它出現在網站主頁靠上部分，占據了「折疊以上部分」（顯眼位置）絕大部分區域。在同一個位置展示一條以上的推廣，即便實際上一次只能展示一條；每條推廣都包含了圖像和少許文字。

在同一Banner中，能看出有不止一條主題內容。

Banner的優點

通過Banner，可以在主頁同一塊黃金區域顯示多條內容。

越靠近頁面頂端的信息更越可能獲得更多的關注。

Banner的弊端 

人們經常忽略Banner ，同時忽略掉的還包括全部或部分Banner里的內容（即使Banner可以自動滾動）——訪客基本上不會在頁面頂端逗留過久。因此，不要指望人們消化掉Banner的所有信息。

設計師通常將Banner視為一系列圖片的集合體，但眾多用戶通常只看了其中的一張圖片。 看完Banner中的一系列圖片能給人留下精準的印象，使人了解相關服務或產品，但如果一個人只看到其中的一張圖的話，他可能就無法明白你想傳達的業務信息。

優質Banner設計指南

1. 內容第一

有句我們聽過無數遍的話： 內容為王 。 Banner形式的精美不如其內容與用戶的關聯度重要。

如果Banner的內容不相關，無論其與用戶的交互多么簡單，其用戶體驗仍將非常糟糕。這里需要提一些重要的規則：

如果內容對訪客不夠有吸引力、或沒有幫助的話，比如是人們不想關注的推廣信息，那就不要用Banner。這些Banner大多數情況下只會分散用戶的注意力，而不能指引用戶至一個簡單明了的行為號召。

Banner內容 不能像廣告（或者與廣告格式內容一樣）。如果內容看起來像廣告，大多數用戶會選擇直接忽視。原因就在于 旗幟盲點（網頁使用中的一種現象，指網站訪問者自覺或不自覺地忽略Banner樣的信息，又可稱為廣告的盲目性）。

所以，選擇合適的字體和圖像使得Banner和頁面其他內容相匹配就顯得非常重要。這樣的話，Banner才會像整個網站的一部分，而不是網頁上被強加的廣告。

滾動圖片的順序需要仔細斟酌 。要記住，越是靠前的圖片，越能獲得更多曝光機會。所以，第一張圖片永遠是最重要的，它還能吸引訪客去看下一張圖。后續圖片都應該按重要性排序。

絕對不能把Banner圖片當作了解網站特色和內容的唯一途徑 。建議將出現在Banner的重要信息另放在頁面的其他部分，這樣就更容易被網站訪客看見。

如果你想讓訪客看到所有內容，那就不要使用Banner 。哪怕Banner是有效的，但要記住，大多數訪客不會瀏覽每一張Banner圖片。

2. 限制滾動圖片的數量

Banner 最多放五張圖片 。再多的話，用戶可能就不會去看了。限制滾動圖片的數量，還有一個好處就是幫助訪客更好地了解網站內容，回過頭來能在Banner里再次發現相關內容。

3. 提供進度提醒

讓用戶知道一共有多少張滾動圖片，還需要讓其看到目前「進度」是第幾張 。這可以使人們感到一切都在掌控中。

圓點或類似符號能顯示滾動圖片總數，使用戶知道其目前看的是第幾張圖

4. 確保滾動圖片的內容在手機上清晰易讀

由于手機越來越強調注意力，優化Banner內容以方便手機客戶端查看則是首要任務。文字和圖片顯示得越清晰，用戶越有可能有興趣去了解相關內容。

所以，確保滾動圖片的文字在各種熒幕上清晰易讀就非常重要， 即便熒幕內容縮小到非常小的界面，也要能在熒幕上清晰顯示 。此外，如果你將桌面網站的插圖重復利用到手機頁面中，一定要檢查文字是否清晰易讀。

 5. 設計恰當的導航按鈕

導航按鈕要幫助用戶識別各項選擇，使用戶在核心滾動圖片中看到相關內容時能回想到這些選擇。

自動滾動（或自動輪換）小技巧

Banner中不同圖片的自動滾動可以讓訪客瀏覽相關信息。但要使得自動滾動運行流暢，還需注意以下四點細節：

1、手機設備不要加載自動滾動功能 。用戶在點擊熒幕時，可能會因為Banner圖片自動滾動不小心點到不想點開的圖片。

2. 確保自動滾動切換速度不要太快 。有時Banner滾動切換過快，用戶無法讀取信息，這會讓他們失望。當然，自動滾動切換過慢也有相應的問題——用戶會厭煩這些滾動圖片。

建議測試最佳停留時間，或至少預估普通用戶平均花多長時間去瀏覽和消化相關文字內容和圖像信息。

如果理解不同滾動圖片的信息需要不同的時間量，則還要考慮針對單個滾動圖片需要單設的停留時間。如果你沒法準確把握停留時間，則不建議使用Banner。

 3. 讓用戶保持可控狀態（控制給人信任）。鼠標放置在Banner上方暫停自動滾動，可以避免自動切換到用戶即將看到或點擊的滾動圖片。在任一主動的用戶交互（比如點擊Banner按鈕）完成后，終止自動滾動功能，因為一次點擊即代表一次主動的用戶請求，這說明用戶對此很有興趣和意向。

 4. 滾動到最后一張圖片后不要停止 。繼續循環播放所有圖片，顯示用戶正瀏覽的滾動圖片。

 除Banner之外的最佳選擇

主頁Banner最常見的問題在于缺乏背景鋪墊 ：通常，用戶對下一張滾動圖片的內容只能略知一二，也基本沒有說服他們關注下一張圖片的理由。所以，他們不太愿意去查看這些內容。要解決這個問題，除了Banner外，你也可以考慮主圖（大的促銷圖片）。

 相比Banner，主圖有以下優點：

 用戶可以專注于這一張圖，而不再將其注意力分散到其他的滾動圖片。相比滾動，靜態主圖能更少地分散用戶的注意力。

若設計師明白其只能選擇僅此一張圖片，圖片還要表達其感情，他們更可能會選擇呈現更能代表相關服務或產品的內容。

你可以有效地確定內容的優先次序，放棄Banner，使用有用又有效的主圖，再加入Banner中行為號召相關的元素。  

 結束語

如果用戶無法與你設計的Banner產生互動，可能不是Banner模式的問題。正如版面其他內容，Banner也需要引人入勝才能稱作有效。不要僅僅為了增加熒幕的內容而添加Banner。要記住 Banner永遠都不能勝過其內容 —— 如果內容不相關，用戶體驗將會特別糟糕 。

然而，若Banner內容符合質量標準，則Banner可以得體的方式將網站熱門與特色的內容突出呈現給用戶。因此，對于「我該不該使用Banner？」這一問題，正確的答案應該是：對目標用戶的體驗有幫助的話，那就用吧。

關鍵字：網頁設計,網絡營銷,網站設計,網站Banner設計