首頁輪播圖到底要不要放？

做網站時，很多老闆第一個要求就是：「首頁要有那種會換圖的大圖。」五張照片輪流播，有新產品、有工廠、有活動，看起來很豐富。

輪播圖不是不能用，但它常常沒有發揮老闆以為的效果。這篇整理輪播圖常見的問題，什麼時候適合用，真的要放時怎麼做比較好。

輪播圖常見的 5 個問題

一、後面幾張很少人看。 客人打開首頁，看到第一張圖，通常直接往下捲，不會停下來等第二張。研究網站使用行為的 Nielsen Norman Group 也提醒：放在後面幾張的內容很容易被錯過，重要的東西要在頁面別的地方再出現一次。

二、每張都想講，結果都沒講清楚。 五張圖等於五個重點，客人反而不知道你最想說什麼。Nielsen Norman Group 也提過：只能放一張的時候，大家才會認真挑出最好的那張、最重要的那句話。

三、手機上效果差。 電腦上寬寬的橫幅圖，到了手機上變成窄窄一條，圖上的字小到看不清楚。手機上大家捲得很快，自動換圖時人早就捲到下面去了。

四、拖慢網站速度。 首頁最上面的大圖是載入時最重要的一塊。一次載入五張大圖，加上輪播外掛本身的程式，首頁打開會變慢，速度慢的影響在〈網站打開很慢？〉有說明。

五、自動播放會干擾閱讀。 正在讀圖上的字，圖就換走了。國際的網頁無障礙標準 WCAG 也規定：自動開始、持續超過 5 秒、和其他內容一起出現的動態內容，要讓使用者可以暫停、停止或隱藏。

什麼時候適合用輪播

輪播本身沒有錯，問題是拿來放「首頁最重要的那句話」。下面這些情況就很適合：

• 作品、商品照片：同一件商品的不同角度，讓客人自己點著看。
• 餐廳菜色、空間照片：客人本來就想多看幾張。
• 客戶評價：一則一則換著看，放在頁面中段。
• 活動花絮：不是主要訊息，是補充。

共通點是：客人主動點著看，而且少看一張也不影響理解。

替代做法：一張主圖、一句話、一個按鈕

首頁第一屏，大多數的公司和店家用這個組合就夠了：

1. 一張真實的照片：你的店面、工廠、產品或上課的情況。
2. 一句話：說清楚你們做什麼、給誰。
3. 一個按鈕：「預約參觀」「免費估價」「看作品」，只放一個最想要客人做的事。

原本想放在第二張到第五張的內容，改成往下捲的區塊，一個區塊講一件事。客人往下捲就看得到，不用等。

版面上的做法，在〈極簡風網站怎麼做才不空〉和〈一頁式介紹頁的版型〉有更多例子。

真的要放輪播時

老闆還是喜歡輪播，或是內容真的適合，照這幾點做（張數少、控制要清楚、手機不自動播，也是 Nielsen Norman Group 的建議）：

• 張數少一點：3 張以內。最重要的放第一張。
• 不要自動播放，或至少讓人看得完、可以暫停。Nielsen Norman Group 建議手機上不要自動換圖。
• 左右箭頭、目前在第幾張要清楚：小圓點在手機上很難點，箭頭要夠大、和背景有對比。
• 每張只放一句話、一個按鈕，字不要壓在照片最花的地方。
• 手機版另外裁圖：直式螢幕用直式或方形的圖，主角不要被切掉。
• 圖片壓縮過再上傳，第一張圖不要設成延遲載入，第二張以後再延遲。
• 圖上的字不要做成圖片：做成文字，搜尋引擎讀得到，手機上也比較清楚。

舊網站的輪播要拆掉嗎

如果你的網站已經有輪播，可以先打開 Google Analytics 看首頁的停留時間，再用手機實際打開首頁，看第一張圖的字讀不讀得到、等多久才出現。

改版不一定要整個重做，常常只是把輪播換成一張主圖，把其他幾張的內容移到下面，首頁就清楚很多。

正威網路行銷是 25 年經驗的基隆網頁設計工作室，也服務台北和全台灣的客戶。首頁要怎麼安排，我們會先問你最希望客人看完做什麼，再決定版面。想看看自己的首頁怎麼改，歡迎免費諮詢。