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, 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 tự do 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ư trên mặt bàn hoặc 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 của bạn khi bắt đầu thiết kế. Ví dụ:

  • Thiết bị có 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 trong ứng dụng đa phương tiện theo nhiều cách.

  • Người dùng có thể làm nhiều việc cùng lúc trong khi xem video ở 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 thao tác chỉnh sửa phức tạp hơn sau khi chụp ảnh.

  • Người dùng có thể chuyển sang máy tính bảng để duy trì kết nối với các cuộc gọi video cũng như xem chi tiết hơn về bạn bè và gia đình của họ. Ứng dụng của bạn có thể cho thấy ngữ 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 nhiều lựa chọn điều khiển trên màn hình.

  • Các băng chuyền trong chế độ xem duyệt qua có thể có nhiều tính năng hơn để hình ảnh bắt mắt hơn, 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 nguồn cấp dữ liệu có thể xem cạnh nhau và phát nội dung.

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. Vì vậy, 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ụ bằng hình ảnh, hãy xem phần Thư viện dành cho màn hình lớn.

Tạo khả năng thích ứng theo mặc định cho ứng dụng đa phương tiện

Tránh để trải nghiệm người dùng bị hỏng trong ứng dụng đa phương tiện bằng cách làm cho bố cục của ứng dụng thích ứng trên điện thoại, máy tính bảng, thiết bị có thể gập lại 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à hệ số hình dạng. Bố cục thích ứng thay đổi dựa trên không gian màn hình 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 các nguyên tắc

Chất lượng cốt lõi của ứng dụng là cơ sở 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ị hay những điểm cần cân nhắc 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ắ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 ứng dụng cốt lõi.

Ứng dụng của bạn phải mang lại trải nghiệm thật tốt 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ế. Vì vậy, hãy thiết kế ứng dụng theo các nguyên tắc Cấp 1, 2 và 3 sau đây.

Các nguyên tắc 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 luồng tác vụ quan trọng nhưng với trải nghiệm người dùng kém tối ưu hơn.

Có thể bố cục ứng dụng không lý tưởng nhưng vẫn chạy được ở chế độ toàn màn hình hoặc toàn cửa sổ ở chế độ nhiều cửa sổ. Tệp không ở dạng 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, bao gồm cả 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 Phù hợp với màn hình lớn.

Cấp 2:

Ở đây, ứng dụng của bạn sẽ triển khai hoạt động tối ưu hoá bố cục cho tất cả các kích thước màn hình và cấu hình thiết bị, đồng thời hỗ trợ nâng cao 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 lại 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ì cấp này chỉ định các tính năng và chức năng nâng cao.

Nếu có thể, ứng dụng sẽ hỗ trợ chế độ đa nhiệm, các tư thế có thể gập lại, thao tác kéo và nhập bằng cử chỉ. Ở cấp độ này, các ứng dụng có sự khác biệt cao, vì vậy, hãy chú ý kỹ đến nguyên tắc cho những việc như đa nhiệm và tư thế có thể gập lại. Để tìm hiểu thêm, hãy xem bài viết Dành riêng cho màn hình lớn.

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

Tận dụng không gian tăng lên của màn hình lớn mà không cần hiệu ứng hòm thư (do hướng hạn chế) hoặc kéo giãn. Bằng cách tối ưu hoá bố cục của ứng dụng cho mạng truyền thông và mạng xã hội, bạn sẽ mở rộng phạm vi tiếp cận của ứng dụng và tạo trải nghiệm người dùng tốt hơn trên tất cả cá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), đồng thời 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 khả năng điều hướng từ xa để mang lại sự thuận tiện và khả năng kiểm soát cho giao diện người dùng. Các thành phần cũng bổ sung bố cục chuẩn (danh sách-chi tiết, nguồn cấp dữ liệu và ngăn bổ trợ) bằng cách định vị đích đến điều hướng chính trong phạm vi gần mà vẫn chiếm không gian màn hình tối thiểu.

Bố cục nội dung đa phương tiện

