Android giúp bạn phát triển một ứng dụng chạy tốt trên nhiều kích thước màn hình và kiểu dáng thiết bị. Khả năng tương thích rộng này giúp bạn thiết kế một ứng dụng duy nhất mà bạn có thể phân phối rộng rãi cho tất cả các thiết bị mục tiêu.
Tuy nhiên, để mang lại trải nghiệm tốt nhất có thể cho người dùng trên mỗi cấu hình màn hình, bạn cần tối ưu hoá bố cục và các thành phần giao diện người dùng khác cho nhiều kích thước. Trên ChromeOS, việc tối ưu hoá giao diện người dùng giúp bạn tận dụng tối đa không gian màn hình bổ sung để cung cấp các tính năng mới, trình bày nội dung mới hoặc nâng cao trải nghiệm nhằm tăng mức độ tương tác của người dùng.
Bố cục cho màn hình lớn
Nếu bạn phát triển ứng dụng cho thiết bị cầm tay và muốn cải thiện thiết kế trên ChromeOS cũng như các kiểu dáng màn hình lớn khác, hãy bắt đầu bằng cách điều chỉnh nhỏ bố cục, phông chữ và khoảng cách. Đối với máy tính bảng 7 inch hoặc trò chơi có canvas lớn, bạn chỉ cần điều chỉnh những thông số này.
Đối với màn hình lớn, bạn có thể thiết kế lại các phần trong giao diện người dùng để thay thế giao diện người dùng "bị kéo giãn" bằng giao diện người dùng nhiều ngăn hiệu quả, thao tác điều hướng đơn giản hơn và nội dung bổ sung. Nghiên cứu Material của nhóm Material Design cung cấp các ví dụ về giao diện của tính năng này. Ví dụ: hãy xem cách ứng dụng Reply (Trả lời) thích ứng với nhiều kích thước màn hình.
Sau đây là một số đề xuất:
- Cung cấp bố cục tuỳ chỉnh cho những màn hình lớn hơn này. Bạn có thể thực hiện việc này bằng cách sử dụng kích thước ngắn nhất của màn hình hoặc chiều rộng và chiều cao tối thiểu có sẵn.
- Hãy hình dung cách UX và bố cục của bạn hoạt động trong một môi trường ưu tiên chế độ ngang, chẳng hạn như ChromeOS. Điều chỉnh bố cục để trông đẹp mắt và hoạt động hiệu quả ở những hướng này dựa trên kích thước cửa sổ, hoặc cung cấp bố cục ngang cụ thể bằng cách sử dụng bộ đủ điều kiện tài nguyên ngang. Bạn có thể tìm hiểu thêm về tính năng thay đổi kích thước cửa sổ linh hoạt và những điểm cần cân nhắc khác đối với màn hình lớn trên trang Quản lý cửa sổ.
- Thanh điều hướng ở dưới cùng không điều chỉnh kích thước tốt khi ứng dụng của bạn được kéo giãn để có chiều rộng lớn. Hãy cân nhắc việc chuyển phần điều hướng sang trình đơn bên trái để người dùng dễ dàng truy cập hơn và có thể xem thêm các lựa chọn. Ví dụ về Reply (Trả lời) minh hoạ rõ ràng điều này.
- Tối thiểu, hãy tuỳ chỉnh các phương diện như cỡ chữ, lề và khoảng cách cho màn hình lớn hơn để cải thiện việc sử dụng không gian và khả năng đọc nội dung. Hãy cân nhắc xem mọi thứ có thể trông như thế nào khi người dùng ở xa thiết bị một chút, chẳng hạn như thiết bị ChromeOS hoặc các môi trường máy tính khác.
- Điều chỉnh vị trí của các chế độ kiểm soát giao diện người dùng để người dùng có thể truy cập khi sử dụng chuột hoặc cầm máy tính bảng, chẳng hạn như hướng về các cạnh và ra khỏi tâm.
- Khoảng đệm của các phần tử trên giao diện người dùng thường phải lớn hơn trên ChromeOS và các thiết bị có màn hình lớn khác so với trên điện thoại di động. Tất cả lề và khoảng trống của bạn đều phải thích ứng khi bạn chuyển sang các kích thước màn hình khác nhau.
- Đệm nội dung văn bản một cách thích hợp để nội dung đó không được căn chỉnh trực tiếp dọc theo các cạnh màn hình. Sử dụng khoảng đệm tối thiểu 16 dp xung quanh nội dung gần các cạnh màn hình.
Cụ thể, hãy đảm bảo rằng bố cục của bạn không xuất hiện ở trạng thái "bị kéo giãn" trên màn hình:
- Các dòng văn bản không nên quá dài – hãy tối ưu hoá cho tối đa 100 ký tự mỗi dòng, với kết quả tốt nhất là từ 50 đến 75 ký tự.
- Danh sách và trình đơn không được sử dụng toàn bộ chiều rộng màn hình.
- Sử dụng khoảng đệm để quản lý chiều rộng của các phần tử trên màn hình hoặc chuyển sang giao diện người dùng nhiều ngăn cho các thiết bị có màn hình lớn hơn (xem phần tiếp theo).
Tận dụng không gian màn hình bổ sung
Các thiết bị ChromeOS cung cấp không gian màn hình lớn hơn đáng kể cho ứng dụng của bạn. Khi thiết kế giao diện người dùng của ứng dụng cho màn hình lớn hơn, hãy tận dụng tối đa không gian bổ sung này.
Trong ví dụ về ứng dụng Reply và Rally, các ứng dụng này áp dụng nhiều phương pháp khác nhau để tận dụng kích thước màn hình lớn hơn. Reply (Trả lời) thêm khoảng trống để có giao diện gọn gàng hơn, trong khi Rally (Tập hợp) hiển thị nhiều dữ liệu hơn để giảm số lần di chuyển và nhấn.
Bạn nên bắt đầu bằng cách xem xét những thứ có thể bị ẩn đối với người dùng và cách bạn có thể hiển thị những thứ đó. Ví dụ: bạn có thể xem thêm thông tin về một mục, hiển thị các trình đơn có thể bị ẩn sau thao tác nhấp chuột phải hoặc nhấn và giữ, hoặc xem các lựa chọn điều hướng khác hoặc chi tiết hơn khi có một vùng điều hướng lớn hơn ở bên trái. Đây là những điểm cải thiện lớn về khả năng sử dụng, có thể cải thiện trải nghiệm người dùng và mang lại cảm giác giống như trên máy tính cho ứng dụng của bạn mà không cần thiết kế lại hoàn toàn trải nghiệm hiện tại.
Dưới đây là một số đề xuất cho ứng dụng của bạn:
- Thương hiệu của bạn sẽ quyết định hướng đi khi bạn nghĩ về những kích thước màn hình khác nhau này. Việc quyết định ưu tiên và hiển thị nội dung nào cho người dùng phụ thuộc vào loại hành trình người dùng hiện có và các tính năng được sử dụng phổ biến nhất. Để lấy cảm hứng, hãy xem Nghiên cứu về Material và xem cách mỗi sản phẩm phản hồi khác nhau trên màn hình lớn hơn.
- Hãy nghĩ về cách thiết kế ứng dụng của bạn nên hoạt động bằng cách sử dụng một hệ thống lưới thích ứng, cũng như cách nội dung, hoạt động điều hướng và các lựa chọn nên di chuyển khi bạn có không gian màn hình lớn hơn.
- Quyết định kích thước màn hình mà bạn sẽ sử dụng một bố cục khác, sau đó cung cấp các bố cục khác nhau trong các nhóm kích thước cửa sổ thích hợp (chẳng hạn như lớn/rất lớn) hoặc chiều rộng cửa sổ tối thiểu (chẳng hạn như sw600dp/sw720). Hãy nhớ rằng khi bạn chuyển sang những bố cục này, ngữ cảnh tổng thể mà người dùng đang ở trong đó sẽ không thay đổi và bạn nên cố gắng giữ lại tất cả trạng thái của người dùng trong khi chuyển đổi giữa các bố cục (vị trí cuộn, văn bản đang được viết, v.v.)
Sử dụng những thành phần được thiết kế cho màn hình có mật độ điểm ảnh cao hơn và màn hình lớn hơn
Để ứng dụng của bạn trông đẹp nhất, hãy cung cấp biểu tượng và các thành phần bitmap khác cho từng mật độ trong phạm vi thường được ChromeOS hỗ trợ. Cụ thể, bạn nên thiết kế các biểu tượng cho thanh ứng dụng, thông báo và trình chạy theo nguyên tắc về biểu tượng, đồng thời cung cấp các biểu tượng này ở định dạng vectơ để chúng có thể điều chỉnh kích thước một cách linh hoạt trên nhiều màn hình mà ứng dụng của bạn sẽ xuất hiện.
Để biết thêm thông tin về VectorDrawable và tài sản vectơ trên Android, hãy xem bài đăng này trên blog của Nick Butcher.
Điều chỉnh cỡ chữ và đích chạm
Để ứng dụng của bạn có thể dùng được trên ChromeOS và màn hình có mật độ điểm ảnh cao hơn, hãy điều chỉnh kích thước phông chữ và mục tiêu cảm ứng trong giao diện người dùng cho tất cả các cấu hình màn hình mà bạn đang nhắm đến. Bạn có thể điều chỉnh kích thước phông chữ thông qua các thuộc tính có thể tạo kiểu hoặc tài nguyên kích thước, đồng thời có thể điều chỉnh mục tiêu có thể chạm thông qua bố cục và bitmap có thể vẽ, như đã thảo luận trước đó.
Sau đây là một số điều cần cân nhắc:
- Văn bản không được quá lớn hoặc quá nhỏ trên các kích thước và mật độ màn hình lớn hơn. Đảm bảo rằng nhãn có kích thước phù hợp với các phần tử trên giao diện người dùng mà nhãn đó tương ứng và đảm bảo rằng không có dấu ngắt dòng không phù hợp trong nhãn, tiêu đề và các phần tử khác.
- Kích thước mục tiêu có thể chạm được đề xuất cho các phần tử trên màn hình là 48 dp. Bạn có thể cần điều chỉnh một số phần tử trong giao diện người dùng trên màn hình lớn hơn. Đọc thêm về Phương pháp tạo khoảng cách để tìm hiểu về đích chạm và khoảng cách giữa các mục khi kích thước màn hình thay đổi. Những đề xuất này cũng đáp ứng các nguyên tắc tối thiểu về khả năng hỗ trợ tiếp cận.
-
Nếu có thể, đối với các biểu tượng nhỏ hơn, hãy mở rộng vùng có thể nhấn lên hơn 48 dp bằng cách sử dụng
TouchDelegatehoặc chỉ cần căn giữa biểu tượng trong nút trong suốt.