輪轉介面的最佳做法

針對輪轉介面進行最佳化，提升效能和可用性。

Katie Hempenius
Katie Hempenius
X

輪轉介面是一種 UX 元件，可以類似幻燈片的方式顯示內容。輪轉介面可「自動播放」，或由使用者手動瀏覽。雖然輪轉介面可用於其他位置，但最常用於在首頁上顯示圖片、產品和促銷活動。

本文將說明輪轉介面的效能和使用者體驗最佳做法。

顯示輪轉介面的圖片

成效

實作良好的輪轉介面本身，對效能影響應極小或完全沒有影響。不過，輪轉介面通常會包含大型媒體素材資源。無論素材資源是在輪轉介面或其他位置顯示，都可能會影響成效。

  • LCP (最大內容繪製)

    大型的折頁面外輪轉介面通常會包含網頁的 LCP 元素，因此可能會對 LCP 造成重大影響。在這些情況下，最佳化輪轉介面可能會大幅改善 LCP。如需有關 LCP 評估在含有輪轉介面網頁中的運作方式詳細說明，請參閱「輪轉介面 LCP 評估」一節。

  • INP (Interaction to Next Paint)

    輪轉介面對 JavaScript 的要求很少，因此不應影響網頁的回應能力。如果發現網站的輪轉介面含有長時間執行的程式碼，建議您考慮更換輪轉介面工具。

  • CLS (累計版面配置位移)

    令人驚訝的是，許多輪轉介面都使用無法順暢播放的非合成動畫，這可能會導致 CLS 增加。在含有自動播放輪轉介面的網頁中，這可能會導致無限的 CLS。這類 CLS 通常不易察覺，因此很容易被忽略。為避免發生這個問題，請避免在輪轉介面中使用非合成的動畫 (例如在幻燈片轉場期間)。

效能最佳做法

使用 HTML 載入輪轉介面內容

輪轉介面內容應透過網頁的 HTML 標記載入，以便瀏覽器在網頁載入過程的早期發現這些內容。使用 JavaScript 啟動輪轉介面內容的載入作業，可能是使用輪轉介面時，最容易犯下的效能錯誤。這會延遲圖片載入作業，並可能對 LCP 造成負面影響。

正確做法
<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>
錯誤做法
const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

如要進行進階輪轉介面最佳化，建議您先將第一張幻燈片以靜態方式載入，然後逐步強化，納入導覽控制項和其他內容。這項技巧最適合用於使用者能持續專注的環境，因為這樣可讓系統有額外的時間載入內容。在主畫面等使用者可能只停留一兩秒的環境中，只載入單一圖片也許同樣有效。

避免版面配置轉移

幻燈片轉場和導覽控制項是輪轉介面中版面配置位移最常見的兩個來源：

  • 滑動轉場效果：在滑動轉場期間發生的版面配置位移，通常是因為更新 DOM 元素的版面配置誘導屬性。以下列舉部分屬性示例：left、top、width 和 marginTop。為避免版面配置位移，請改用 CSS transform 屬性來轉換這些元素。這個示範說明如何使用 transform 建構基本輪轉介面。

  • 導覽控制項：視 DOM 中新增/移除輪轉介面導覽控制項的方式而定，這可能會導致版面配置位移。輪轉介面通常會在使用者游標時顯示這類行為。

以下是輪轉介面 CLS 評估的常見疑問：

  • 自動播放輪轉介面：幻燈片轉場是輪轉介面相關版面配置位移最常見的來源。在非自動播放的輪轉介面中，這些版面配置移位通常會在使用者互動後的 500 毫秒內發生，因此不會計入累積版面配置移位 (CLS)。不過，對於自動播放輪轉介面而言，這些版面配置轉換不僅可能會計入 CLS，還可能無限重複。因此，驗證自動播放輪轉介面是否為版面配置轉換來源，就顯得格外重要。

  • 捲動：部分輪轉介面可讓使用者透過捲動來瀏覽輪轉介面幻燈片。如果元素的起始位置有所變更，但其捲動偏移量 (即 scrollLeft 或 scrollTop) 的變更量相同 (但方向相反)，則不會視為版面配置偏移，前提是這些變更都發生在同一個影格中。

