轉場效果可為使用者帶來許多好處,包括可讓內容依靠背景資訊,以及減少觀眾感受到的延遲體驗。開發人員希望能在頁面之間流暢切換,提高使用者與網站的互動程度。
然而,由於需要開發人員管理兩個不同元素的狀態,因此啟用狀態轉換並不容易。即使是簡單的交叉淡出,也需要同時呈現兩個狀態。這會造成可用性上的挑戰,例如在處理傳出元素上的額外互動時。輔助裝置的使用者會有一段期間,狀態的前後狀態都位於 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 技術長)
後續步驟
您是否有興趣試用觀看轉場效果?歡迎參考以下資源,進一步瞭解相關資訊: