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

網(wǎng)站設(shè)計(jì)

能夠移動(dòng)的橫幅雖然能吸引用戶眼球，但如果其設(shè)計(jì)和文字內(nèi)容無關(guān)，就會(huì)顯得多此一舉。本文將通過介紹橫幅的重要性、特點(diǎn)、設(shè)計(jì)指南等一一介紹，或許各位看官看完后，能理解橫幅存在的目的，甚至改進(jìn)自己網(wǎng)站的版面設(shè)計(jì)。

◇ 什么是橫幅?

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

特征一：主要出現(xiàn)主頁靠上位置，占據(jù)頁面顯眼位置絕大部分的區(qū)域;

特征二：即使每次只能展示一條，通過滾動(dòng)形式，在同一個(gè)位置能展示多條推廣;

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

橫幅的優(yōu)點(diǎn)：

1. 可以在主頁的同一塊黃金區(qū)域顯示多條推廣內(nèi)容;

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

橫幅的缺點(diǎn)：

① 用戶經(jīng)常忽略橫幅以及橫幅內(nèi)的內(nèi)容，即使橫幅可以自動(dòng)滾動(dòng);

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

③ 設(shè)計(jì)師和用戶理解出現(xiàn)偏差，設(shè)計(jì)師視橫幅為一系列圖片的集合體，但大多數(shù)用戶只會(huì)留意其中一張圖;

④ 用戶未必能通過橫幅，可以了解相關(guān)服務(wù)或產(chǎn)品，甚至無法明白設(shè)計(jì)師想傳達(dá)的訊息。

◇ 主頁橫幅對(duì)網(wǎng)站有用嗎?

事實(shí)上，橫幅是一種實(shí)證效果不好的模式(anti-pattern)。曾有相關(guān)數(shù)據(jù)顯示，只有1%的網(wǎng)站用戶會(huì)點(diǎn)擊并瀏覽橫幅相關(guān)內(nèi)容，而在這1%的用戶中有84%的用戶僅僅是點(diǎn)擊橫幅的張滾動(dòng)圖片。

既然橫幅點(diǎn)擊率那么低，為何還要使用橫幅呢?

雖然橫幅的效果并不好，但從很多案例分析，我們不難發(fā)現(xiàn)，只要堅(jiān)守一些重要的操作細(xì)節(jié)，橫幅不單可以獲得很好的宣傳效果，還對(duì)用戶有很好的幫助。

◇ 橫幅設(shè)計(jì)指南

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

一、 內(nèi)容

「內(nèi)容為王」，很多時(shí)候即使橫幅的設(shè)計(jì)多精美，交互多簡單，如果內(nèi)容不相關(guān)，這對(duì)用戶來說都是「大災(zāi)難，因?yàn)樗麄儫o法理解橫幅所傳達(dá)的信息。想避免這種情況，在設(shè)計(jì)上就要注意以下一些重要規(guī)則：

1. 如果橫幅內(nèi)容不夠吸引或?qū)τ脩魶]有幫助，那就直接不要用橫幅，避免分散用戶的注意力;

2. 橫幅是整個(gè)網(wǎng)站的一部分，而不是網(wǎng)頁強(qiáng)加的廣告，所以橫幅內(nèi)容不要太像廣告，否則用戶會(huì)選擇直接忽視;

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

4. 滾動(dòng)圖片的順序要仔細(xì)斟酌，越靠前的圖片，獲得的曝光機(jī)會(huì)越多，因此張圖片非常重要，它是決定用戶停留時(shí)間長短的關(guān)鍵;

5. 不要把橫幅當(dāng)作了解網(wǎng)站特色和內(nèi)容的途徑，建議將出現(xiàn)在橫幅的重要信息放在頁面的其他部分，方便用戶瀏覽時(shí)能看到。如果你想讓用戶看到網(wǎng)站所有內(nèi)容，建議不要使用橫幅，因?yàn)榇蠖鄶?shù)用戶并不會(huì)每張橫幅圖片都瀏覽。

二、 限制滾動(dòng)圖片數(shù)量

