Điều hướng trên TV

Thiết bị TV cung cấp một bộ điều khiển điều hướng giới hạn cho các ứng dụng. Để tạo một lược đồ điều hướng hiệu quả cho ứng dụng TV, bạn cần hiểu rõ các chế độ điều khiển có giới hạn này cũng như những giới hạn của người dùng khi sử dụng ứng dụng. Khi bạn xây dựng ứng dụng Android dành cho TV, hãy đặc biệt chú ý đến cách người dùng di chuyển khi sử dụng các nút điều khiển từ xa thay vì màn hình cảm ứng.

Nguyên tắc

Mục tiêu là để thao tác điều hướng có cảm giác tự nhiên và quen thuộc mà không chiếm ưu thế trên giao diện người dùng hoặc chuyển hướng sự chú ý khỏi nội dung. Các nguyên tắc sau đây giúp thiết lập đường cơ sở để mang lại trải nghiệm nhất quán và trực quan cho người dùng trên các ứng dụng dành cho TV.

Hiệu quả

Giúp truy cập nội dung nhanh chóng và dễ dàng. Người dùng muốn truy cập nhanh vào nội dung bằng số lượt nhấp tối thiểu. Sắp xếp thông tin của bạn theo cách yêu cầu ít màn hình nhất.

Có thể dự đoán

Hãy làm theo các phương pháp hay nhất và đề xuất để người dùng có thể dễ dàng nắm bắt thao tác. Không phát minh lại các mẫu điều hướng một cách không cần thiết, vì điều này sẽ dẫn đến nhầm lẫn và khó dự đoán.

Trực quan

Làm cho điều hướng đủ đơn giản để hỗ trợ liền mạch cho các hành vi được chấp nhận rộng rãi của người dùng. Đừng làm quá phức tạp bằng cách thêm các lớp điều hướng không cần thiết.

Bộ điều khiển

Tay điều khiển có nhiều kiểu, từ điều khiển từ xa tối giản cho đến những tay điều khiển trò chơi phức tạp. Tất cả các tay điều khiển đều có một bàn phím di chuyển (D-pad) cùng với các nút chọn, nút màn hình chính và nút quay lại. Các nút còn lại sẽ khác nhau tuỳ theo mẫu thiết bị.

Điều khiển từ xa mẫu
Hình 1. Ví dụ về điều khiển từ xa cho TV.

D-pad
Phương thức điều hướng chính trên TV là thông qua D-pad, bao gồm các nút phần cứng hướng lên, xuống, trái và phải. D-pad chuyển tiêu điểm từ một đối tượng sang đối tượng gần nhất theo hướng của nút được nhấn.

Nút chọn
Chọn mục trên màn hình có tiêu điểm.

Nút màn hình chính
Đưa người dùng đến Màn hình chính của hệ thống.

Nút Quay lại
Cho phép người dùng quay lại chế độ xem trước đó.

Nút micrô
Gọi Trợ lý Google hoặc phương thức nhập bằng giọng nói.

Điều hướng bằng D-pad

Trên thiết bị TV, người dùng sẽ thao tác bằng D-pad hoặc các phím mũi tên. Loại điều khiển này giới hạn chuyển động lên, xuống, sang trái và sang phải. Để tạo một ứng dụng tuyệt vời được tối ưu hoá cho TV, bạn phải cung cấp lược đồ điều hướng để người dùng có thể nhanh chóng tìm hiểu cách điều hướng trong ứng dụng bằng các chế độ điều khiển hạn chế này.

Khung Android tự động xử lý việc điều hướng theo hướng giữa các phần tử bố cục, vì vậy, bạn thường không cần làm gì thêm cho ứng dụng của mình. Tuy nhiên, bạn nên kiểm thử kỹ lưỡng tính năng điều hướng bằng bộ điều khiển D-pad để phát hiện mọi vấn đề về điều hướng.

