設計橫幅的技巧有哪些?用戶去與留，大多是由網站設計而決定的，其關鍵因素在於網頁中的圖片設計，或近期很流行且能移動的「橫幅」。橫幅，又叫圖片滾動、滑塊、特色內容模塊等等很多類似的叫法，其在網頁上隨處可見，尤其是電商網站的主頁上，大多電商網站的PC端網站主頁都會有橫幅。

能夠移動的橫幅雖然能吸引用戶眼球，但如果其設計和文字內容無關，就會顯得多此一舉。本文將通過介紹橫幅的重要性、特點、設計指南等一一介紹，或許各位看官看完後，能理解橫幅存在的目的，甚至改進自己網站的版面設計。

網頁設計技巧

◇ 什麼是橫幅?

橫幅是企業在網站主頁上顯示宣傳內容的一種推廣形式。通過橫幅，用戶無需自行滾動瀏覽，便可知道信息或活動的詳情。橫幅呈現的形式和大小非常多樣，但大多橫幅都有如下特徵：

特徵一：主要出現主頁靠上位置，佔據頁面顯眼位置絕大部分的區域;

特徵二：即使每次只能展示一條，通過滾動形式，在同一個位置能展示多條推廣;

特徵三：同一位置的橫幅中，每條推廣都有自己的主題內容，且包含圖像和少許文字。

網頁設計技巧

橫幅的優點：

1. 可以在主頁的同一塊黃金區域顯示多條推廣內容;

2. 越靠近頁面頂端的信息，越可能獲取更多關注。

橫幅的缺點：

① 用戶經常忽略橫幅以及橫幅內的內容，即使橫幅可以自動滾動;

② 用戶基本不會在頁面的頂端逗留太久，所以基本上他們不能消化掉橫幅所有訊息;

③ 設計師和用戶理解出現偏差，設計師視橫幅為一系列圖片的集合體，但大多數用戶只會留意其中一張圖;

④ 用戶未必能通過橫幅，可以了解相關服務或產品，甚至無法明白設計師想傳達的訊息。

◇ 主頁橫幅對網站有用嗎?

事實上，橫幅是一種實證效果不好的模式(anti-pattern)。曾有相關數據顯示，只有1%的網站用戶會點擊並瀏覽橫幅相關內容，而在這1%的用戶中有84%的用戶僅僅是點擊橫幅的第一張滾動圖片。

既然橫幅點擊率那麼低，為何還要使用橫幅呢?

雖然橫幅的效果並不好，但從很多案例分析，我們不難發現，只要堅守一些重要的操作細節，橫幅不單可以獲得很好的宣傳效果，還對用戶有很好的幫助。

◇ 橫幅設計指南

——如何通過橫幅吸引用戶

一、 內容第一

網頁設計技巧

「內容為王」，很多時候即使橫幅的設計多精美，交互多簡單，如果內容不相關，這對用戶來說都是「大災難，因為他們無法理解橫幅所傳達的信息。想避免這種情況，在設計上就要注意以下一些重要規則：

1. 如果橫幅內容不夠吸引或對用戶沒有幫助，那就直接不要用橫幅，避免分散用戶的注意力;

2. 橫幅是整個網站的一部分，而不是網頁強加的廣告，所以橫幅內容不要太像廣告，否則用戶會選擇直接忽視;

3. 選擇合適的字體和圖像，讓橫幅和頁面其他內容相匹配;

4. 滾動圖片的順序要仔細斟酌，越靠前的圖片，獲得的曝光機會越多，因此第一張圖片非常重要，它是決定用戶停留時間長短的關鍵;

5. 不要把橫幅當作了解網站特色和內容的唯一途徑，建議將出現在橫幅的重要信息放在頁面的其他部分，方便用戶瀏覽時能看到。如果你想讓用戶看到網站所有內容，建議不要使用橫幅，因為大多數用戶並不會每張橫幅圖片都瀏覽。

二、 限制滾動圖片數量

網頁設計技巧

盡量控制橫幅圖片數量在五張以下，這樣能幫助用戶更好地了解網站內容，回過頭後還能在橫幅里找到相關內容。若橫幅圖片數量太多，用戶可能會無那麼多耐性等待，繼而放棄繼續瀏覽。

三、 提供進度提醒

網頁設計技巧

讓用戶知道橫幅總共有多少張滾動圖片，同時讓其知道當前的「進度」是第幾張圖片，讓用戶覺得一切都盡在掌握之中。

四、 確保滾動圖片內容在手機清晰顯示

網頁設計技巧

越來越多企業網站採用響應式網站設計，設計師在設計橫幅時，不僅需要注意PC端的易讀性;還要確保手機客戶端中橫幅文字和圖片清晰，用戶才有興趣了解。

五、 設計恰當的導航按鈕

網頁設計技巧

導航按鈕能幫助用戶識別各項選擇，能使用戶在核心滾動圖片，看到相關內容時，能回想到這些選擇。因此確保導航按鈕存在並出現在橫幅內，而不是其他區域，這樣可以避免顯示不當的問題。

六、 確保自動滾動運行流暢

網頁設計技巧

橫幅使用自動滾動能幫助用戶瀏覽相關信息，但想要自動滾動運行流暢，就需要注意以下幾點細節：

1. 手機設備不要加載自動滾動功能，避免用戶誤觸不想點開的圖片;

2. 確保自動滾動切換速度不要過快或快慢;切換過快，用戶無法讀取信息;切換過慢，會讓用戶厭煩那些滾動圖片;

3. 讓用戶保持可控狀態，增加暫停、上一頁、下一頁以及頁數選項，方便用戶能切換到想要點擊的滾動圖片。

4. 滾動到最後一張圖片後不要停止，而是繼續循環播放所有圖片。

七、除了橫幅之外的最佳選擇

網頁設計技巧

由於橫幅缺乏背景鋪墊，因此大多用戶並不願意去瀏覽或了解當中的內容，要解決這個問題，同時又想吸引用戶眼球，除了橫幅，也可以考慮主圖。

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

1. 靜態主圖能減少分散用戶的注意力，讓用戶可以專註於一張圖片;

2. 靜態主圖僅有一張，設計師能投放更多心思和情感，將相關服務或產品呈現給用戶;

3. 有效確定內容的優先次序，並更好地號召用戶參與。

如果用戶無法與橫幅設計產生互動，這並非全部是橫幅模式問題，可能是你的橫幅不夠引人入勝，可能是你的內容與橫幅不相關，也有可能是因為你的網站不適宜添加橫幅。因此，在設計橫幅時，應該考慮這個設計是否對用戶的體驗有幫助，能否更好地傳達信息給用戶，如果答案是肯定的話，那就大膽地用吧!