Giúp ứng dụng của bạn dễ sử dụng hơn bằng cách triển khai các 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 bài viết Tài nguyên bố cục.

  • List-detail: Thiết kế ứng dụng bằng trình duyệt nội dung đa phương tiệ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 hiển thị bên cạnh tệp video hoặc âm thanh đang phát. Nếu hướng thiết bị thay đổi, thì bố cục danh sách-chi tiết sẽ phản hồi để duy trì trạng thái ứng dụng. Để tìm hiểu thêm, hãy xem phần 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 phần tử nội dung tương đương trong một lưới có thể định cấu hình để xem nhanh chóng, 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à TV trong ứng dụng. Để biết thêm thông tin, hãy xem Bố cục nguồn cấp dữ liệu.

  • Ngăn bổ trợ: Với khu vực hiển thị chính và phụ, ứng dụng có thể nhúng một ngăn hỗ trợ cho ngữ cảnh, mức độ liên quan hoặc tài liệu tham khảo, 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 khác của cùng nghệ sĩ hoặc diễn viên đó. Để biết thêm thông tin chi tiết, hãy xem phần Bố cục ngăn bổ trợ.

Để xem bộ sưu tập tuyển chọn các bố cục nội dung nghe nhìn, hãy xem 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ị có 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à bố cục ngăn hỗ trợ.

  • Chi tiết danh sách: Đây là lựa chọn lý tưởng 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 kèm theo thông tin chi tiết để luôn nắm bắ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: 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ợ: Kiểu bố cục này có thể mang lại lợi ích cho các ứng dụng tìm kiếm và tham chiếu hoặc một ứng dụng cải thiện hiệu suất. Nền tảng này luôn sẵn sàng cho người dùng sử dụng 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 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 ngay lập tức. Để biết thêm thông tin, hãy xem phần Bố cục ngăn bổ trợ.

Để xem bộ sưu tập tuyển chọn các bố cục mạng xã hội, 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 dành cho màn hình lớn sẽ giúp bạn tránh phải làm lại ứng dụng một cách không cần thiết. Các phương pháp này cũng giúp ứng dụng thân thiện với người dùng hơn trên nhiều thiết bị hơn ngay từ đầu, đặc biệt là về hướng, phím tắt, khả năng hỗ trợ bản xem trước của máy ảnh và các tư thế có thể gập lại.

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à đổi kích thước, 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 bình thường, nhưng khả năng hữu dụng lại giảm đáng kể và ảnh hưởng đến trải nghiệm người dùng.

Ví dụ: nếu ứng dụng của bạn chạy trên máy tính bảng, máy tính bảng sẽ gắn theo hướng ngang. Nếu ứng dụng của bạn bị hạn chế hiển thị ở chế độ dọc, thì việc này sẽ gây ra hiệu ứng hòm thư, đây không phải là trường hợp lý tưởng cho người dùng cuối. Ứng dụng của bạn phải cho phép mọi người sử dụng hướng ưu tiê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 quy tắc hạn chế đối với 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 xem nội dung nghe nhìn, từ đó 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 sẽ không nhất thiết thay đổi hướng.

Phím tắt

Trên màn hình lớn hơn, phím tắt trên bàn phím vật lý (chẳng hạn 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 mang đến trải nghiệm nhất quán cho người dùng khi sử 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 thiểu các điểm phiền hà cho người dùng, hãy cân nhắc kiểm thử ứng dụng của bạn bằng bàn phím vật lý. Đ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 của mình khi bắt đầu thiết kế.

Hỗ trợ bản xem trước của máy ảnh

Với màn hình lớn, bạn có thể gặp nhiều vấn đề hơn khi 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 của máy ảnh chính là nội dung mà giao diện người dùng trong ứng dụng đa phương tiện thực sự hiển thị.

Ví dụ: nếu người dùng chụp ảnh bằng máy tính bảng nhưng màn hình máy tính bảng hiển thị lộn ngược, thì đây là trải nghiệm chưa tối ưu. Bao gồm tính năng 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 bài viết Bản xem trước của CameraX hoặc Bản xem trước của CameraX.

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ác tư thế có thể gập lại. Ví dụ: ứng dụng của bạn có thể cho phép người dùng có 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ế độ Dual Screen để xem trước và quay video.

Với các tư thế có thể gập lại có trong kế hoạch phát triển, ứng dụng của bạn có thể sử dụng được trên nhiều thiết bị hơn và có tác động rộng hơn. Bạn phóng to 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 làm được nếu không có các tư thế có thể gập lại. Để biết thêm thông tin, hãy xem phần Các tư thế có thể gập lại.