Thiết kế cho màn hình lớn ngay từ đầu

Thiết bị Android có nhiều kiểu dáng, bao gồm điện thoại, máy tính bảng, thiết bị có thể gập lại và thiết bị ChromeOS, với nhiều kích thước màn hình. Android hỗ trợ nhiều chế độ hiển thị, trong đó có chế độ nhiều cửa sổ, nhiều màn hình, dạng thức tuỳ ý và hình trong hình. Thiết bị có thể gập lại có thể ở nhiều trạng thái hoặc tư thế, chẳng hạn như tư thế trên mặt bàn hoặc tư thế quyển sách.

Hãy cân nhắc các trường hợp sử dụng khác nhau cho ứng dụng khi bạn bắt đầu thiết kế. Ví dụ:

  • Thiết bị màn hình lớn mang đến cho người dùng nhiều không gian hơn để tương tác với nội dung của ứng dụng đa phương tiện theo nhiều cách.

  • Người dùng có thể thực hiện nhiều việc cùng lúc khi xem video trong cấu hình nhiều cửa sổ hoặc tận dụng màn hình lớn hơn để áp dụng các nội dung chỉnh sửa phức tạp hơn sau khi chụp ảnh.

  • Người dùng có thể chuyển sang dùng máy tính bảng để duy trì kết nối bằng cuộc gọi video và nhìn thấy bạn bè cũng như gia đình của họ rõ hơn. Ứng dụng của bạn có thể hiển thị bối cảnh phong phú hơn về một tiêu đề hoặc cảnh trong lớp phủ phát tuỳ chỉnh hoặc cung cấp thêm các lựa chọn điều khiển trên màn hình.

  • Băng chuyền trong chế độ xem duyệt có thể hiển thị nhiều nội dung hơn để tăng sức hấp dẫn về mặt hình ảnh, hoặc ứng dụng đa phương tiện của bạn có thể thu hút người dùng bằng cách cung cấp một nguồn cấp dữ liệu có thể duyệt xem cùng với chế độ phát.

Xin lưu ý rằng ứng dụng đa phương tiện của bạn có cùng một mã chạy trên điện thoại tiêu chuẩn, thiết bị có thể gập lại, máy tính bảng và thiết bị ChromeOS. Do đó, bạn nên thiết kế cho màn hình lớn ngay từ đầu quá trình phát triển ứng dụng. Để biết thêm thông tin và ví dụ minh hoạ, hãy xem Thư viện màn hình lớn.

Đặt ứng dụng đa phương tiện ở chế độ thích ứng theo mặc định

Tránh làm gián đoạn trải nghiệm người dùng trong ứng dụng đa phương tiện bằng cách điều chỉnh bố cục của ứng dụng cho phù hợp với điện thoại, máy tính bảng, thiết bị gập và thiết bị ChromeOS.

Ứng dụng của bạn phải thích ứng để phù hợp với nhiều kích thước màn hình, hướng và kiểu dáng. Bố cục thích ứng thay đổi dựa trên không gian hiển thị hiện có. Để biết thêm thông tin, hãy xem bài viết Hỗ trợ nhiều kích thước màn hình.

Thiết kế theo nguyên tắc

Chất lượng cốt lõi của ứng dụng là nền tảng của tất cả ứng dụng Android, bất kể kích thước màn hình, tư thế thiết bị hoặc các yếu tố khác dành riêng cho thiết bị. Ứng dụng của bạn phải đáp ứng các yêu cầu cơ bản này trước khi bạn bắt đầu thiết kế cho màn hình lớn. Để biết thêm thông tin, hãy xem bài viết Chất lượng cốt lõi của ứng dụng.

Ứng dụng của bạn phải mang lại trải nghiệm tuyệt vời cho người dùng bất kể kiểu dáng thiết bị, kích thước màn hình, chế độ hiển thị hoặc tư thế. Do đó, hãy thiết kế ứng dụng theo các nguyên tắc của Cấp 1, 2 và 3 sau đây.

