Ngăn điều hướng

Ngăn điều hướng là thành phần thiết yếu trong bất kỳ ứng dụng truyền hình nào vì ngăn điều hướng cho phép người dùng truy cập vào nhiều đích đến và tính năng. Ngăn điều hướng là khung chính trong cấu trúc thông tin của ứng dụng, cung cấp một cách rõ ràng và trực quan để di chuyển qua ứng dụng.

Khác với ngăn điều hướng trên thiết bị di động, ngăn điều hướng trên TV có cả trạng thái mở rộng và trạng thái thu gọn mà người dùng nhìn thấy.

Tài nguyên

Tiêu điểm

• Đích đến được sắp xếp theo tầm quan trọng của người dùng, trong đó đích đến thường xuyên được xếp đầu tiên và đích đến có liên quan được nhóm lại với nhau.
• Bắt buộc phải có dải điều hướng cho cả ngăn điều hướng chuẩn và ngăn điều hướng phương thức khi được thu gọn.

Biến thể

Có hai loại kiểu ngăn điều hướng:

1. Ngăn điều hướng chuẩn – Mở rộng để tạo thêm không gian cho thao tác, đẩy nội dung trang sang một bên.
2. Ngăn điều hướng của mô-đun – Xuất hiện dưới dạng một lớp phủ ở đầu nội dung của ứng dụng với một màn hình giúp cải thiện khả năng đọc khi ngăn được mở rộng.

Ngăn điều hướng tiêu chuẩn

Phân tích

1. Phần trên cùng: Có biểu trưng của ứng dụng. Có vai trò như một nút để chuyển đổi các hồ sơ hoặc kích hoạt hành động tìm kiếm. Ở trạng thái thu gọn, chỉ biểu tượng vẫn hiển thị trong vùng chứa trên cùng.
2. Mục điều hướng: Mỗi mục trong dải điều hướng có một tổ hợp biểu tượng và văn bản, chỉ có biểu tượng hiển thị ở trạng thái thu gọn.
3. Dải điều hướng: Dải điều hướng là một cột hiển thị 3 đến 7 đích đến của ứng dụng, đóng vai trò là trình đơn chính. Mỗi đích đến có một nhãn văn bản và một biểu tượng không bắt buộc, với tuỳ chọn nhóm các mục trong trình đơn để cải thiện ngữ cảnh.
4. Phần dưới cùng: Có thể có 1 đến 3 nút hành động, lý tưởng cho các trang như cài đặt, trợ giúp hoặc hồ sơ.

Hành vi

• Mở rộng ngăn điều hướng: Khi mở rộng, các ngăn điều hướng tiêu chuẩn sẽ đẩy nội dung trang tạo ra không gian cho phiên bản mở rộng để điều hướng.
• Cập nhật thành phần điều hướng: Di chuyển từ mục điều hướng này sang mục khác, trang sẽ tự động cập nhật thành đích đến mới.

Ngăn điều hướng mô-đun

Phân tích

1. Phần trên cùng: Có biểu trưng của ứng dụng. Có vai trò như một nút để chuyển đổi hồ sơ hoặc kích hoạt một hành động tìm kiếm. Ở trạng thái thu gọn, chỉ có biểu tượng hiển thị trong vùng chứa trên cùng.
2. Mục điều hướng: Mỗi mục trong dải điều hướng có một tổ hợp biểu tượng và văn bản, chỉ có biểu tượng hiển thị ở trạng thái thu gọn.
3. Dải điều hướng: Cột hiển thị 3 đến 7 đích đến của ứng dụng, đóng vai trò là trình đơn chính. Mỗi đích đến có một nhãn văn bản và một biểu tượng không bắt buộc, với tuỳ chọn nhóm các mục trong trình đơn để cải thiện ngữ cảnh.
4. Scrim: Để văn bản của mục điều hướng dễ đọc hơn.
5. Phần dưới cùng: Có thể có 1 đến 3 nút hành động, lý tưởng cho các trang như cài đặt, trợ giúp hoặc hồ sơ.