Hãy làm theo các nguyên tắc sau để kiểm thử nhằm đảm bảo hệ thống điều hướng của ứng dụng hoạt động tốt với D-pad trên thiết bị TV:

  • Đảm bảo rằng người dùng có bộ điều khiển D-pad có thể di chuyển đến tất cả các chế độ điều khiển hiển thị trên màn hình.
  • Đối với danh sách cuộn có tiêu điểm, hãy đảm bảo rằng các nút lên và xuống của D-pad cuộn danh sách và nút chọn chọn một mục trong danh sách. Xác minh rằng người dùng có thể chọn một phần tử trong danh sách và danh sách vẫn cuộn khi một phần tử được chọn.
  • Đảm bảo rằng việc chuyển đổi giữa các chế độ điều khiển đơn giản và dễ dự đoán.

Sửa đổi cách di chuyển theo hướng

Khung Android tự động áp dụng lược đồ điều hướng có hướng dựa trên vị trí tương đối của các phần tử có thể làm tâm điểm trong bố cục của bạn. Kiểm thử lược đồ điều hướng đã tạo trong ứng dụng của bạn bằng bộ điều khiển D-pad. Sau khi kiểm thử, nếu quyết định rằng bạn muốn người dùng di chuyển qua bố cục theo một cách cụ thể, bạn có thể thiết lập tính năng điều hướng theo hướng rõ ràng cho các chế độ điều khiển của mình.

Mã mẫu sau đây cho biết cách xác định chế độ điều khiển tiếp theo để nhận tiêu điểm cho đối tượng bố cục TextView:

<TextView android:id="@+id/Category1" android:nextFocusDown="@+id/Category2" />

Bảng sau đây liệt kê tất cả thuộc tính điều hướng hiện có cho tiện ích giao diện người dùng Android:

Thuộc tính Chức năng
nextFocusDown Xác định khung hiển thị tiếp theo cần nhận tiêu điểm khi người dùng di chuyển xuống.
nextFocusLeft Xác định khung hiển thị tiếp theo cần nhận tiêu điểm khi người dùng di chuyển sang trái.
nextFocusRight Xác định khung hiển thị tiếp theo cần nhận tiêu điểm khi người dùng di chuyển sang phải.
nextFocusUp Xác định khung hiển thị tiếp theo cần nhận tiêu điểm khi người dùng di chuyển lên.

Để sử dụng một trong các thuộc tính điều hướng rõ ràng này, hãy đặt giá trị thành android:id của một tiện ích khác trong bố cục. Hãy nhớ thiết lập thứ tự điều hướng dưới dạng một vòng lặp để thành phần điều khiển cuối cùng chuyển tâm điểm quay lại thành phần điều khiển đầu tiên.

Cung cấp tiêu điểm và lựa chọn rõ ràng

Mức độ thành công của lược đồ điều hướng của ứng dụng trên thiết bị TV phụ thuộc vào việc người dùng có dễ dàng xác định phần tử nào trong giao diện người dùng đang được lấy tiêu điểm hay không. Nếu bạn không cung cấp chỉ báo rõ ràng về mục được đặt tiêu điểm, cũng như mục mà người dùng có thể thực hiện thao tác, họ có thể nhanh chóng trở nên khó chịu và thoát khỏi ứng dụng của bạn. Do đó, bạn phải luôn tập trung vào một mục mà người dùng có thể thao tác ngay sau khi ứng dụng khởi động hoặc bất cứ khi nào ứng dụng ở trạng thái rảnh.

Trong bố cục và cách triển khai ứng dụng, hãy sử dụng màu sắc, kích thước, ảnh động hoặc kết hợp các thuộc tính này để giúp người dùng dễ dàng xác định hành động tiếp theo họ có thể thực hiện. Sử dụng lược đồ thống nhất để thể hiện tâm điểm trên toàn ứng dụng.

Android cung cấp Tài nguyên danh sách trạng thái có thể vẽ để triển khai các điểm nổi bật cho các chế độ điều khiển được chọn và có tiêu điểm. Ví dụ về mã sau đây minh hoạ cách bật hành vi hình ảnh cho một nút để cho biết rằng người dùng đã di chuyển đến chế độ điều khiển rồi chọn chế độ đó:

<!-- res/drawable/button.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/button_pressed" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/button_focused" /> <!-- focused -->
    <item android:state_hovered="true"
          android:drawable="@drawable/button_focused" /> <!-- hovered -->
    <item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>

Mã mẫu XML bố cục sau đây áp dụng đối tượng có thể vẽ trong danh sách trạng thái trước đó cho Button:

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/button" />

Hãy đảm bảo cung cấp đủ khoảng đệm trong các thành phần điều khiển có thể làm tâm điểm và có thể chọn để có thể nhìn thấy rõ những điểm nổi bật xung quanh các thành phần đó.

Thao tác bằng nút quay lại

Để đảm bảo tính nhất quán giữa các ứng dụng trên nền tảng, hãy đảm bảo hành vi của nút quay lại tuân thủ những nguyên tắc này.

Sử dụng hành vi của nút quay lại có thể dự đoán

Để tạo trải nghiệm điều hướng dễ dàng và dễ dự đoán, khi người dùng nhấn nút quay lại của điều khiển từ xa, hãy đưa họ đến đích trước đó.

Hình ảnh mô tả quy trình điều hướng khi sử dụng thanh điều hướng trên cùng
Hình 2. Quy trình sử dụng thanh điều hướng trên cùng.
Hình ảnh mô tả quy trình điều hướng khi sử dụng tính năng điều hướng bên
Hình 3. Quy trình sử dụng phần điều hướng bên.

Nếu người dùng di chuyển từ một mục trong trình đơn đến một thẻ ở giữa trang rồi nhấn vào nút quay lại, thì kết quả sẽ phụ thuộc vào việc ứng dụng sử dụng thanh điều hướng trên cùng hay thanh điều hướng bên trái:

  • Ứng dụng sử dụng thanh điều hướng trên cùng: đưa người dùng quay lại đầu trang bằng cách cuộn nhanh và kích hoạt tiêu điểm trên trình đơn.
  • Ứng dụng sử dụng thành phần điều hướng bên trái: kích hoạt trình đơn bên trái và tập trung vào mục trong trình đơn hiện đang hoạt động.

Đảm bảo rằng nút quay lại không bị kiểm soát bởi màn hình xác nhận hoặc một phần của vòng lặp vô hạn.

Ảnh chụp màn hình cho thấy hộp thoại hỏi người dùng xem họ có muốn thoát hay không
Hình 4. Thoát khỏi quy trình kiểm soát

Không nên làm.
Tránh hạn chế khi thoát. Cho phép người dùng thoát khỏi ứng dụng mà không cần xác nhận.


Ảnh chụp màn hình cho thấy vòng lặp điều hướng
Hình 5. Vòng lặp điều hướng

Không nên làm.
Tuyệt đối không nhập vòng lặp vô hạn của thao tác đóng và mở trình đơn. Tốt nhất là nhấn nút quay lại để thoát khỏi ứng dụng. Đừng hiện nút thoát trên trình đơn trừ phi đó là trường hợp đặc biệt, chẳng hạn như hồ sơ của trẻ em.

Không hiện nút lên hoặc quay lại

Không giống như trên các thiết bị cầm tay, nút quay lại trên điều khiển từ xa dùng để quay lại trên TV. Không cần thiết phải hiện nút quay lại ảo trên màn hình:

Ảnh chụp màn hình cho thấy nút quay lại mềm trên màn hình
Hình 6. Nút quay lại mềm

Không nên làm.

Hiện nút huỷ nếu cần

Nếu hành động chỉ có thể nhìn thấy là hành động xác nhận, hành động huỷ bỏ hoặc hành động mua hàng, thì bạn nên có nút Cancel (Huỷ) để trả về đích đến trước đó:

Ảnh chụp màn hình cho thấy nút huỷ mềm trên màn hình
Hình 7. Nút huỷ tạm thời.

Nên làm.

Triển khai tính năng điều hướng quay lại