盡量控制橫幅圖片數(shù)量在五張以下，這樣能幫助用戶更好地了解網(wǎng)站內(nèi)容，回過頭后還能在橫幅里找到相關(guān)內(nèi)容。若橫幅圖片數(shù)量太多，用戶可能會(huì)無那么多耐性等待，繼而放棄繼續(xù)瀏覽。

三、 提供進(jìn)度提醒

讓用戶知道橫幅總共有多少張滾動(dòng)圖片，同時(shí)讓其知道當(dāng)前的「進(jìn)度」是第幾張圖片，讓用戶覺得一切都盡在掌握之中。

四、 確保滾動(dòng)圖片內(nèi)容在手機(jī)清晰顯示

越來越多企業(yè)網(wǎng)站采用響應(yīng)式網(wǎng)站設(shè)計(jì)，設(shè)計(jì)師在設(shè)計(jì)橫幅時(shí)，不僅需要注意PC端的易讀性;還要確保手機(jī)客戶端中橫幅文字和圖片清晰，用戶才有興趣了解。

五、 設(shè)計(jì)恰當(dāng)?shù)膶?dǎo)航按鈕

導(dǎo)航按鈕能幫助用戶識(shí)別各項(xiàng)選擇，能使用戶在核心滾動(dòng)圖片，看到相關(guān)內(nèi)容時(shí)，能回想到這些選擇。因此確保導(dǎo)航按鈕存在并出現(xiàn)在橫幅內(nèi)，而不是其他區(qū)域，這樣可以避免顯示不當(dāng)?shù)膯栴}。

六、 確保自動(dòng)滾動(dòng)運(yùn)行流暢

橫幅使用自動(dòng)滾動(dòng)能幫助用戶瀏覽相關(guān)信息，但想要自動(dòng)滾動(dòng)運(yùn)行流暢，就需要注意以下幾點(diǎn)細(xì)節(jié)：

1. 手機(jī)設(shè)備不要加載自動(dòng)滾動(dòng)功能，避免用戶誤觸不想點(diǎn)開的圖片;

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

3. 讓用戶保持可控狀態(tài)，增加暫停、上一頁、下一頁以及頁數(shù)選項(xiàng)，方便用戶能切換到想要點(diǎn)擊的滾動(dòng)圖片。

4. 滾動(dòng)到最后一張圖片后不要停止，而是繼續(xù)循環(huán)播放所有圖片。

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

由于橫幅缺乏背景鋪墊，因此大多用戶并不愿意去瀏覽或了解當(dāng)中的內(nèi)容，要解決這個(gè)問題，同時(shí)又想吸引用戶眼球，除了橫幅，也可以考慮主圖。

相比橫幅，主圖有以下優(yōu)點(diǎn)：

1. 靜態(tài)主圖能減少分散用戶的注意力，讓用戶可以專注于一張圖片;

2. 靜態(tài)主圖僅有一張，設(shè)計(jì)師能投放更多心思和情感，將相關(guān)服務(wù)或產(chǎn)品呈現(xiàn)給用戶;

3. 有效確定內(nèi)容的優(yōu)先次序，并更好地號(hào)召用戶參與。

如果用戶無法與橫幅設(shè)計(jì)產(chǎn)生互動(dòng)，這并非全部是橫幅模式問題，可能是你的橫幅不夠引人入勝，可能是你的內(nèi)容與橫幅不相關(guān)，也有可能是因?yàn)槟愕木W(wǎng)站不適宜添加橫幅。因此，在設(shè)計(jì)橫幅時(shí)，應(yīng)該考慮這個(gè)設(shè)計(jì)是否對(duì)用戶的體驗(yàn)有幫助，能否更好地傳達(dá)信息給用戶，如果答案是肯定的話，那就大膽地用吧!

【版權(quán)聲明】:本站內(nèi)容來自于與互聯(lián)網(wǎng)(注明原創(chuàng)稿件除外),供訪客免費(fèi)學(xué)習(xí)需要。如文章或圖像侵犯到您的權(quán)益，請(qǐng)及時(shí)告知，我們第一時(shí)間刪除處理！謝謝！