Hướng dẫn này đưa ra một bộ yêu cầu toàn diện về chất lượng cho hầu hết các loại ứng dụng Android.

Cấp 3:

Ở cấp độ cơ bản này, ứng dụng của bạn vẫn phải tuân thủ các yêu cầu về giao diện người dùng và đồ hoạ. Ứng dụng của bạn đã sẵn sàng cho màn hình lớn và người dùng có thể hoàn tất các quy trình thực hiện nhiệm vụ quan trọng, nhưng trải nghiệm người dùng chưa được tối ưu.

Bố cục ứng dụng có thể chưa lý tưởng, nhưng ứng dụng sẽ chạy ở chế độ toàn màn hình hoặc toàn cửa sổ ở chế độ nhiều cửa sổ. Ứng dụng không có khung viền hòm thư và không chạy ở chế độ tương thích. Ứng dụng cung cấp tính năng hỗ trợ cơ bản cho các thiết bị đầu vào bên ngoài (chẳng hạn như bàn phím, chuột và bàn di chuột). Để biết thêm thông tin, hãy xem bài viết Sẵn sàng cho màn hình lớn.

Cấp 2:

Ở mức độ này, ứng dụng của bạn triển khai chế độ tối ưu hoá bố cục cho tất cả kích thước màn hình và cấu hình thiết bị, cũng như tăng cường mức độ hỗ trợ cho các thiết bị đầu vào bên ngoài. Để biết thông tin chi tiết, hãy xem bài viết Tối ưu hoá cho màn hình lớn.

Cấp 1:

Đây là mức hỗ trợ tốt nhất và mang đến cho người dùng trải nghiệm tuyệt vời nhất với ứng dụng của bạn, vì mức này chỉ định các tính năng Premium và khả năng.

Nếu cần, ứng dụng sẽ hỗ trợ tính năng đa nhiệm, các tư thế có thể gập lại, chức năng kéo và nhập bằng bút cảm ứng. Ở cấp độ này, các ứng dụng có sự khác biệt rõ rệt, vì vậy, hãy chú ý đến các nguyên tắc về những vấn đề như đa nhiệm và tư thế gập. Để tìm hiểu thêm, hãy xem bài viết Điểm khác biệt của màn hình lớn.

Bố cục được tối ưu hoá

Tận dụng không gian rộng hơn của màn hình lớn mà không cần tạo khung viền hòm thư (do hạn chế hướng) hoặc kéo giãn. Bằng cách tối ưu hoá bố cục của ứng dụng cho nội dung nghe nhìn và mạng xã hội, bạn có thể mở rộng phạm vi tiếp cận của ứng dụng và tạo ra trải nghiệm người dùng tốt hơn trên tất cả kiểu dáng màn hình lớn (máy tính bảng, thiết bị có thể gập lại và thiết bị ChromeOS) cũng như hỗ trợ mọi kích thước điện thoại.

Các thành phần ngăn và dải điều hướng cung cấp chế độ điều hướng từ xa để dễ dàng sử dụng và điều khiển giao diện người dùng. Các thành phần này cũng bổ trợ cho bố cục chuẩn (danh sách-chi tiết, nguồn cấp dữ liệu và ngăn hỗ trợ) bằng cách định vị các đích đến điều hướng chính trong phạm vi gần mà chỉ chiếm một không gian màn hình tối thiểu.

Bố cục nội dung nghe nhìn

