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

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

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

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

什么是Banner？

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

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

在同一Banner中，能看出有不止一條主題內(nèi)容。

Banner的優(yōu)點

通過Banner，可以在主頁同一塊黃金區(qū)域顯示多條內(nèi)容。

越靠近頁面頂端的信息更越可能獲得更多的關(guān)注。

Banner的弊端 

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

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

優(yōu)質(zhì)Banner設(shè)計指南

1. 內(nèi)容第一

有句我們聽過無數(shù)遍的話： 內(nèi)容為王 。 Banner形式的精美不如其內(nèi)容與用戶的關(guān)聯(lián)度重要。

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

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

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

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

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

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

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

2. 限制滾動圖片的數(shù)量

Banner 最多放五張圖片 。再多的話，用戶可能就不會去看了。限制滾動圖片的數(shù)量，還有一個好處就是幫助訪客更好地了解網(wǎng)站內(nèi)容，回過頭來能在Banner里再次發(fā)現(xiàn)相關(guān)內(nèi)容。

3. 提供進(jìn)度提醒

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

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

4. 確保滾動圖片的內(nèi)容在手機上清晰易讀

由于手機越來越強調(diào)注意力，優(yōu)化Banner內(nèi)容以方便手機客戶端查看則是首要任務(wù)。文字和圖片顯示得越清晰，用戶越有可能有興趣去了解相關(guān)內(nèi)容。

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

 5. 設(shè)計恰當(dāng)?shù)膶?dǎo)航按鈕

導(dǎo)航按鈕要幫助用戶識別各項選擇，使用戶在核心滾動圖片中看到相關(guān)內(nèi)容時能回想到這些選擇。

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

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

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

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

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

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

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

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

 除Banner之外的最佳選擇

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

 相比Banner，主圖有以下優(yōu)點：

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

若設(shè)計師明白其只能選擇僅此一張圖片，圖片還要表達(dá)其感情，他們更可能會選擇呈現(xiàn)更能代表相關(guān)服務(wù)或產(chǎn)品的內(nèi)容。

你可以有效地確定內(nèi)容的優(yōu)先次序，放棄Banner，使用有用又有效的主圖，再加入Banner中行為號召相關(guān)的元素。  

 結(jié)束語

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

然而，若Banner內(nèi)容符合質(zhì)量標(biāo)準(zhǔn)，則Banner可以得體的方式將網(wǎng)站熱門與特色的內(nèi)容突出呈現(xiàn)給用戶。因此，對于「我該不該使用Banner？」這一問題，正確的答案應(yīng)該是：對目標(biāo)用戶的體驗有幫助的話，那就用吧。

關(guān)鍵字：網(wǎng)頁設(shè)計,網(wǎng)絡(luò)營銷,網(wǎng)站設(shè)計,網(wǎng)站Banner設(shè)計