Hành vi

• Mở rộng ngăn: Xuất hiện dưới dạng một lớp phủ ở đầu nội dung ứng dụng, với một màn hình giúp cải thiện khả năng đọc khi ngăn được mở rộng.
• Cập nhật điều hướng: Xảy ra khi người dùng chọn một mục điều hướng.

Đen

Đối với ngăn điều hướng mẫu, một màn sau ngăn sẽ đảm bảo nội dung của ngăn có thể đọc được. Bạn có thể sử dụng bề mặt chuyển màu (gradient) hoặc bề mặt đồng nhất phía sau ngăn điều hướng để tạo các biến thể khác nhau cho giao diện người dùng.

Tấm nền chuyển màu

Màn chắn liền

Thông số kỹ thuật

Cách sử dụng

Chỉ báo đang hoạt động

Chỉ báo đang hoạt động là chỉ báo bằng hình ảnh làm nổi bật đích đến của ngăn điều hướng đang hiển thị. Chỉ báo này thường được biểu thị bằng hình nền khác biệt về mặt trực quan với các mục khác trong ngăn. Chỉ báo đang hoạt động giúp người dùng biết họ đang ở đâu trong ứng dụng và họ đang duyệt qua đích đến nào. Đảm bảo chỉ báo đang hoạt động hiển thị rõ ràng và dễ phân biệt hơn với các mục khác trong ngăn điều hướng.

Dải phân cách (không bắt buộc)

Bạn có thể dùng đường phân chia để tách các nhóm điểm đến trong ngăn điều hướng để sắp xếp hiệu quả hơn. Tuy nhiên, bạn cần phải hạn chế sử dụng vì quá nhiều dải phân cách có thể tạo ra hiện tượng nhiễu hình ảnh và khiến người dùng bị quá tải về nhận thức một cách không cần thiết.

Huy hiệu

Huy hiệu là chỉ dẫn bằng hình ảnh có thể được thêm vào các mục điều hướng để cung cấp thêm thông tin. Ví dụ: bạn có thể sử dụng huy hiệu để cho biết số lượng phim mới có trong ứng dụng phát trực tuyến. Hãy sử dụng huy hiệu một cách thận trọng và chỉ khi cần thiết, vì chúng có thể khiến giao diện người dùng trông bận rộn và lộn xộn. Khi sử dụng huy hiệu, hãy đảm bảo rằng huy hiệu rõ ràng và dễ hiểu hơn, đồng thời không ảnh hưởng đến khả năng người dùng thao tác trong ứng dụng.

Đã mở rộng huy hiệu

Đã thu gọn huy hiệu

Nhãn

Nhãn trong ngăn điều hướng phải rõ ràng và súc tích để dễ đọc hơn.

warning

Thận trọng

Nếu không thể tránh việc sử dụng các nhãn dài, hãy cắt bớt nhãn bằng cách sử dụng dấu ba chấm.

cancel

Không nên

Tránh sử dụng các nhãn văn bản dài cần phải xuống dòng.

cancel

Không nên

Tránh tạo một ngăn điều hướng không có biểu tượng vì điều này có thể khiến người dùng khó thao tác trong ứng dụng.

cancel

Không nên

Tránh kết hợp các mục điều hướng có biểu tượng với các mục điều hướng không phải biểu tượng, vì điều này có thể khiến người dùng nhầm lẫn khi điều hướng.

Ngăn điều hướng là các thành phần cơ bản thể hiện hệ phân cấp của ứng dụng và chỉ nên dùng để liệt kê 5 đến 6 đích đến điều hướng chính.

check_circle

Nên

Giới hạn số lượng đích đến điều hướng chính trong ngăn điều hướng từ 5 đến 6 để mang lại trải nghiệm người dùng tốt hơn.

cancel

Không nên

Tránh thêm quá nhiều mục điều hướng vì có thể tạo thao tác cuộn theo chiều dọc và khiến người dùng khó thao tác trong ứng dụng hơn.