Quá trình chuyển đổi mang đến nhiều lợi ích cho người dùng, trong đó có việc giúp người dùng nắm bắt đúng bối cảnh và giảm cảm giác về độ trễ. Nhà phát triển muốn có khả năng chuyển đổi liền mạch giữa các trang, giúp tăng mức độ tương tác của người dùng với trang web của họ.
Tuy nhiên, việc bật chuyển đổi trạng thái thực sự khó khăn vì việc này đòi hỏi nhà phát triển phải quản lý trạng thái của 2 thành phần khác nhau. Ngay cả những hiệu ứng làm mờ đơn giản cũng liên quan đến việc cả hai trạng thái xuất hiện cùng lúc. Điều đó đặt ra những thách thức về khả năng hữu dụng, chẳng hạn như xử lý hoạt động tương tác bổ sung trên thành phần đi. Đối với người dùng thiết bị hỗ trợ, có một khoảng thời gian mà cả trạng thái trước và sau đều nằm trong DOM cùng một lúc. Ngoài ra, mọi thứ có thể di chuyển xung quanh cây theo cách dễ nhìn, nhưng có thể dễ dàng làm mất vị trí đọc và tiêu điểm.
Ra mắt trong Chrome 111, API Chuyển đổi khung hiển thị cho phép tạo quá trình chuyển đổi suôn sẻ và đơn giản giữa các trang. Tính năng này cho phép bạn thay đổi DOM mà không có bất kỳ sự chồng chéo nào giữa các trạng thái và có hiệu ứng chuyển tiếp giữa các trạng thái bằng cách sử dụng chế độ xem được tổng quan nhanh.
Có thể bạn sẽ thắc mắc rằng tính năng này dễ triển khai đến mức nào? Có những loại trường hợp sử dụng nào? Các nhà phát triển khác sử dụng hiệu ứng chuyển đổi khung hiển thị như thế nào?
Bài viết này sẽ hướng dẫn bạn cách triển khai hoạt động chuyển đổi chế độ xem trên 4 trang web: RedBus (du lịch), CyberAgent (nhà xuất bản tin tức/blog), Nykaa (Thương mại điện tử) và PolicyBazaar (bảo hiểm) cũng như cách các trang web của họ hưởng lợi theo nhiều cách nhờ sử dụng View Transitions API.
redBus
RedBus, một thành viên của tập đoàn MakeMyTrip, là một trang web đặt vé và đặt vé xe buýt có trụ sở tại Bangalore, Ấn Độ và hoạt động ở nhiều khu vực địa lý trên toàn cầu. Đây là một trong những trang web đầu tiên triển khai trải nghiệm bằng View Transitions API.
Tại sao Redbus triển khai quá trình chuyển đổi khung hiển thị?
Đội ngũ tại redBus có niềm tin vững chắc vào việc cung cấp trải nghiệm web thống nhất, giống như ứng dụng, gần với các ứng dụng gốc nhất có thể. Thực tế, họ đã triển khai nhiều giải pháp tuỳ chỉnh trong nhiều năm. Ví dụ: họ triển khai các ảnh động tuỳ chỉnh dựa trên JavaScript và CSS cho các hiệu ứng chuyển đổi trang ngay cả trước khi phát triển View Transitions API (API Chuyển đổi khung hiển thị). Tuy nhiên, điều đó có nghĩa là họ phải xử lý việc quản lý hiệu suất ở các phân đoạn mạng và thiết bị thấp hơn, đôi khi dẫn đến trải nghiệm khác biệt bằng chiến lược tải thích ứng.
RedBus đã sử dụng hiệu ứng chuyển đổi khung hiển thị cho nhiều hành trình của người dùng. Ví dụ: Trong phần tự trợ giúp trên ứng dụng di động, ứng dụng này mở các trang web trong Thẻ của Chrome tuỳ chỉnh và trong phễu đặt vé xe buýt, nơi người dùng chuyển từ trang thông tin kho hàng đến trang thanh toán. Trong trường hợp sau, các chuyển đổi chế độ xem giúp điều hướng trang sang trang mượt mà hơn và dẫn đến tăng tỷ lệ chuyển đổi của họ. Việc này là kết quả của việc cải thiện trải nghiệm người dùng và nhận thấy hiệu suất tốt hơn trong khi các thao tác nặng (chẳng hạn như tìm nạp khoảng không quảng cáo có sẵn mới nhất) được thực thi.
Chi tiết kỹ thuật khi triển khai
RedBus sử dụng React và EJS làm nhóm công nghệ giao diện người dùng, với sự kết hợp giữa SPA và MPA trên nhiều hành trình. Phần trích dẫn mã sau đây cho thấy cách sử dụng hiệu ứng chuyển đổi khung hiển thị:
/* 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();
}
};
Trong CSS sau, slide-to-right, slide-to-left, slide-from-right và slide-from-left là các khung hình chính ảnh động 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;
}
Tác động đối với công việc kinh doanh
RedBus đã chọn triển khai chuyển đổi chế độ xem cùng với các nỗ lực cải thiện INP trên trang web của họ, giúp doanh số bán hàng tăng 7%. Amit Kumar, Giám đốc kỹ thuật cấp cao tại RedBus nói rằng việc chuyển đổi khung hiển thị thực sự tuyệt vời đối với những người thực sự muốn trải nghiệm người dùng tốt hơn và không muốn tốn ít chi phí bảo trì hơn.
Chúng tôi đã tiến hành các phiên phản hồi toàn diện cho người dùng, kết hợp thông tin chi tiết có giá trị từ một nhóm người dùng đa dạng. Nhờ sự hiểu biết sâu sắc về cơ sở người dùng (xe buýt và đường sắt) cũng như nhu cầu của họ, kết hợp với chuyên môn của chúng tôi, chúng tôi tin rằng tính năng này sẽ mang lại giá trị đáng kể ngay từ đầu mà không cần tiến hành thử nghiệm A/B. Hiệu ứng chuyển đổi khung hiển thị là một bước tiến giúp thu hẹp khoảng cách giữa ứng dụng và web, mang lại trải nghiệm di chuyển mượt mà.
Anoop Menon, Giám đốc kỹ thuật của RedBus
CyberAgent
CyberAgent là một công ty công nghệ thông tin có trụ sở tại Nhật Bản, cung cấp nhiều dịch vụ trực tuyến, bao gồm cả blog và xuất bản tin tức.
Tại sao CyberAgent triển khai quá trình chuyển đổi khung hiển thị?
Trước đây, CyberAgent cân nhắc việc sử dụng ảnh động CSS hoặc sử dụng một khung để triển khai hiệu ứng chuyển đổi ảnh động nhằm cải thiện trải nghiệm người dùng. Tuy nhiên, họ lo ngại rằng việc hiển thị DOM và tính duy trì mã có hiệu quả không tốt. Khi Chrome bổ sung tính năng hỗ trợ cho API Chuyển đổi khung hiển thị, họ rất muốn sử dụng API này để tạo các hiệu ứng chuyển đổi trang hấp dẫn đã vượt qua những thách thức này.
CyberAgent đã triển khai quá trình chuyển đổi chế độ xem giữa danh sách blog và trang blog. Ở đây, hãy chú ý cách họ thêm hiệu ứng chuyển đổi phần tử vào hình ảnh chính. Bạn có thể truy cập trang web của họ và trải nghiệm trang web đó ngay hôm nay.
Họ cũng sử dụng các truy vấn nội dung nghe nhìn để thiết kế nhiều trải nghiệm ảnh động cho nhiều thiết bị. Đối với các trang dành cho thiết bị di động, chúng có thêm các hiệu ứng chuyển tiếp phần tử, nhưng đối với máy tính để bàn thì hiệu ứng này có quá nhiều chuyển động.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Chi tiết kỹ thuật khi triển khai
CyberAgent sử dụng Next.js để tạo SPA. Ví dụ về mã sau đây minh hoạ cách các API này sử dụng 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]);
};
Xem thêm một số mã Next.js mẫu.
Xem nội dung chuyển đổi cho MPA bằng công nghệ kết xuất trước
CyberAgent cũng dùng thử API Chuyển đổi khung hiển thị cho nhiều ứng dụng (MPA) (hiện có cờ chrome://flags/#view-transition-on-navigation) trên một dịch vụ mang tên Ameba News (một trang web cổng tin tức).
Hiệu ứng chuyển đổi chế độ xem được sử dụng ở hai vị trí: Thứ nhất là khi thay đổi danh mục tin tức, được hiển thị trong video sau.
Nội dung thứ hai là ở giữa trang tin tức nổi bật, nơi trích dẫn nội dung được hiển thị và khi người dùng nhấp để Xem thêm chi tiết, phần còn lại của bài viết sẽ bị làm mờ.
Điều thú vị là họ chỉ thêm ảnh động vào phần sẽ thay đổi sau khi người dùng nhấp vào nút. Điều chỉnh một chút thiết kế ảnh động này làm cho trang MPA trông giống SPA hơn từ góc nhìn của người dùng, chỉ với nội dung mới tạo ảnh động trong:
Đây là cách họ thực hiện việc này: họ đã chỉ định một view-transition-name khác cho các phần khác nhau trên trang. Ví dụ: họ gán một ảnh động view-transition-name cho phần trên cùng của bài viết, một phần tử khác cho phần dưới cùng và không thêm ảnh động cho phần trên cùng.
::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;
}
Một điều thú vị khác khi CyberAgent sử dụng API chuyển đổi khung hiển thị là liên kết nhanh để dễ dàng triển khai các quy tắc kết xuất trước trên trang chi tiết. Dưới đây là mã mẫu của họ:
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}/`);
});
Bạn có thể đọc thêm về cách triển khai đường liên kết nhanh trong bài viết này.
Lời chứng thực
Kazunari Hara, Trưởng nhóm công nghệ của dịch vụ Ameba tại CyberAgent, cho rằng việc chuyển đổi chế độ xem có thể tác động đáng kể đến hoạt động kinh doanh vì hai lý do.
Trước tiên, chúng hướng dẫn người dùng trên trang. Hiệu ứng chuyển đổi chế độ xem giúp bạn có thể tập trung trực quan vào thông điệp quan trọng nhất và giúp họ tận dụng tối đa trang web. Ngoài ra, chúng để nâng cao và nhấn mạnh thương hiệu bằng ảnh động. CyberAgent có thiết kế ảnh động được chỉ định để quảng bá thương hiệu của mình. Với chuyển đổi chế độ xem, họ có thể triển khai trải nghiệm có thương hiệu này mà không phải mất thêm chi phí duy trì thư viện bên ngoài.
Chuyển đổi khung hiển thị là một trong những API ưa thích của tôi. Khả năng thêm ảnh động dưới dạng một tính năng chuẩn của trình duyệt giúp việc triển khai và duy trì hiệu ứng chuyển đổi khung hiển thị dễ dàng hơn so với các giải pháp khác phụ thuộc vào thư viện. Chúng tôi mong muốn triển khai quá trình chuyển đổi chế độ xem cho nhiều dịch vụ hơn để truyền đạt thương hiệu của chúng tôi.
Kazunari Hara, Giám đốc công nghệ của Ameba
Tiếng Nykaa
Nykaa là nền tảng thương mại điện tử về làm đẹp và thời trang lớn nhất Ấn Độ. Mục tiêu của họ là tạo ra trải nghiệm web dành cho thiết bị di động giống nhất có thể với trải nghiệm trên ứng dụng gốc. Trước đây khi cố gắng triển khai ảnh động chuyển đổi, họ gặp khó khăn khi viết JavaScript tuỳ chỉnh phức tạp. Điều này cũng ảnh hưởng không đáng kể đến hiệu suất trang web của họ.
Tại sao Nykaa triển khai quá trình chuyển đổi khung hiển thị?
Với sự ra đời của các hiệu ứng chuyển đổi khung hiển thị, đội ngũ của Nykaa nhận thấy cơ hội để các hoạt động chuyển đổi này vốn đã có sẵn, đồng nghĩa với việc trải nghiệm người dùng khi chuyển đổi trang có thể được cải thiện đáng kể mà không tốn phí hiệu suất. Nykaa sử dụng rất nhiều hiệu ứng chuyển đổi chế độ xem để chuyển từ trang chi tiết sản phẩm sang trang thông tin sản phẩm.
Chi tiết kỹ thuật khi triển khai
Nykaa sử dụng React và Emotion để xây dựng SPA của mình. Bạn có thể xem thêm mã mẫu về cách sử dụng hiệu ứng chuyển đổi khung hiển thị bằng React tại đây.
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 cho ảnh động ngăn bên:
::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};
}
Lời chứng thực
Sunit Jindal, trưởng bộ phận ứng dụng tại Nykaa, cho biết lợi ích lớn nhất của việc chuyển đổi chế độ xem là "Nhận thức về tốc độ". Nykaa sử dụng hiệu ứng ánh sáng lung linh để chờ nội dung tải từ phần phụ trợ, nhưng nhận thấy rằng hiệu ứng ánh sáng lung linh không cho người dùng biết thời gian mà họ cần chờ nội dung tải. Với chuyển đổi khung hiển thị, bản thân quá trình chuyển đổi đã mang lại cho người dùng cảm giác rằng "điều gì đó sắp xảy ra", giúp việc chờ đợi bớt đau đớn hơn.
Nykaa rất hào hứng với trải nghiệm người dùng mới được cải tiến trên trang web của họ với hiệu ứng chuyển đổi chế độ xem và cũng đã sẵn sàng triển khai hiệu ứng chuyển đổi chế độ xem trên các trang khác. Sau đây là nội dung của Phó chủ tịch phụ trách thiết kế:
Chúng tôi cam kết triển khai chuyển đổi khung hiển thị trong tất cả các tính năng sắp tới khi thích hợp. Chúng tôi đã xác định được một số khía cạnh và nhóm đang tích cực đầu tư vào các khía cạnh đó.
Krishna R V, Phó chủ tịch bộ phận Thiết kế
PolicyBazaar
PolicyBazaar có trụ sở chính tại Gurgaon, là công ty công nghệ tài chính đa quốc gia và trang web tổng hợp thông tin bảo hiểm lớn nhất Ấn Độ.
Tại sao PolicyBazaar triển khai quá trình chuyển đổi chế độ xem?
Là một công ty ưu tiên nền tảng web, nhóm PolicyBazaar luôn hướng đến việc cung cấp trải nghiệm tốt nhất có thể cho người dùng trên toàn bộ hành trình trọng yếu của người dùng. Thông thường, bạn nên triển khai các lượt chuyển đổi tuỳ chỉnh bằng JavaScript và CSS ngay cả trước khi ra mắt API View Transitions, vì chúng giúp nâng cao trải nghiệm người dùng, tạo ra luồng điều hướng liền mạch và tăng sức hút tổng thể về mặt hình ảnh cho trang web của họ.
Tuy nhiên, những phương pháp triển khai tuỳ chỉnh này đi kèm với chi phí là sự chậm trễ dựa trên hiệu suất, sự phức tạp trong việc bảo trì mã và khả năng tương thích dưới mức tối ưu với các khung được sử dụng. View Transitions API (API Chuyển đổi khung hiển thị) đã giúp họ vượt qua hầu hết những thách thức này bằng cách cung cấp một giao diện dễ sử dụng cùng với những lợi ích về hiệu suất nguyên gốc.
PolicyBazaar đã sử dụng hiệu ứng chuyển đổi khung hiển thị giữa các thành phần trong hành trình trước khi báo giá của họ để giúp người mua tiềm năng cung cấp thông tin chi tiết cần thiết cho việc mua hợp đồng bảo hiểm.
Chi tiết kỹ thuật khi triển khai
Họ sử dụng phương pháp khung kết hợp, trong đó Angular và React chiếm ưu thế hầu hết cơ sở mã của họ. Dưới đây là phần trích dẫn VT từ mã của họ được viết bằng Angular và được chia sẻ bởi Aman Soni (Nhà phát triển Lead Frontend của PolicyBazaar):
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');
}
Lời chứng thực
Rishabh Mehrotra, Trưởng bộ phận Thiết kế (Life BU) cho biết rằng việc chuyển đổi chế độ xem đóng vai trò quan trọng trong việc cải thiện trải nghiệm trang web cho người dùng bằng cách cải thiện khả năng hữu dụng, mức độ tương tác và mức độ hài lòng tổng thể. Ứng dụng này đã giúp mang lại trải nghiệm di chuyển mượt mà, tương tác có hướng dẫn, giảm tải nhận thức, tính thẩm mỹ hiện đại và nhiều lợi ích khác.
Việc nâng cao trải nghiệm trên web là một mục tiêu tối quan trọng đối với PB, và VT đã được chứng minh là một công cụ thiết yếu giúp đạt được mục tiêu này với sự liền mạch đáng kể. Sức hút rộng rãi của ứng dụng này đối với cả cộng đồng nhà phát triển và cơ sở người dùng đã khiến đội ngũ của chúng tôi cảm thấy hào hứng. Khi xem xét việc tích hợp giải pháp này trên các POD đa dạng, chúng tôi dự đoán rằng giải pháp này sẽ tạo ra tác động tích cực sâu rộng đối với mức độ hài lòng và hoạt động vận hành hiệu quả.
Saurabh Tiwari (Giám đốc kỹ thuật, PolicyBazaar)
Các bước tiếp theo
Bạn có muốn thử chuyển đổi khung hiển thị không? Sau đây là một số tài liệu mà bạn có thể theo dõi để tìm hiểu thêm: