透過檢視畫面轉場效果，可能有流暢的導覽體驗

Yuriko Hirota
Yuriko Hirota
Saurabh Rajpal
Saurabh Rajpal
X

轉場效果可為使用者帶來許多好處，包括可讓內容依靠背景資訊，以及減少觀眾感受到的延遲體驗。開發人員希望能在頁面之間流暢切換，提高使用者與網站的互動程度。

然而，由於需要開發人員管理兩個不同元素的狀態，因此啟用狀態轉換並不容易。即使是簡單的交叉淡出，也需要同時呈現兩個狀態。這會造成可用性上的挑戰，例如在處理傳出元素上的額外互動時。輔助裝置的使用者會有一段期間，狀態的前後狀態都位於 DOM。此外，有些東西在樹狀結構周圍的移動方式可以清晰可見，但很容易造成閱讀位置和焦點資訊遺失。

我們在 Chrome 111 中推出 View Transitions API，可讓您建立順暢而簡單的頁面轉場效果。這可以讓您在狀態之間不重疊的情況下變更 DOM，並使用快照檢視在狀態之間建立轉換動畫。

您可能會好奇，實作難易度如何？有哪些用途？其他開發人員如何使用觀看轉換功能？

本文將說明如何在 4 個不同網站上導入檢視轉換效果：RedBus (旅遊)、CyberAgent (新聞/網誌發布者)、Nykaa (電子商務) 和 PolicyBazaar (保險)，以及使用 View Transitions API 對網站帶來哪些好處。

redBus

redBus 隸屬於 MakeMyTrip 集團，這間公司總部位於印度班加羅爾，營運範圍遍及全球。也是率先使用 View Transitions API 導入體驗的網站之一。

為何 Redbus 導入觀看轉換效果？

RedBus 團隊致力提供類似應用程式的整合式網頁體驗，盡可能讓使用者靠近原生應用程式。事實上，他們多年來也導入多種自訂解決方案。舉例來說，他們推出網頁轉換時的自訂 JavaScript 和 CSS 動畫，甚至在 View Transitions API 開發前就推出。但這意味著他們必須處理低網路區段和裝置的效能管理，而在實施自動調整載入策略後，有時可能會產生差異化的體驗。

redBus 針對多個使用者歷程使用觀看轉場效果。舉例來說，在行動應用程式的自助式部分 (在自訂 Chrome 分頁開啟網頁)，以及公車票券預訂程序，使用者會從商品目錄資訊頁面前往付款頁面。如果是後者的情況，使用者能更順暢地瀏覽網頁，轉換率因此提高。如此一來，在執行繁雜的作業 (例如擷取最新的可用廣告空間) 期間，使用者體驗就會獲得更佳的體驗，並獲得良好成效。

實作的技術細節

redBus 使用 React 和 EJS 做為前端技術堆疊，並在不同流程中將 SPA 和 MPA 結合使用。以下程式碼片段說明檢視畫面轉換的使用方式：

/* Forward Transition */
export const goToURL = ( url: string , reactHistory: any ): void => {
  if(document.startViewTransition) {
    let viewTransition = document.startViewTransition();
    viewTransition.ready.finally(() => {
      reactHistory ? reactHistory.push(url) : (window.location.href = url);
    })
  } else {
    reactHistory ? reactHistory.push(url) : (window.location.href = url);
  }
};

/* Back Transition */
export const goBack = ( reactHistory: any ): void => {
  if(document.startViewTransition) {
    document.documentElement.classList.add('back-transition');
    let viewTransition = document.startViewTransition();
    viewTransition.ready.finally(() => {
      reactHistory ? reactHistory.goBack() : history.back();
    })
    viewTransition.finished.finally(() => {
      document.documentElement.classList.remove('back-transition');
    })
  } else {
    reactHistory ? reactHistory.goBack() : history.back();
  }
};

在下列 CSS 中，slide-to-right、slide-to-left、slide-from-right 和 slide-from-left 是 CSS 動畫主要畫面格。

::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
  animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
.back-transition::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
.back-transition::view-transition-new(root) {
  animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}

業務影響

redBus 選擇在各網站導入檢視轉換方法，同時推動 INP 改善措施，使銷售量提升 7%。redBus 的資深工程經理 Amit Kumar 表示，如果真正想要改善使用者體驗並減少維護負擔，就能大幅改善檢視轉換效果。

我們進行了全面的使用者意見回饋講座，並採納各類型使用者的珍貴洞察資訊。我們深知使用者族群 (公車和鐵路) 及其需求，再加上自身的專業能力，因此認為這項功能從一開始就可創造卓越價值，不必進行 A/B 測試。觀看轉場效果有助於消除應用程式和網站之間的落差，提供流暢的瀏覽體驗。

redBus 技術長 Anoop Menon

CyberAgent

CyberAgent 是位於日本的 IT 公司，提供網誌和新聞發布等多種線上服務。

CyberAgent 為何要導入檢視區塊轉換？

