電商 Banner 越大越好？電商轉化率、熱圖與首頁 UX 實測分析

最後更新：2026 年 8 月｜撰文：益盛科技 專案經理 Ring｜研究範圍：電商 UX、熱圖分析、Core Web Vitals、CRO

「首頁 Banner 要不要再放大一點？」這句話，是網頁設計工作中經常遇到客戶問的問題。
品牌端想要主視覺夠有氣勢，設計端想要畫面完整、有質感，
但這兩個立場都沒有站在使用者的視角來考慮呢？
banner 尺寸的大小重點應該是：
這張 Banner 有沒有幫使用者往下一步走？

過去半年我們幫幾個電商客戶調整過首頁 Banner 高度，也拿實際熱圖數據回頭檢查。
這篇文章會把數據跟研究一起攤開來看：
Nielsen Norman Group 的首頁注意力研究、Baymard Institute 的電商首頁研究，
加上 Google 對網站速度與商業成果的公開案例，
搭配我們自己客戶的熱圖對照。

本文案例數據來自單一網站不同時期的使用者行為觀察，
主要用於說明熱圖分析方法，
不代表所有電商網站都會得到相同結果。

• 我們的熱圖數據：Banner 調整前後差多少
• 為什麼首頁是整個頁面最貴的版位
• 電商首頁還要做到一件事：讓人看懂你在賣什麼
• Banner 也會拖慢網站速度，進而影響轉化
• 沒有標準尺寸，但有判斷原則
• 怎麼驗證你的 Banner 該多大
• 參考資料
• 常見問題
• 預約首頁健檢與熱圖分析

Banner 越大越好嗎？先看我們自己的熱圖數據

先講結論：Banner 不是越大越好。

其中一個客戶的首頁在 4 月採用較大版本的 Banner，7 月則重新調整首頁視覺高度。
我們把兩個月份的熱圖資料放在一起看，差異就很明顯。
原本團隊內部的直覺是「圖片放大、畫面更滿，使用者感受應該會更強烈」，
但實際數字給的答案不太一樣。

4 月的首頁使用了較大版本的 Banner，第一眼確實有氣勢，
但使用者必須先滑過一大段主視覺，才能看到下面真正的商品與內容。
相較 4 月的大圖版本，7 月版面調整後，商品區塊在畫面中出現的時間點提早，
整體瀏覽分布也更平均，當月 Scroll Rate 為 54.9%。

同一客戶稍晚的 8 月版本調整中，我們也觀察到 Scroll Rate 從 54.9% 進一步變化到 57.6%，
Exit Rate 從 50.4% 變化到 49%，方向與 4 月至 7 月的觀察一致。

這組數字不是要證明「調整後的版本絕對比較好」，
樣本來自單一客戶、單一時間段，不能直接套用到所有網站。
但它至少證明一件事：
視覺滿版跟使用者願意往下逛，是兩回事。
客戶常說「這樣比較有質感」，設計師常說「這樣畫面比較完整」，
最後還是要回頭看熱圖：
使用者真的有往下滑嗎？真的有點嗎？有熱圖數據之後，
這個問題才有辦法回答，不用每次都靠猜。

為什麼首頁是整個頁面最貴的版位

Nielsen Norman Group 針對捲動行為與注意力分布做過長期研究，
結果顯示使用者約 57% 的頁面觀看時間集中在進站後第一個畫面可見範圍 ( 首屏 )，
約 74% 集中在前兩個螢幕高度之內。

這個數字不代表所有內容都得硬塞進 ( 首屏 )，意思比較接近：
使用者進站後第一個畫面，是整個首頁最重要的版位。
如果 Banner 從原本只占進站畫面的一半，變成幾乎占滿整個螢幕，
下方的商品分類、熱門商品、優惠訊息與 CTA 就會被往下推，
被犧牲掉的通常是商品分類入口、熱門商品、優惠訊息、品牌價值主張，
或是「下面還有東西可以看」的視覺提示，留白反而不是真正的問題。

Nielsen Norman Group 對 「fold」的研究也點出同一件事：
使用者確實會往下捲，但前提是第一屏要給他一個理由，讓他相信下面值得繼續看。
如果畫面看起來像「內容已經結束」，就算下面還有大量商品，使用者也未必會主動去找。
這種「完整感」的錯覺，
正是滿版 Banner 最容易踩到的陷阱。

對電商網站來說，這件事的代價更直接。
首屏的核心工作是把人送進購物流程，單純的視覺欣賞排不上第一順位。
如果使用者只看到一張漂亮的商品照，卻不知道這是新品、優惠還是系列介紹，
這張 Banner 的商業價值就只剩下建立品牌印象。

電商首頁還要做到一件事：讓人看懂你在賣什麼

Baymard Institute 針對電商首頁做過大規模使用者研究，在一項針對 1,167 名美國線上購物者的調查中，
33% 的受訪者表示，
在休閒瀏覽視覺導向商品時，會先捲動首頁來判斷網站賣什麼。
如果首頁被單一活動或單一大型視覺長時間佔滿，
使用者反而可能低估這個網站真正的商品範圍。