Giúp ứng dụng của bạn dễ sử dụng hơn bằng cách triển khai bố cục dành riêng cho nội dung nghe nhìn cho danh sách-chi tiết, nguồn cấp dữ liệu và ngăn hỗ trợ. Để biết thông tin về bố cục MDX, Flutter và Compose, hãy xem phần Tài nguyên bố cục.

  • Danh sách-chi tiết: Thiết kế ứng dụng bằng trình duyệt nội dung nghe nhìn tương tác cho phép người dùng duyệt xem nhiều nội dung nghe nhìn trong khi xem hoặc nghe. Tiêu đề nội dung nghe nhìn được hiển thị cạnh một video hoặc tệp âm thanh đang phát. Nếu hướng thiết bị thay đổi, bố cục danh sách-chi tiết sẽ thích ứng để duy trì trạng thái ứng dụng. Để tìm hiểu thêm, hãy xem bài viết Bố cục danh sách-chi tiết.

  • Nguồn cấp dữ liệu: Bố cục nguồn cấp dữ liệu sắp xếp các thành phần nội dung tương đương trong một lưới có thể định cấu hình để xem nhanh và thuận tiện một lượng lớn nội dung, chẳng hạn như nguồn cấp dữ liệu nhạc hoặc kiosk phim và truyền hình trong ứng dụng của bạn. Để biết thêm thông tin, hãy xem phần Bố cục nguồn cấp dữ liệu.

  • Ngăn hỗ trợ: Với các khu vực hiển thị chính và phụ, ứng dụng của bạn có thể nhúng một ngăn hỗ trợ cho bối cảnh, mức độ liên quan hoặc tham chiếu, chẳng hạn như danh sách cuộn gồm các tiêu đề tương tự, bài đánh giá đã đăng hoặc tác phẩm bổ sung của cùng nghệ sĩ hoặc diễn viên đó. Để biết thêm thông tin, hãy xem phần Hỗ trợ bố cục ngăn.

Để xem bộ sưu tập bố cục nội dung nghe nhìn được tuyển chọn, hãy xem phần Thư viện nội dung nghe nhìn.

Bố cục mạng xã hội

Màn hình lớn mang đến cho người dùng mạng xã hội nhiều không gian làm việc hơn để sáng tạo, làm nhiều việc cùng lúc, kéo nội dung giữa các ứng dụng và chia sẻ nội dung đó. Với các tính năng và chức năng đặc biệt không có trên thiết bị màn hình nhỏ, ứng dụng đa phương tiện trên màn hình lớn có thể tận dụng bố cục danh sách-chi tiết, nguồn cấp dữ liệu và ngăn bổ trợ.

  • Danh sách-chi tiết: Bố cục này rất phù hợp cho ứng dụng nhắn tin, trình quản lý danh bạ hoặc trình duyệt tệp. Ví dụ: ứng dụng của bạn có thể hiển thị danh sách các cuộc trò chuyện cạnh nhau cùng với thông tin chi tiết để luôn cập nhật tin nhắn mới nhất. Để biết thêm thông tin, hãy xem phần Bố cục danh sách-chi tiết.

  • Nguồn cấp dữ liệu: Các thành phần phổ biến trong kiểu bố cục này là thẻ và danh sách. Ví dụ: tạo ảnh ghép gồm các bài đăng ở định dạng lưới linh hoạt hoặc sử dụng kích thước và vị trí để thu hút sự chú ý đến các bài đăng nổi bật. Người dùng có thể nhanh chóng xem các nhóm nội dung lớn. Để biết thêm thông tin, hãy xem bài viết Bố cục nguồn cấp dữ liệu.

  • Ngăn bổ trợ: Ứng dụng tìm kiếm và tham chiếu hoặc ứng dụng cải thiện năng suất có thể hưởng lợi từ kiểu bố cục này. Bố cục này giúp người dùng luôn sẵn có bộ công cụ sáng tạo nội dung. Ví dụ: ứng dụng của bạn có thể cho phép người dùng điều chỉnh các chế độ cài đặt, truy cập vào bảng màu, áp dụng hiệu ứng và xem các thay đổi tức thì. Để biết thêm thông tin, hãy xem bài viết Hỗ trợ bố cục ngăn.

Để xem bộ sưu tập bố cục truyền thông xã hội được tuyển chọn, hãy xem trang Thư viện mạng xã hội.

Các phương pháp hay nhất cho ứng dụng đa phương tiện trên màn hình lớn

