網站橫幅怎么制作，html橫幅廣告代碼

A 君導讀：雙 11、雙 12 終于結束了。每到這些電商節日，我們的網頁和手機 app 首頁就會變得比平時夸張。但夸張不一定是好事，到底怎樣的首頁輪播圖才是科學的？看完 AppSo（微信號 appsolution）今天分享的這篇文章，你就有答案。

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

沃爾瑪主頁的橫幅

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

就上述問題，隨便問一個人，他們都會告訴你橫幅是一種實證效果不好的模式（anti-pattern）。Erik Runyon 的一項研究顯示，只有 1 %的網站訪客會點擊并瀏覽橫幅相關內容——而其中有 84 %的人僅僅是點擊第一張滾動圖片。

Jared Smith 特地做了一個網站叫「我該不該使用橫幅？」，來說服大家「即使能用，也不應該用橫幅」。但也許，在 Jared 的網站上最好的說明，是 Lee Duddell 說的：

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

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

什么是橫幅

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

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

「折疊以上部分」是頁面上半部分，這部分是用戶點開網址后直接看到的頁面。圖片來源：userex.co

橫幅的優點

• 通過橫幅，可以在主頁同一塊黃金區域顯示多條內容。
• 越靠近頁面頂端的信息更越可能獲得更多的關注。

橫幅的弊端

• 人們經常忽略橫幅，同時忽略掉的還包括全部或部分橫幅里的內容（即使橫幅可以自動滾動）——訪客基本上不會在頁面頂端逗留過久。因此，不要指望人們消化掉橫幅的所有信息。
• 設計師通常將橫幅視為一系列圖片的集合體，但眾多用戶通常只看了其中的一張圖片。看完橫幅中的一系列圖片能給人留下精準的印象，使人了解相關服務或產品，但如果一個人只看到其中的一張圖的話，他可能就無法明白你想傳達的業務信息。

優質橫幅設計指南

1. 內容第一

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

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

• 如果內容對訪客不夠有吸引力、或沒有幫助的話，比如是人們不想關注的推廣信息，那就不要用橫幅。這些橫幅大多數情況下只會分散用戶的注意力，而不能指引用戶至一個簡單明了的行為號召。
• 橫幅內容不能像廣告（或者與廣告格式內容一樣）。如果內容看起來像廣告，大多數用戶會選擇直接忽視。原因就在于旗幟盲點（網頁使用中的一種現象，指網站訪問者自覺或不自覺地忽略橫幅樣的信息，又可稱為廣告的盲目性）。所以，選擇合適的字體和圖像使得橫幅和頁面其他內容相匹配就顯得非常重要。這樣的話，橫幅才會像整個網站的一部分，而不是網頁上被強加的廣告。

不推薦示范。Drugstore.com 的橫幅類似廣告。

• 滾動圖片的順序需要仔細斟酌。要記住，越是靠前的圖片，越能獲得更多曝光機會。所以，第一張圖片永遠是最重要的，它還能吸引訪客去看下一張圖。后續圖片都應該按重要性排序。
• 絕對不能把橫幅圖片當作了解網站特色和內容的唯一途徑。建議將出現在橫幅的重要信息另放在頁面的其他部分，這樣就更容易被網站訪客看見。
• 如果你想讓訪客看到所有內容，那就不要使用橫幅。哪怕橫幅是有效的，但要記住，大多數訪客不會瀏覽每一張橫幅圖片。

2. 限制滾動圖片的數量

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

3. 提供進度提醒

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

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

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

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

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

不推薦示范。手機設備滾動圖片的字體清晰度不高。圖片來源：Baymard

5. 設計恰當的導航按鈕

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

確保導航按鈕存在并出現在橫幅內，而不是橫幅下方或者其他區域。這樣就可以避免顯示不當的問題。下面以兩例桌面網站為例：

戴爾主頁上基本看不到下一項/上一項橫幅按鈕。導航選擇以非常小的框出現在橫幅下方。

不推薦示范

蘋果主頁提供了可視化高并且便于識別的下一項/上一項按鈕。

推薦示范

鏈接和按鈕的辨識度要高，并且足夠大，以方便辨識和點擊。如果按鈕（下一項/上一項以及滾動圖片選擇器）小而緊湊，亦或在雜亂背景的表面，則其辨識度不高，也不方便點擊。

在天梭主頁，橫幅左右兩端的箭頭在淺色背景圖映襯下辨識度很高，也方便點擊，但在圖示暗色背景圖上，箭頭辨識度就非常低。

不推薦示范

手機設備支持滑動手勢。這不是否定傳統的橫幅操控方式（比如下一項/上一項按鈕），而是在支持滑動手勢的基礎上添加這些操控方式。

推薦示范。手機設備支持滑動手勢。圖片來源：Dribbble

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

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

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

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

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

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

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

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

除橫幅之外的最佳選擇

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

相比橫幅，主圖有以下優點：

• 用戶可以專注于這一張圖，而不再將其注意力分散到其他的滾動圖片。相比滾動，靜態主圖能更少地分散用戶的注意力。
• 若設計師明白其只能選擇僅此一張圖片，圖片還要表達其感情，他們更可能會選擇呈現更能代表相關服務或產品的內容。

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

比如下方亞馬遜主頁截圖，設計師通過主圖設計突出其暢銷產品—— Kindle Paperwhite。這幅主圖既非常引人注目，又做到了傳情達意。

亞馬遜的主圖字體和色彩與主菜單欄字體和色彩相匹配，這幅主圖看起來就是整個網站的一部分，而不是強加的廣告。

再舉個例子——New Balance 發布其新品鞋，通過一條留下快速閃過痕跡的路徑吸引訪客眼球，使訪客各得所需。

新百倫同時呈現暢銷目錄和暢銷產品

結束語

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

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