不同產業，這個問題呈現的方式也不一樣，
我們手上幾個客戶正好可以互相對照。
同樣是首頁 Banner，產業不同，最佳做法也不一樣：

• 晶華傢俱
  賣的是沙發、床台、餐桌椅這類高單價家具，
  首頁需要用大圖建立質感，但首屏也要讓使用者看到「沙發、床台、餐桌」這幾個大分類同時存在，
  不能讓單一系列的主視覺獨占畫面。
• 奎斯德
  是餐飲原料一站式服務的 B2B 電商，
  採購者上首頁多半帶著明確任務，首屏更需要讓對方快速掌握「這裡有哪些原料類別」，
  Banner 的品牌形象需求就相對讓位給導覽效率。
• 思誠國際 bkshop
  經營專櫃品牌美妝保養電商，視覺質感是轉化的一部分，
  首頁 Banner 可以保留較強的氣氛營造，
  但下方的品牌與品項入口仍要在使用者滑動一兩次之內出現，
  避免變成純粹的形象頁。

三個產業對「Banner 該多有氣勢」的答案完全不一樣，但共同原則相同：首頁必須讓使用者盡早看懂網站到底在賣什麼。

輪播 Banner 不代表每張都被看到

如果大型 Banner 又加上自動輪播，風險會再往上疊一層。
Baymard 針對電商首頁輪播的研究指出，約 33% 的主流歐美電商桌機網站使用首頁輪播，
其中約 46% 存在可辨識的使用體驗問題。
研究也提到，使用者常常會直接往下捲動，不一定會停留等第二、第三張輪播出現。

首頁放五張輪播 Banner，不代表五個活動都被看見。
在使用者眼中，很可能只有第一張加上一個往下滑的動作。
Banner 越多、動畫越豐富，並不會自動換來更高的轉化率。

Banner 也會拖慢網站速度，進而影響轉化

討論 Banner 大小，還有另一種「大小」常被忽略：檔案大小。
同一張 Banner，CSS 上顯示高度 600px，跟圖片檔案本身是 150KB 還是 2MB，
是完全不同的兩個問題。

首屏的 Hero Image 很容易成為 Largest Contentful Paint（LCP）的主要元素。
Google 目前的 Core Web Vitals 標準建議，
在實際使用者資料的第 75 百分位上，LCP 應維持在 2.5 秒以內，
CLS 應低於 0.1，INP 應在 200 毫秒以內。
如果為了畫質把 Banner 上傳成數 MB 的原始解析度圖片，
很可能出現一個反效果：使用者還沒看到漂亮的大圖，就先因為等待而離開了。

Google web.dev 公開的案例中，Vodafone Italy 在一項效能優化專案將 LCP 改善約 31%，A/B Test 觀察到銷售增加約 8%，
改善方式之一正是 Hero Image 的尺寸與圖片效能優化。
這是單一企業的 A/B Test 結果，不能推論所有網站只要改善 LCP 就能得到相同比例的營收成長，
但足以說明 Banner 效能不只是技術問題，也可能直接反映在營收數字上。

沒有標準尺寸，但有判斷原則

「首頁 Banner 到底該做 1920×600、1920×800，還是 1920×1080？」
是我們最常被問的問題，但研究給不出一個適用所有品牌的答案。
原因很單純：使用者的螢幕尺寸、瀏覽器視窗、網站 Header 高度、Banner 文案、CTA 與商品類型都不一樣，
同一張圖片放在桌機跟手機上，也不該只是等比例縮小。

比起指定一組所有網站都通用的像素尺寸，我們更建議觀察 Banner 在使用者進站後第一個畫面中，占了多少空間。
假設使用者進站後第一屏能看到：Header、主視覺、標題、CTA，加上下一區內容的一小段，通常會比「Header 加上一張塞滿剩餘高度的圖片」，提供更多往下探索的線索。
這不是要求 Banner 一定要縮小，而是刻意避免製造「畫面已經結束」的感覺。

手機與桌機不應該共用同一套裁切邏輯

桌機與手機的轉化率本來就有落差，兩種裝置的首頁體驗應該分開分析，
而不是做一版桌機圖，再自動縮小成手機版。
技術上，Google web.dev 建議使用 responsive images，透過 srcset、sizes 或 picture 標籤，
針對不同 viewport 提供不同尺寸甚至不同裁切方式：
桌機可以用橫式情境圖，手機則重新裁切成直式構圖，而不是硬把整張橫圖壓縮進手機螢幕。

如果首屏 Banner 本身就是 LCP 圖片，
Google 明確建議不要對它套用 lazy loading；
若圖片較晚才被瀏覽器發現，可以評估提高 fetch priority 或視情境使用 preload。
圖片也應該指定寬高或保留固定的 aspect ratio，
避免圖片載入完成後把下方文字與按鈕突然往下推，造成版面跳動（CLS）。

