輪轉介面的最佳做法

改善輪轉介面的效能和可用性。

Katie Hempenius
Katie Hempenius
X

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

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

顯示輪轉介面的圖片

效能

妥善實作的輪轉介面應該幾乎不會影響效能。不過，輪轉介面通常包含大型媒體素材資源。無論素材資源顯示在輪轉介面還是其他地方，大型素材資源都可能會影響效能。

  • LCP (最大內容繪製)

    不需捲動位置的大型輪轉介面通常包含網頁的 LCP 元素，因此對 LCP 可能產生重大影響。在這些情況下，最佳化輪轉介面可能會大幅改善 LCP。如要深入瞭解 LCP 評估在包含輪轉介面的網頁中如何運作，請參閱「輪轉介面的 LCP 評估」一節。

  • INP (與下一個顯示的內容互動)

    輪轉介面有最少 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 標記單獨顯示。此方法對於無障礙、本地化和壓縮率而言不利。這種做法也鼓勵建立素材資源時，採取一體適用的做法。不過，在電腦和行動裝置格式中，相同的圖片和文字格式在讀取頻率幾乎不相同。

簡單扼要

您只差一秒就能吸引使用者的注意。簡短扼要的文案將增加訊息獲得的機會。

產品最佳做法

輪轉介面在適合使用額外垂直空間顯示額外內容的情況下的最佳使用。產品頁面上的輪轉介面通常就是一個很好的範例。

不過，輪轉介面不一定有效使用。

  • 輪轉介面很容易就廣告遭到誤解，特別是內含促銷或預支的輪轉介面。使用者往往會忽略廣告，這種情況稱為對橫幅廣告失明的現象。
  • 輪轉介面通常用於連接多個部門，避免對業務優先事項做出決策。因此，輪轉介面很容易就能變成傾印場地，處理無效內容。

測試您的假設

您應該評估及測試輪轉介面 (尤其是首頁中的輪轉介面) 對業務的影響。您可以參考輪轉介面點閱率，判斷輪轉介面及其內容是否有效。

切合需求

輪轉介面如果內容有趣又切合需求，而且能清楚顯示背景資訊，就能發揮最佳成效。如果內容不會使用者與輪轉介面外的使用者互動，在輪轉介面中放置內容並不會提升效益。如果一定要使用輪轉介面，請優先顯示內容，並確保每張投影片都高度相關，讓使用者能點按至後續投影片。