Khung Android thường xử lý tốt thao tác quay lại, giống như với D-pad. Nếu sử dụng thành phần Điều hướng, bạn có thể hỗ trợ nhiều biểu đồ điều hướng. Đôi khi, bạn có thể cần triển khai một số hành vi tuỳ chỉnh, chẳng hạn như yêu cầu nút quay lại đặt lại tiêu điểm về đầu một danh sách dài.

ComponentActivity, lớp cơ sở cho FragmentActivityAppCompatActivity cho phép bạn kiểm soát hành vi của nút quay lại bằng cách sử dụng OnBackPressedDispatcher. Bạn có thể truy xuất nút này bằng cách gọi getOnBackPressedDispatcher().

Để biết thêm thông tin, hãy xem phần Cung cấp tính năng điều hướng quay lại tuỳ chỉnh.

Điều khiển chế độ phát trên TV

Phát video là một trong những tính năng quan trọng nhất trên TV. Điều quan trọng là trình phát video trong các ứng dụng trên Android TV phải hoạt động như nhau. Hãy tham khảo nguyên tắc về nút điều khiển quá trình phát dành cho TV.

Điều hướng thẻ trực tiếp

Ngoài việc tuân thủ các yêu cầu về chất lượng của ứng dụng TV, các ứng dụng có nguồn cấp dữ liệu truyền hình trực tiếp được tích hợp trên thẻ Trực tiếp cũng phải đáp ứng các yêu cầu về tính năng phát và phát trực tiếp suôn sẻ, như mô tả trong các phần sau.

Phát dễ dàng

Tính năng phát dễ dàng áp dụng cho hành vi trong ứng dụng sau bất kỳ đường liên kết sâu nào đến kênh Trực tiếp/Tuyến tính từ Google TV và Android TV.

Những người dùng nhấp vào đường liên kết sâu đến kênh Trực tiếp/Tuyến tính từ Google TV và Android TV phải được chuyển thẳng đến chế độ phát kênh mà không chặn hoặc trì hoãn màn hình của ứng dụng đích. Quy trình đăng nhập, quy trình đăng ký, video xây dựng thương hiệu và các loại độ trễ khác không được cho phép.

Tuy nhiên, nếu đường liên kết sâu bắt đầu quá trình tải ứng dụng mục tiêu qua một quá trình khởi động nguội, thì độ trễ khởi động này trước khi được cho phép. Trong trường hợp này, bạn cũng được phép sử dụng video hoặc ảnh động xây dựng thương hiệu khi khởi động ứng dụng. Trải nghiệm khởi động nguội như vậy khó có thể xảy ra nhiều lần cho mỗi phiên.

Ngoài ra, nếu quá trình chuyển đến kênh được liên kết sâu mất vài giây, thì bạn có thể hiển thị thương hiệu của kênh và/hoặc dịch vụ. Tuy nhiên, thời lượng của kênh chỉ nên bằng thời gian tải kênh (và tương tự như thời gian tải kênh trung bình trong ứng dụng).

Nếu người dùng đã đăng xuất hoặc chưa đăng ký, thì bạn có thể chặn việc phát kênh có tính phí để hoàn tất quy trình đăng nhập hoặc đăng ký.

Trực tiếp

Khi người dùng chạy một ứng dụng qua một đường liên kết sâu trên thẻ Trực tiếp, sau đó nhấn nút quay lại, người dùng phải quay lại thẻ Trực tiếp sau một lần nhấn nút quay lại, bất kể thời gian đã trôi qua. Hành vi quay lại trực tiếp này là bắt buộc đối với tất cả đường liên kết sâu trong thẻ Trực tiếp trên Google TV và Android TV.

Các đường liên kết sâu đến thẻ trực tiếp được phân biệt bằng một tham số đường liên kết sâu được thêm vào: ?exit_on_back=[true|false]. Các ứng dụng phải phân tích cú pháp tham số này để xác định xem ứng dụng có được chạy từ thẻ Trực tiếp hay không. Nếu exit_on_backtrue, các ứng dụng phải triển khai hành vi quay lại trực tiếp.