CyberAgent 曾考慮使用 CSS 動畫或利用架構實作動畫轉場效果，改善使用者體驗，但他們擔心轉譯 DOM 和程式碼可維護性會不理想。Chrome 開始支援 View Transitions API 後，他們很開心能運用這個 API 製作引人入勝的頁面轉換，藉此克服上述挑戰。

CyberAgent 導入網誌清單與網誌頁面之間的檢視轉換。以下說明他們如何將元素轉換到主頁橫幅。你現在可以造訪他們的網站，體驗 Bard 的魅力。

他們還使用媒體查詢，為不同裝置設計不同的動畫體驗。在行動版網頁上，他們還加入了元素轉換功能，但在電腦上有人移動太多。

@media screen and (min-width: 769px) {
  .main-visual {
    view-transition-name: none !important;
  }
}

實作的技術細節

CyberAgent 使用 Next.js 建構 SPA。以下程式碼範例示範他們如何使用 View Transition API。

export const usePageTransition = () => {
  const router = useRouter();
  const defferedRef = useRef<Deferred | null>(null);

  useEffect(() => {
    const handleRouteChangeComplete = () => {
      defferedRef.current?.resolve();
    };

    const handleRouteChangeStart = (url: string) => {
      if (!("startViewTransition" in document)) return;
      if (router.asPath === url) return;

      const deffered = new Deferred();
      defferedRef.current = deffered;
      (document as Document).startViewTransition(async () => {
        await deffered.promise;
      });
    };

    router.events.on("routeChangeStart", handleRouteChangeStart);
    router.events.on("routeChangeComplete", handleRouteChangeComplete);

    return () => {
      router.events.off("routeChangeStart", handleRouteChangeStart);
      router.events.off("routeChangeComplete", handleRouteChangeComplete);
    };
  }, [router.asPath]);
};

查看更多 Next.js 程式碼範例。

使用預先算繪技術的 MPA 轉換畫面

CyberAgent 也在新聞入口網站網站 Ameba News 服務試用 View Transitions API for Multiple Page Apps (MPA) (目前位於標記 chrome://flags/#view-transition-on-navigation 下)。

觀看轉場效果在兩個地方使用：第一種是變更新聞類別時，請看以下影片。

第二個是新聞焦點頁面，其中顯示內容摘錄，而當使用者點選 [查看更多詳細資訊] 時，文章的其餘部分會淡入。

有趣的點是，他們只會為點選按鈕後變動的部分加入動畫。只要稍微調整動畫設計，就能讓 MPA 網頁從使用者視角看起來更像 SPA 中心，而且只有新內容會在以下位置顯示：

這些事件的運作方式如下：他們將不同的 view-transition-name 指派給網頁的不同部分。例如，他們將 view-transition-name 指派至文章頂端，另一個在底部部分，且在頂端部分沒有新增任何動畫。

::view-transition-old(root) {
  animation:
    var(--animation-disappear-duration) var(--animation-disappear-easing) both fade-out;
  }

::view-transition-new(root) {
  animation:
    var(--animation-appear-in-duration) var(--animation-appear-in-easing) both fade-in;
}

這張圖表顯示頁面頂部如何與底部部分進行動畫轉換。

CyberAgent 使用 View 轉換 API 的另一個有趣之處，是利用快速連結在詳細資料頁面上輕鬆導入預先算繪規則。程式碼範例如下：

import { prerender } from ‘https://.../quicklink.mjs’;

window.addEventListener('load', () => {
  const match = location.pathname.match(/\\/(.+)\\/hl\\/([0-9a-z-_]+)/);
  if (!match) return;
    const [_, dirname, entryId] = match;
    prerender(`/${dirname}/${entryId}/`);
  });

如要進一步瞭解導入的快速連結導入方式，請參閱這篇文章。

使用見證

CyberAgent 的 Ameba 服務技術主管 Kazunari Hara 表示，這種觀察轉換可能對企業有重大影響，原因有二。

首先是引導使用者瀏覽網頁。透過查看轉場效果，使用者能將焦點放在最重要的訊息上，並充分發揮網頁內容的功用。還能透過動畫強化及強調品牌。CyberAgent 以指定動畫設計來傳達品牌形象。有了檢視畫面轉換功能，他們不必維護外部程式庫，就能導入這項品牌體驗。

「View Transitions」是我最喜歡的其中一項 API。藉由新增動畫做為標準瀏覽器功能，相較於其他依附程式庫的解決方案，檢視畫面轉場效果可更輕鬆實作及維護。我們期待能將資料檢視轉換機制導入更多服務，以傳達我們的品牌形象。

Ameba 技術長 Kazunari Hara

Nykaa

Nykaa 是印度最大的時尚與美容電子商務平台，他們的目標是提供盡可能貼近原生應用程式體驗的行動版網站體驗。先前嘗試實作轉換動畫時，無法撰寫複雜的自訂 JavaScript。也因此對網站的成效有小幅影響。

Nykaa 為何導入檢視區塊轉場效果？

視角轉換出現後，Nykaa 的團隊發現這是原生可進行的轉換，因此即使不犧牲效能，也可以大幅改善頁面轉換的使用者體驗。Nykaa 大量使用瀏覽轉場效果，從產品詳細資料頁面轉換至產品資訊頁面。

實作的技術細節

Nykaa 使用 React 和Emotion 打造了自家的 SPA 系統。如要進一步瞭解如何透過 React 使用 View Transitions，請參閱其他程式碼範例。

if (document.startViewTransition) {
      document.startViewTransition(() => {
        history.push(productUrl);
      });
    } else {
      history.push(productUrl);
   }

const fadeIn = keyframes`
  from { opacity: 0; }
`;

const fadeOut = keyframes`
  to { opacity: 0; }
`;

const slideFromRight = keyframes`
  from { transform: translateX(300px); }
`;

const slideToLeft = keyframes`
  to { transform: translateX(-300px); }
`;

const slideToRight = keyframes`
  to { transform: translateX(300px); }
`;

const slideFromLeft = keyframes`
  from { transform: translateX(-300px); }
`

側邊導覽匣動畫的 CSS：

::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both ${fadeOut},
  1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideToLeft};
}

