Thanh trạng thái và thanh điều hướng cùng được gọi là thanh hệ thống. Chúng hiển thị các thông tin quan trọng như mức pin, thời gian và cảnh báo thông báo, đồng thời cung cấp khả năng tương tác trực tiếp với thiết bị từ bất cứ đâu.
Điều quan trọng là phải tính đến sự nổi bật của thanh hệ thống, cho dù bạn đang thiết kế giao diện người dùng cho các hoạt động tương tác với hệ điều hành Android, phương thức nhập hoặc các tính năng khác của thiết bị. Giữ thanh hệ thống ở trên cùng của hầu hết các lớp để đảm bảo chúng được tính.
Cướp lại bóng
Đưa thanh hệ thống vào thiết kế của bạn để tính đến vùng an toàn cho giao diện người dùng, hoạt động tương tác của hệ thống, phương thức nhập, vết cắt trên màn hình và các chức năng khác của thiết bị. Giữ thanh hệ thống ở lớp trên cùng để đảm bảo chúng được tính đến.
Nên: Làm cho các thanh hệ thống trở nên trong suốt và bố trí ứng dụng của bạn ở chế độ toàn màn hình, tiếp tục giao diện người dùng dưới các thanh để mang lại trải nghiệm tràn viền.
Nếu bạn không thể đặt cả hai thanh thành trong suốt, hãy đảm bảo màu của thanh khớp với màu của phần nội dung trong ứng dụng. Ví dụ: hãy khớp màu của thanh điều hướng ở dưới cùng với màu của thanh cử chỉ, và màu của thanh trạng thái trên cùng với màu nội dung.
Hình 2: Đảm bảo màu của thanh hệ thống khớp với màu nội dung của ứng dụng Tránh thêm các cử chỉ nhấn hoặc mục tiêu kéo trong các phần lồng ghép cử chỉ; những thao tác này xung đột với thao tác hiển thị tràn viền và thao tác bằng cử chỉ.
Hình 3: Các phần lồng ghép cử chỉ hệ thống. Tránh đặt các mục tiêu nhấn trong các khu vực này
Vẽ nội dung của bạn phía sau các thanh hệ thống
Tính năng hiển thị tràn viền cho phép Android vẽ giao diện người dùng dưới các thanh hệ thống để mang lại trải nghiệm sống động hơn. Bạn nên sử dụng định dạng hiển thị tràn viền vì việc làm cho thanh điều hướng trong suốt là yêu cầu phổ biến của người dùng. (Đọc về cách hỗ trợ nội dung hiển thị tràn viền).
Ứng dụng có thể giải quyết các trường hợp trùng lặp trong nội dung bằng cách phản ứng với các phần lồng ghép. Phần lồng ghép mô tả lượng nội dung ứng dụng cần được thêm vào để tránh chồng chéo với các phần của giao diện người dùng của Hệ điều hành Android như thanh điều hướng hoặc thanh trạng thái, hoặc với các tính năng trên thiết bị thực tế như vết cắt trên màn hình.
Hãy lưu ý các loại phần lồng ghép sau đây khi thiết kế các trường hợp sử dụng tràn viền:
- Phần lồng ghép thanh hệ thống áp dụng cho giao diện người dùng vừa có thể nhấn vừa không được bị các thanh hệ thống che khuất hình ảnh.
- Phần lồng ghép cử chỉ hệ thống áp dụng cho các khu vực thao tác bằng cử chỉ mà hệ thống sử dụng và được ưu tiên hơn ứng dụng của bạn.
Thanh trạng thái
Trên Android, thanh trạng thái chứa biểu tượng thông báo và biểu tượng hệ thống. Người dùng tương tác với thanh trạng thái bằng cách kéo thanh xuống để truy cập vào ngăn thông báo.
Thanh trạng thái có thể xuất hiện theo nhiều cách, tuỳ thuộc vào ngữ cảnh, thời gian trong ngày, giao diện hoặc lựa chọn ưu tiên do người dùng đặt và các tham số khác. Bạn cũng có thể đặt kiểu thanh trạng thái, như trong các ví dụ sau.
Hãy đảm bảo rằng nội dung ứng dụng trải rộng ra toàn bộ màn hình, bắt buộc phải tràn viền. Sử dụng thanh hệ thống trong suốt với nội dung tràn viền, như trong ví dụ sau.
Khi thông báo đến, một biểu tượng thường xuất hiện trên thanh trạng thái. Tín hiệu này báo cho người dùng biết rằng có nội dung trong ngăn thông báo. Đây có thể là biểu tượng ứng dụng hoặc biểu tượng đại diện cho kênh. Hãy xem phần Thiết kế thông báo.
Đặt kiểu thanh trạng thái
Tạo kiểu cho nền thanh trạng thái trong giao diện ứng dụng, bằng màu hoặc kiểu tuỳ chỉnh, cùng với tuỳ chọn cài đặt độ trong suốt và độ mờ.
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
Nếu đặt màu nền theo cách thủ công, bạn có thể tuỳ ý tạo kiểu cho nội dung trên thanh trạng thái là sáng hoặc tối để có độ tương phản tối ưu.
Vết cắt trên màn hình và thanh trạng thái
Vết cắt trên màn hình là một vùng trên một số thiết bị mở rộng vào bề mặt màn hình để tạo không gian cho các cảm biến mặt trước. Điều này có thể ảnh hưởng đến giao diện của thanh trạng thái. Vết cắt trên màn hình có thể khác nhau tuỳ theo nhà sản xuất.
Đọc về cách hỗ trợ vết cắt trên màn hình.
Thanh điều hướng
Android cho phép người dùng điều khiển việc đi theo chỉ dẫn bằng các chế độ điều khiển quay lại, trang chủ và tổng quan:
- Thao tác quay lại sẽ trực tiếp quay lại khung hiển thị trước đó.
- Màn hình chính chuyển ra khỏi ứng dụng và sang màn hình chính của thiết bị.
- Thẻ Tổng quan cho thấy các ứng dụng đang mở và mới mở gần đây.
Người dùng có thể chọn trong số nhiều cấu hình thanh điều hướng, bao gồm cả thao tác bằng cử chỉ (nên dùng) và thao tác bằng 3 nút.
Thao tác bằng cử chỉ
Ra mắt trong Android 10 (API cấp 29), thao tác bằng cử chỉ là kiểu điều hướng được đề xuất, mặc dù bạn không thể ghi đè lựa chọn ưu tiên của người dùng. Thao tác bằng cử chỉ không sử dụng các nút cho quay lại, màn hình chính và tổng quan, thay vào đó hiển thị một tay điều khiển cử chỉ duy nhất cho thành phần tương tác. Người dùng tương tác bằng cách vuốt từ mép trái hoặc mép phải của màn hình để tiến, lùi và lên từ cuối màn hình để chuyển đến màn hình chính. Thao tác vuốt lên và giữ sẽ mở ra phần tổng quan.
Thao tác bằng cử chỉ là một mẫu điều hướng dễ mở rộng hơn để thiết kế trên thiết bị di động và màn hình lớn hơn. Để mang lại trải nghiệm tốt nhất cho người dùng, hãy tính đến thao tác bằng cử chỉ bằng cách:
- Hỗ trợ nội dung tràn viền.
- Tránh thêm hoạt động tương tác hoặc đích chạm trong phần lồng ghép thao tác bằng cử chỉ.
Hãy đọc về cách triển khai thao tác bằng cử chỉ.
Thao tác bằng 3 nút
Cách thao tác bằng 3 nút gồm có 3 nút quay lại, nút màn hình chính và nút tổng quan.
Các biến thể khác của thanh điều hướng
Tuỳ thuộc vào phiên bản Android và thiết bị, người dùng có thể sử dụng các cấu hình khác cho thanh điều hướng. Ví dụ: thao tác bằng 2 nút sẽ cung cấp 2 nút để nhấn nút màn hình chính và nút quay lại.
Đặt kiểu điều hướng
Ví dụ sau đây cho thấy cách triển khai một kiểu điều hướng.
<style name="Theme.MyApp">
<item name="android:navigationBarColor">
@android:color/transparent
</item>
</style>
Android xử lý toàn bộ hoạt động bảo vệ hình ảnh của giao diện người dùng ở chế độ thao tác bằng cử chỉ hoặc trong các chế độ nút.
Chế độ thao tác bằng cử chỉ: Hệ thống áp dụng tính năng điều chỉnh màu động, trong đó nội dung của thanh hệ thống thay đổi màu dựa trên nội dung phía sau thanh hệ thống. Trong ví dụ sau, ô điều khiển trên thanh điều hướng sẽ chuyển sang màu tối nếu được đặt phía trên nội dung sáng và ngược lại.
Hình 13: Điều chỉnh màu động Chế độ nút: Hệ thống áp dụng một màn hình trong suốt phía sau thanh hệ thống (đối với API cấp 29 trở lên) hoặc thanh hệ thống trong suốt (đối với API cấp 28 trở xuống).
Hình 14: Điều chỉnh màu động, trong đó thanh hệ thống thay đổi màu dựa trên nội dung phía sau
Bàn phím và điều hướng
Mỗi loại điều hướng phản ứng thích hợp với bàn phím ảo để cho phép người dùng thực hiện các thao tác như đóng hoặc thậm chí thay đổi loại bàn phím. Để đảm bảo quá trình chuyển đổi bàn phím diễn ra suôn sẻ, để quá trình chuyển đổi diễn ra suôn sẻ nhằm đồng bộ hoá quá trình chuyển đổi của ứng dụng bằng cách trượt lên và xuống từ cuối màn hình, hãy sử dụng WindowInsetsAnimationCompat.
Chế độ hiển thị tối đa
Bạn có thể ẩn thanh hệ thống khi cần trải nghiệm toàn màn hình, chẳng hạn như khi người dùng đang xem phim. Người dùng vẫn có thể nhấn để hiện thanh hệ thống và giao diện người dùng để di chuyển hoặc tương tác với các chế độ điều khiển hệ thống. Tìm hiểu thêm về cách thiết kế cho chế độ toàn màn hình hoặc đọc về cách ẩn thanh hệ thống cho chế độ hiển thị tối đa.