Xin lưu ý rằng nếu người dùng nhấn nút bất kỳ nào khác ngoài nút quay lại khi nhấn nút đầu tiên sau đường liên kết sâu, thì yêu cầu quay lại trực tiếp sẽ không được áp dụng và chỉ bắt buộc phải có hành vi với nút quay lại tiêu chuẩn.

Ví dụ: giả sử sau khi đi theo một đường liên kết sâu, người dùng nhấn vào nút chọn của D-pad để xuất hiện một lớp phủ điều khiển. Người dùng đợi lớp phủ biến mất, sau đó nhấn nút quay lại. Vì nút đầu tiên được nhấn sau khi đi theo đường liên kết sâu là nút chọn D-pad, nên không áp dụng yêu cầu quay lại trực tiếp. Thay vào đó, logic ngăn xếp lui thông thường của ứng dụng sẽ được áp dụng.

Việc nhấn nút quay lại nhiều lần phải đưa người dùng đến thư mục gốc của ứng dụng rồi quay lại Google TV hoặc Android TV mà không có bất kỳ vòng lặp vô hạn nào. Để biết thêm thông tin, hãy xem phần Hành vi của nút quay lại có thể dự đoán.

Điểm bắt đầu cố định

Màn hình đầu tiên mà người dùng nhìn thấy khi chạy ứng dụng qua trình chạy cũng là màn hình cuối cùng họ nhìn thấy khi quay lại trình chạy sau khi nhấn nút quay lại.

Phương pháp liên kết sâu mô phỏng thao tác điều hướng thủ công

Cho dù là liên kết sâu hay tự điều hướng đến một đích đến cụ thể, người dùng đều có thể sử dụng nút quay lại để điều hướng qua các đích đến về đích đến bắt đầu.

Ảnh chụp màn hình cho thấy đường liên kết sâu đến trang chi tiết trong một ứng dụng. Thao tác nhấn nút quay lại sẽ chuyển đến màn hình chính của ứng dụng đó rồi nhấn lại sẽ quay lại màn hình gốc.
Hình 8. Liên kết sâu đến một trang chi tiết.

Việc liên kết sâu vào một ứng dụng từ một ứng dụng khác sẽ mô phỏng thao tác điều hướng thủ công. Ví dụ: nếu người dùng truy cập trực tiếp vào trang chi tiết trên ứng dụng Moviestar trên Google TV rồi nhấn vào nút quay lại, họ sẽ được đưa đến trang chủ của ứng dụng Moviestar.

Xoá đường dẫn đến mọi phần tử có thể làm tâm điểm

Cho phép người dùng thao tác trên giao diện người dùng một cách rõ ràng. Nếu không có đường dẫn thẳng để đến chế độ điều khiển, hãy cân nhắc việc di chuyển vị trí đó.

Ví dụ về thành phần điều hướng có thể làm tâm điểm
Hình 9. Kiểm soát khả năng lấy nét.

Nên làm.
Kiểm soát vị trí, như hành động tìm kiếm hiển thị ở đây, ở những vị trí không chồng chéo với các phần tử có thể nhấp vào khác.

Ví dụ về thành phần điều hướng có thể làm tâm điểm
Hình 10. Kiểm soát khả năng lấy nét.

Không nên làm.
Tránh những bố cục chứa các chế độ kiểm soát ở những nơi khó tiếp cận. Bạn không thể quản lý dễ dàng bằng D-pad để truy cập vào hành động tìm kiếm hiển thị ở đây.

Trục

Thiết kế bố cục để tận dụng cả trục ngang và trục dọc. Cung cấp cho mỗi hướng một chức năng cụ thể, giúp bạn nhanh chóng di chuyển các hệ phân cấp lớn.

Ví dụ về trục điều hướng
Hình 11. Truyền tải.

Nên làm.
Bạn có thể di chuyển danh mục trên trục tung và các mục trong mỗi danh mục có thể được duyệt trên trục hoành.

Ví dụ về trục điều hướng
Hình 12. Truyền tải.

Không nên làm.
Tránh hệ phân cấp bố cục phức tạp và lồng nhau.