[Building A Super App] Navigation Bar 2.0 - Ưu Điểm Cải Tiến Và Cập Nhật Cần Có Từ Developer

Trước ngày 31/12/2022, vui lòng thực hiện hướng dẫn dưới đây để cập nhật Navigation Bar từ 1.0 lên 2.0

Vì sao có Navigation bar 2.0?

Thuật ngữ

Navigation Bar: là thanh điều hướng, hay được gọi là thanh tiêu đề, thường được đặt ở trên cùng 1 trang/màn hình của website/ứng dụng, giúp điều hướng người dùng truy cập các trang thông tin dễ dàng hơn

Ngữ cảnh

Khác với người láng giềng Trung Quốc, Mini App vẫn còn là một khái niệm rất mới đối với người dùng Việt Nam. Cụ thể là khi trông thấy App Menu với biểu tượng ( … | X ) ở Navigation Bar 1.0, người dùng Tiki không biết họ đang mở một Tini App. Việc nhấn vào nút ( X ) để trở lại màn hình ban đầu trên Tiki đối với họ là một trải nghiệm khá kì lạ và khó hiểu.

Để không mang lại thứ gì đó quá mới mẻ và bất thống nhất. Sau một quá trình tìm hiểu, học hỏi, và cải tiến, Navigation Bar 2.0 ra đời giúp trải nghiệm điều hướng của người dùng được nhất quán trên toàn bộ nền tảng Tiki, cùng một số ưu điểm cho việc phát triển tiện ích cho các developer.

Các thành phần của Navigation bar 2.0

Lợi ích và thay đổi của đổi navigation bar 2.0

Đối với người dùng, Navigation Bar 2.0 có một số ưu điểm như sau:

  • Không cần học thêm cách sử dụng điều hướng mới
  • Có trải nghiệm xuyên suốt trên Tini App, trong Tiki, hoặc trên những ứng dụng đối tác sau này.

Đối với nhà phát triển ứng dụng, Navigation Bar 2.0 hỗ trợ:

1/ Tuỳ chỉnh hiển thị title và thumbnail image để nâng cao giá trị branding hoặc cá nhân hóa trải nghiệm khách hàng theo mong muốn, với các loại hình ảnh: avatar, app icon, custom image.

2/ Gắn thanh tìm kiếm trên tiêu đề để đẩy ưu tiên trải nghiệm tìm kiếm của người dùng. Thanh tìm kiếm thực chất là một button có thể thay đổi về hình dạng (rounded, pill), hoặc chỉnh placeholder text để phù hợp với mục tiêu của nhà phát triển.

3/ Biểu tượng “Lưu tiện ích về điện thoại” được thiết lập mặc định với tất cả Tini App ngay trên navigation bar để khuyến khích người dùng lưu và truy cập tiện ích nhanh từ màn hình home của điện thoại.

4/ Từng screen type có nút điều hướng (navigation action) đặc thù nhưng quen thuộc:

a. Home screen: Là màn hình chính chứa entry point đến hầu hết tính năng của 1 Tini App. Màn hình này chứa button Close
b. Child screen: Là màn hình của Tini App có entry point trực tiếp hoặc không trực tiếp từ Home Screen. Tất cả Child screen có thể quay về Home screen. Màn hình chứa button Back
c. Specific location: Là màn hình cụ thể của Tini App mà người dùng mở ra từ 1 universal link. Màn hình này sẽ có “Home” navigation action giúp người dùng trở về Home screen của Tini App

Các sửa đổi cần làm để cập nhật Navigation Bar từ 1.0 lên 2.0?

Để tránh việc ra mắt Navigation bar 2.0 gây ảnh hưởng đến trải nghiệm của tiện ích. Developer vui lòng làm theo hướng dẫn bên dưới:

Đối với các tiện ích vẫn sử dụng navigation bar mặc định:

Nhà phát triển không cần làm gì thêm. Khi phiên bản Navigation bar 2.0 được ra mắt, tiện ích sẽ tự thay đổi theo cập nhật mới.

Đối với các tiện ích đang sử dụng transparent navigation bar:

Nhà phát triển phải làm thêm một số bước để tiện ích không bị ảnh hưởng bởi thay đổi sắp tới: Sử dụng biến --tf-header-padding-left và --tf-header-padding-right (Chi tiết tài liệu) do Tini cung cấp để tự động cập nhật padding thích ứng với Navigation Bar 2.0. Bao gồm:

a. Tự động cập nhật left padding với biến --tf-header-padding-left: Cho việc hiển thị navigation action

b. Tự động cập nhật right padding với biến --tf-header-padding-right: Cho từng trường hợp ứng với số lượng additional actions:

Theo đó, bạn có thể xem trước sự thay đổi và ảnh hưởng của Navigation Bar 2.0 trên Tini Studio (từ version 1.37.1) bằng việc nhấn bật/tắt Navigation Bar V2 và xem hiển thị tương ứng trên simulator.

Hình minh họa: Bật navigation bar v2

Hình minh họa: Sau khi bật navigation bar 2.0, UI sẽ hiển thị tương ứng

Ngoài ra, do ảnh hưởng từ navigation button và các extra action, sẽ có trường hợp navigation bar không đủ không gian chứa các component quý đối tác mong muốn. Chúng tôi đề xuất developer phân tách nội dung đó thành section riêng dưới navigation bar.

Lưu ý:

  • Để kiểm tra xem các components trên navigation bar 2.0 có tương thích với Tiki version cũ hơn, vui lòng sử dụng API my.canIUse - Chi tiết tài liệu
  • Do cập nhật sẽ thay đổi trên toàn bộ ứng dụng, vui lòng kiểm tra sự ảnh hưởng của các màn hình bên trong đề phòng trường hợp trải nghiệm người dùng bị gián đoạn không mong muốn
  • Tới ngày 31/12/2022, Tini App sẽ chính thức đồng bộ Navigation Bar 2.0 trên toàn bộ nền tảng. Vui lòng cập nhật và sửa đổi để đảm bảo đồng bộ trải nghiệm tiện ích của quý đối tác.
  • Khả dụng: Từ runtime version 1.106.18 trở lên

Các bài viết khác về Tini App:

4 Likes