Việc áp dụng các phương pháp hay nhất cho màn hình lớn giúp bạn tránh phải làm lại ứng dụng không cần thiết. Các phương pháp này cũng giúp ứng dụng của bạn thân thiện hơn với người dùng trên nhiều thiết bị ngay từ đầu, đặc biệt là về hướng, phím tắt, hỗ trợ xem trước camera và tư thế gập.

Hướng và đổi kích thước

Nếu ứng dụng đa phương tiện của bạn khai báo các quy tắc hạn chế về hướng và khả năng đổi kích thước, thì Android sẽ kích hoạt chế độ tương thích. Mặc dù chế độ tương thích đảm bảo ứng dụng của bạn hoạt động ở mức chấp nhận được, nhưng khả năng hữu dụng lại giảm đáng kể và trải nghiệm người dùng cũng bị ảnh hưởng.

Ví dụ: nếu ứng dụng của bạn đang chạy trên máy tính bảng, thì máy tính bảng sẽ gắn vào đế sạc theo hướng ngang. Nếu ứng dụng của bạn bị hạn chế ở chế độ dọc, thì điều này sẽ gây ra hiệu ứng hòm thư, không phù hợp với người dùng cuối. Ứng dụng của bạn nên cho phép người dùng sử dụng hướng mà họ muốn, vì vậy, hãy tận dụng kích thước có sẵn của màn hình lớn trong thiết kế của bạn.

Mọi hạn chế về hướng đều làm giảm cách người dùng có thể tương tác với nội dung hoặc sử dụng nội dung nghe nhìn, điều này hạn chế việc sử dụng ứng dụng của bạn. Việc thay đổi hướng có thể ảnh hưởng đến kích thước ở một mức độ nào đó, nhưng việc đổi kích thước không nhất thiết sẽ thay đổi hướng.

Phím tắt

Trên màn hình lớn hơn, các phím tắt trên bàn phím thực (như bắt đầu, dừng, tạm dừng, tua lại và tua đi) có nhiều khả năng được sử dụng hơn, giúp người dùng có trải nghiệm nhất quán khi dùng bàn phím.

Người dùng mong đợi các chức năng này trong ứng dụng đa phương tiện của họ. Để giảm bớt trở ngại cho người dùng, hãy cân nhắc kiểm thử ứng dụng bằng bàn phím thực. Điều này giúp bạn nhận thấy và đưa các lối tắt quan trọng này vào ứng dụng ngay từ khi bắt đầu thiết kế.

Hỗ trợ xem trước camera

Với màn hình lớn, bạn có thể gặp nhiều vấn đề hơn về việc kéo giãn, cắt và xoay. Vì vậy, bạn không thể giả định kích thước của bản xem trước camera là kích thước mà giao diện người dùng trong ứng dụng đa phương tiện của bạn thực sự kết xuất.

Ví dụ: nếu người dùng chụp ảnh bằng máy tính bảng nhưng trên màn hình máy tính bảng, ảnh lại hiển thị ngược, thì đây là trải nghiệm không tối ưu. Hỗ trợ bản xem trước của máy ảnh cho màn hình lớn.

Để biết thêm thông tin, hãy xem phần Bản xem trước CameraX hoặc Bản xem trước Camera2.

Kiểu có thể gập lại

Thiết kế ứng dụng đa phương tiện cho màn hình lớn, bao gồm cả tư thế gập. Ví dụ: ứng dụng của bạn có thể cho phép người dùng sử dụng cấu hình trên mặt bàn để phát nội dung nghe nhìn hoặc sử dụng màn hình sau và chế độ màn hình kép để xem trước và chụp ảnh.

Khi bạn đưa tư thế gập vào kế hoạch phát triển, ứng dụng của bạn sẽ có mặt trên nhiều thiết bị hơn và có tác động rộng hơn. Bạn có thể mở rộng trải nghiệm nội dung nghe nhìn cho người dùng theo những cách mà các thiết bị khác không thể làm được nếu không có tư thế gập. Để biết thêm thông tin, hãy xem phần Tư thế gập.