成功吸引你注意的網(wǎng)站橫幅，究竟做對(duì)了什么？ #002

時(shí)間：2023-07-02 16:36:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-02 16:36:01 來源：網(wǎng)站運(yùn)營

成功吸引你注意的網(wǎng)站橫幅，究竟做對(duì)了什么？ #002：

俊鐵導(dǎo)讀：

雙 11、雙 12 終于結(jié)束了。每到這些電商節(jié)日，我們的網(wǎng)頁和手機(jī) app 首頁就會(huì)變得比平時(shí)夸張。但夸張不一定是好事，到底怎樣的首頁輪播圖才是科學(xué)的？看完這篇文章，你就有答案。

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

但主頁橫幅真的對(duì)用戶有用嗎？或者說它們能算作一種簡(jiǎn)便的內(nèi)容呈現(xiàn)方式嗎？

就上述問題，隨便問一個(gè)人，他們都會(huì)告訴你橫幅是一種實(shí)證效果不好的模式（anti-pattern）。Erik Runyon 的一項(xiàng)研究顯示，只有 1 %的網(wǎng)站訪客會(huì)點(diǎn)擊并瀏覽橫幅相關(guān)內(nèi)容——而其中有 84 %的人僅僅是點(diǎn)擊第一張滾動(dòng)圖片。

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

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

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

一、什么是橫幅

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

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

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

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

橫幅的弊端

• 人們經(jīng)常忽略橫幅，同時(shí)忽略掉的還包括全部或部分橫幅里的內(nèi)容（即使橫幅可以自動(dòng)滾動(dòng)）——訪客基本上不會(huì)在頁面頂端逗留過久。因此，不要指望人們消化掉橫幅的所有信息。
• 設(shè)計(jì)師通常將橫幅視為一系列圖片的集合體，但眾多用戶通常只看了其中的一張圖片?？赐隀M幅中的一系列圖片能給人留下精準(zhǔn)的印象，使人了解相關(guān)服務(wù)或產(chǎn)品，但如果一個(gè)人只看到其中的一張圖的話，他可能就無法明白你想傳達(dá)的業(yè)務(wù)信息。

二、優(yōu)質(zhì)橫幅設(shè)計(jì)指南

1. 內(nèi)容第一

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

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

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

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

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

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

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

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

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

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

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

5. 設(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ù)膯栴}。下面以兩例桌面網(wǎng)站為例：

戴爾主頁上基本看不到下一項(xiàng)/上一項(xiàng)橫幅按鈕。導(dǎo)航選擇以非常小的框出現(xiàn)在橫幅下方。

蘋果主頁提供了可視化高并且便于識(shí)別的下一項(xiàng)/上一項(xiàng)按鈕。

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

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

手機(jī)設(shè)備支持滑動(dòng)手勢(shì)。這不是否定傳統(tǒng)的橫幅操控方式（比如下一項(xiàng)/上一項(xiàng)按鈕），而是在支持滑動(dòng)手勢(shì)的基礎(chǔ)上添加這些操控方式。

三、自動(dòng)滾動(dòng)（或自動(dòng)輪換）小技巧

橫幅中不同圖片的自動(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)擊屏幕時(shí)，可能會(huì)因?yàn)闄M幅圖片自動(dòng)滾動(dòng)不小心點(diǎn)到不想點(diǎn)開的圖片。

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

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

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

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

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

四、除橫幅之外的最佳選擇

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

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

• 用戶可以專注于這一張圖，而不再將其注意力分散到其他的滾動(dòng)圖片。相比滾動(dòng)，靜態(tài)主圖能更少地分散用戶的注意力。
• 若設(shè)計(jì)師明白其只能選擇僅此一張圖片，圖片還要表達(dá)其感情，他們更可能會(huì)選擇呈現(xiàn)更能代表相關(guān)服務(wù)或產(chǎn)品的內(nèi)容。

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

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

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

結(jié)束語

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

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




作者 | Nick Babich 軟件工程師，關(guān)注UI和UX。

譯者 | 俊鐵

題圖 | Pexels

文章已獲原作者授權(quán)翻譯，原文鏈接：Designing a User-Friendly Homepage Carousel。

本文首發(fā)于愛范兒。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。