怎麼驗證你的 Banner 該多大

熱圖很適合用來發現問題，但要證明因果關係，最好搭配受控的 A/B Test。
比較務實的做法是建立三個版本：
大型 Banner（接近完整首屏）、
中型 Banner（第一屏可看到下一區）、
精簡版 Banner（價值主張與 CTA 為主，商品入口更早曝光）。
圖片、文案、優惠與流量來源盡量維持一致，只調整 Hero 區的高度與版面配置。

觀察指標也不該只看購買轉化率，而是拉出一條完整的首頁漏斗：
Homepage → Banner／分類點擊 → Product Listing／Product Page → Add to Cart → Checkout → Purchase。Banner 位在漏斗最前端，
「商品頁進入率」或「首頁到商品區的點擊率」往往比購買率更早反映版面差異。

Revenue per Session 特別值得盯著看，因為電商營收的核心關係很單純：
流量 × 轉化率 × 客單價 = 營收。Banner 優化真正的終點，
是同一批流量有沒有產生更多有效的商業成果，
熱圖畫面變得更紅只是過程中的線索。

回到最初那個問題：
「Banner 再放大一點會不會比較好？」
比較準確的回答，要看它有沒有提高使用者的下一步行動率，單純判斷「大圖好不好」意義不大。
圖片可以很有氣勢，
但如果使用者只看到圖片，卻沒看到商品、入口與行動理由，被放大的可能只有視覺，
商品頁進入率跟轉化率不見得會跟著上升。

首頁不是一張海報，它是使用者進站後的第一個入口。
一張好的 Banner，真正的工作不是讓使用者停在 Banner 上，
而是讓對方清楚知道，下一步該往哪裡去。

相關文章

• 電商 SEO 完整攻略：從產品頁到分類頁全優化
• 自建電商官網 vs 入駐蝦皮：品牌長期怎麼選
• 品牌電商 vs 一般電商：為什麼品牌要有自己的官網
• 電商 網頁設計費用：從規劃到上線要花多少錢？
• 電商 網站不是上架就好：GMC、AI SEO、在地商家與私域經營怎麼整合？
• Shopify vs 電商平台 vs 客製化電商，台灣品牌怎麼選？

參考資料

• Nielsen Norman Group – Scrolling and Attention
• Nielsen Norman Group – The Fold Manifesto
• Nielsen Norman Group – The Illusion of Completeness
• Baymard Institute – Homepage UX: Featuring Product Breadth
• Baymard Institute – 10 UX Requirements for Homepage Carousels
• web.dev – The business impact of Core Web Vitals

常見問題

首頁 Banner 到底要多大？有沒有建議尺寸？

目前的研究沒有一個適用所有網站的最佳像素尺寸。
比起指定固定尺寸，建議用「首屏佔用率」思考：
使用者進站後第一眼，是否能同時看到 Header、主視覺、CTA，甚至看到下一個區塊的一小部分。
主視覺、CTA，並露出下一區內容的一小段。
實際高度仍需依品牌調性、商品類型與裝置比例調整。

Banner 用輪播比較好，還是單張比較好？

Baymard 的研究顯示，主流電商網站使用首頁輪播的比例不低，
但不少存在可辨識的使用體驗問題，
使用者也常常在輪播切換前就已經往下捲動。
如果沒有明確需要同時曝光多則訊息，
單張靜態主視覺通常是更簡單可靠的選擇。

圖片變大會不會影響網站速度？

顯示尺寸與檔案大小是兩個不同問題。
就算 CSS 顯示高度沒有改變，圖片檔案本身過大仍會拖慢 LCP。
建議針對桌機與手機分別壓縮輸出，並確認首屏 Hero Image 沒有被套用 lazy loading。

熱圖數據足夠證明 Banner 該怎麼改嗎？

熱圖適合用來發現問題與觀察趨勢，但單一時間段、單一客戶的數據不足以代表普遍定律。
要確認因果關係，建議搭配控制變因的 A/B Test，
並同時觀察 Scroll Rate、商品頁進入率與轉化率等多項指標。

手機版跟桌機版的 Banner 需要分開設計嗎？

建議分開設計。
手機畫面本來就比較小，如果 Banner 又占掉大部分高度，下方商品與導覽入口更容易被推到畫面外。
同一張橫式 Banner 縮小後，商品與導覽入口更容易被推到畫面下方。
透過 responsive images 針對不同裝置提供不同構圖，會比單純等比例縮放更能保留首屏可用空間。

首頁 Banner 高度要看哪個指標最有用？

沒有單一指標可以直接判斷 Banner 好壞。
實務上建議一起看 Scroll Rate、首頁到商品頁 CTR、Hero CTR、Exit Rate、Add-to-Cart Rate，以及 LCP／CLS。
前段指標可以看使用者有沒有繼續逛，
後段指標則能檢查是否真的影響購物成果。

預約首頁健檢與熱圖分析