::view-transition-new(root) {
  animation: 400ms cubic-bezier(0, 0, 0.2, 1) 300ms both ${fadeIn},
  1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideFromRight};
}

.back-transition {
  display: inherit;
}

.back-transition::view-transition-old(root) {
  animation-name: fade-out, ${slideToRight};
}

.back-transition::view-transition-new(root) {
  animation-name: fade-in, ${slideFromLeft};
}

使用見證

Nykaa 應用程式部門主管 Sunit Jindal 表示，瀏覽轉換的最大優點在於「速度感知」Nykaa 使用閃亮效果等候內容從後端載入，但發現顯示閃光效果，並未讓使用者知道他們要花多久時間等待內容載入。 透過轉場效果，轉換本身可以讓使用者感受到「即將發生的情況」，所以不用再費心等待。

Nykaa 很開心能使用新的瀏覽轉換功能提升網頁使用者體驗，並準備在更多頁面上導入檢視轉場效果。下列是他們的設計部門副總裁表示：

我們強烈建議你盡可能在即將推出的所有功能中，導入檢視區塊轉場效果。我們已發現部分領域，且團隊正積極投入其中。

設計部門副總裁 Krishna R V

PolicyBazaar

PolicyBazaar 總部位於古爾岡，是印度最大的保險集結網站和跨國金融科技公司。

為何 PolicyBazaar 導入檢視區塊轉換？

PolicyBazaar 團隊是網路優先公司，不斷致力在關鍵使用者歷程中提供最佳使用者體驗。常見的做法是在 View Transitions API 推出前，使用 JavaScript 和 CSS 導入自訂轉場效果，因為這麼做能改善使用者體驗、建立順暢的導覽流程，並改善網站整體的視覺吸引力。

不過，這些自訂實作項目不時會產生因效能延遲、程式碼維護的複雜問題，而且與所用架構的相容性不盡理想。View Transitions API 提供了易於使用的介面，並內建效能優勢，協助他們克服大部分的挑戰。

PolicyBazaar 在引述前，透過不同元素呈現轉換效果，讓潛在買家很期待提供購買保單所需的詳細資訊。

實作的技術細節

他們採用混合架構做法，搭配 Angular 和 React 主導大部分的程式碼集。以下是 VT 程式碼摘錄內容，由 Aman Soni (PolicyBazaar 主要前端開發人員) 以 Angular 編寫，並由 Aman Soni 分享：

toggleWidgetAnimation() {
    let doc:any = document;

    if (!doc.startViewTransition) {
      this.toggleWidget();
      return;
    }

    doc.startViewTransition(() => this.toggleWidget());
  }

  toggleWidget() {
    let badgeEle = document.querySelector('.animate_init_state_one');
    let textEle = document.querySelector('.animate_init_state_two');

    badgeEle.classList.toggle('hide');
    textEle.classList.toggle('hide');
  }

使用見證

他的設計 (Life BU) 部門主管 Rishabh Mehrotra 表示，瀏覽轉換有助提升可用性、參與度和整體滿意度，在改善使用者網站體驗時扮演舉足輕重的角色。這項產品提供流暢的導覽體驗、引導式互動、減少認知負荷、現代美學等等。

提升網站體驗是 PB 的首要目標，而 VT 經證實是實現這個目標的重要工具，能夠實現這一點，並達成出色的順暢度。無論是開發人員社群或使用者族群，正因為如此，我們團隊的熱情都深深打動我們的團隊。在我們努力整合各種 POD 之後，我們預計會對滿意度和營運表現帶來極大的正面影響。

Saurabh Tiwari (PolicyBazaar 技術長)

後續步驟

您是否有興趣試用觀看轉場效果？歡迎參考以下資源，進一步瞭解相關資訊：