如要進一步瞭解版面配置偏移，請參閱「偵錯版面配置偏移」。

使用現代化技術

許多網站都會使用第三方 JavaScript 程式庫來實作輪轉介面。如果您目前使用舊版輪轉介面工具，可以改用較新的工具來提升效能。較新的工具通常會使用效率更高的 API，且不太可能需要 jQuery 等額外依附元件。

不過，視您建構的輪轉介面類型而定，您可能根本不需要使用 JavaScript。新的 Scroll Snap API 可讓您只使用 HTML 和 CSS 實作輪轉介面般的轉場效果。

以下提供一些有關使用 scroll-snap 的實用資源：

改善輪轉介面內容

輪播介面通常會包含網站上最大的圖片，因此請務必確保這些圖片已完全最佳化。選擇適當的圖片格式和壓縮等級、使用圖片 CDN，以及使用 srcset 提供多個圖片版本，都是可減少圖片傳輸大小的技術。

成效評估

本節將說明與輪轉介面相關的 LCP 評估。雖然輪轉介面在 LCP 計算期間的處理方式與其他使用者體驗元素相同，但計算自動輪轉介面的 LCP 機制卻經常讓人困惑。

輪轉介面 LCP 評估

以下是瞭解輪轉介面 LCP 計算方式的關鍵要點：

  • LCP 會將繪製至影格的網頁元素納入考量。使用者與網頁互動 (輕觸、捲動或按下按鍵) 後，系統就不會再考慮 LCP 元素的新候選項目。因此，自動播放輪轉介面中的任何投影片都有可能成為最終 LCP 元素，而靜態輪轉介面中只有第一張投影片才有可能成為 LCP 候選元素。
  • 如果系統算繪兩張大小相同的圖片，系統會將第一張圖片視為 LCP 元素。只有在 LCP 候選項目大於目前的 LCP 元素時，系統才會更新 LCP 元素。因此，如果所有輪轉介面元素的大小相同，LCP 元素應是第一個顯示的圖片。
  • 評估 LCP 候選項目時，LCP 會考量「可見大小或內在大小，以較小者為準」。因此，如果自動輪轉介面以一致的大小顯示圖片，但其中包含的圖片具有不同且小於顯示大小的內在大小，則 LCP 元素可能會隨著新幻燈片的顯示而變更。在這種情況下，如果所有圖片都以相同大小顯示，系統會將內在大小最大的圖片視為 LCP 元素。為維持低 LCP，請確保自動播放輪轉介面中的所有項目都具有相同的內在大小。

Chrome 88 中輪轉介面 LCP 計算方式的異動

自 Chrome 88起，日後從 DOM 中移除的圖片會視為可能的最大內容繪製作業。在 Chrome 88 之前，系統不會考慮這些圖片。對於使用自動播放輪轉介面網站，這項定義變更對 LCP 分數的影響將為中性或正面。

這項變更是為了回應觀察結果，許多網站在實作輪轉介面轉場效果時，會從 DOM 樹狀結構中移除先前顯示的圖片。在 Chrome 88 之前，每次顯示新投影片時，移除先前的元素會觸發 LCP 更新。這項異動只會影響自動播放的輪轉介面，因為根據定義，潛在的最大內容繪製作業只能在使用者首次與網頁互動前發生。

Chrome 121 中的閾值異動

Chrome 121 變更了輪轉介面等水平捲動圖片的行為。這些項目現在採用與垂直捲動相同的門檻。也就是說，在輪轉介面用途中，圖片會在可視區域顯示前載入。這表示使用者較不容易察覺圖片載入情形，但代價是下載次數會增加。使用水平延遲載入示範，比較 Chrome 與 Safari 和 Firefox 的行為。

其他注意事項

本節將討論在實作輪轉介面時，應留意的使用者體驗和產品最佳做法。輪轉介面應能協助您達成業務目標，並以易於瀏覽及閱讀的方式呈現內容。

提供醒目的導覽控制項

輪轉介面的導覽控制項應易於點選，且十分醒目。這項功能很少有良好的執行方式，大多數輪轉介面都有小而難以察覺的導覽控制項。請注意，單一顏色或樣式的導覽控制項很少會在所有情況下運作。舉例來說，在深色背景上清晰可見的箭頭，在淺色背景上可能難以辨識。

指示導覽進度

輪轉介面導覽控制項應提供幻燈片總數和使用者瀏覽進度的相關資訊。這項資訊可讓使用者更輕鬆地前往特定投影片，並瞭解哪些內容已被觀看。在某些情況下，提供即將播放的內容預覽畫面 (無論是下一張投影片片段或縮圖清單) 也能帶來幫助，並提高參與度。

支援行動手勢

在行動裝置上，除了傳統的導覽控制項 (例如畫面上的按鈕) 之外，也應支援滑動手勢。

提供其他導覽路徑

由於大多數使用者不太可能會與所有輪轉介面內容互動，因此輪轉介面幻燈片連結的內容應可透過其他導覽路徑存取。

可讀性最佳做法

不要使用自動播放功能

使用自動播放功能會產生兩個幾乎矛盾的問題：螢幕上的動畫容易讓使用者分心，並轉移注意力，讓他們忽略更重要的內容；同時，由於使用者經常將動畫與廣告聯想在一起，因此會忽略自動播放的輪轉介面。

因此，自動播放功能很少是個好選擇。如果內容很重要，不使用自動播放功能就能盡量提高曝光率；如果輪轉介面內容不重要，使用自動播放功能反而會影響更重要的內容。此外，自動輪轉介面不易閱讀，也可能會造成困擾。每個人閱讀的速度不同，因此輪轉介面很少會在「正確」的時間點為不同使用者轉換。

理想情況下，使用者應透過導覽控制項進行滑動瀏覽。如果您必須使用自動播放功能，請在使用者游標懸停時停用自動播放功能。此外，幻燈片轉場速率應考量幻燈片內容：幻燈片包含的文字越多，在畫面上顯示的時間就應越長。

區隔文字和圖片

輪轉介面文字內容通常會「嵌入」對應的圖片檔案，而不是使用 HTML 標記單獨顯示。這種做法會影響無障礙、本地化和壓縮率。這也鼓勵使用一體適用的方法建立素材資源。不過，相同的圖片和文字格式在電腦版和行動版格式中，很少能以同樣的方式呈現。

保持精簡

您只有短短幾秒的時間，才能吸引使用者的目光。簡短且切題的廣告文案，有助於提高傳達訊息的機率。

產品最佳做法

如果無法使用額外的垂直空間來顯示額外內容，輪轉介面就非常實用。產品頁面上的輪轉介面通常是這類用途的絕佳範例。

不過，輪轉介面不一定能發揮實效。

  • 輪轉介面 (尤其是含有促銷活動或自動前進的輪轉介面) 很容易讓使用者誤認為廣告。使用者往往會忽略廣告，這種現象稱為橫幅失明症。
  • 輪轉介面通常用於安撫多個部門，避免做出關於商業優先順序的決定。因此，輪轉介面很容易變成放置無效內容的垃圾場。

測試假設

您應評估及測試輪轉介面的商務成效，尤其是在首頁上顯示的輪轉介面。輪轉介面點擊率有助於判斷輪轉介面及其內容的成效。

切合需求

輪轉介面最適合用於呈現有趣且切合主題的內容，並提供清楚的背景資訊。如果內容在輪轉介面外無法吸引使用者，將其放入輪轉介面並不會改善成效。如果您必須使用輪轉介面，請將內容設為優先順序，並確保每個幻燈片都與使用者相關，讓他們想點選後續幻燈片。