Thanh trạng thái, thanh chú thích và thanh điều hướng là thanh hệ thống. Các thanh này hiển thị 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ị ở mọi nơi.
Luôn tính đến sự hiện diện và mức độ nổi bật của các thanh hệ thống, cho dù bạn đang thiết kế bố cục, phương thức nhập hay các tính năng khác của thiết bị.
Cướp lại bóng
Đưa các thanh hệ thống vào bố cục của bạn cho nhiều kích thước màn hình và hệ số hình dạng. Tính đến các vùng an toàn của giao diện người dùng, hoạt động tương tác với hệ thống, phương thức nhập, vết cắt trên màn hình, thanh trạng thái, thanh chú thích, thanh điều hướng và các tính năng khác của thiết bị.
Giữ cho trạng thái hệ thống và thanh điều hướng trong suốt hoặc trong mờ, đồng thời vẽ nội dung phía sau các thanh này để tràn viền.
Sử dụng
WindowInsetsđể xử lý đúng cách các phần xâm nhập của thanh hệ thống và đảm bảo nội dung của bạn không bị che khuất trong bố cục thích ứng.Sử dụng bố cục chính tắc, giúp sử dụng hiệu quả không gian màn hình.
Thanh trạng thái
Thanh trạng thái chứa các 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 xuống để truy cập vào ngăn thông báo. Kiểu thanh trạng thái có thể trong suốt hoặc trong mờ.
Biểu tượng thanh trạng thái
Biểu tượng thanh trạng thái có thể xuất hiện theo nhiều cách tuỳ thuộc vào bối cảnh, thời gian trong ngày, tuỳ chọn hoặc giao diện do người dùng đặt và các tham số khác. Để biết thêm thông tin, hãy xem bài viết Biểu tượng thanh hệ thống.
Khi một thông báo đến, một biểu tượng thường xuất hiện trong thanh trạng thái. Điều này báo hiệu cho người dùng rằng có nội dung cần xem 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. Xem bài viết Thông báo thiết kế.
Đặt kiểu thanh trạng thái
Làm cho thanh trạng thái trong suốt hoặc trong mờ để đảm bảo nội dung ứng dụng của bạn trải rộng trên toàn bộ màn hình. Sau đó, hãy đặt kiểu cho các biểu tượng thanh hệ thống để các biểu tượng có độ tương phản phù hợp.
Tính năng tràn viền được thực thi trên Android 15, giúp thanh trạng thái trong suốt theo mặc định. Gọi enableEdgeToEdge() để đảm bảo khả năng tương thích ngược.
Trong hình ảnh bên trái sau đây, thanh trạng thái trong suốt và nền màu xanh lục của TopAppBar nằm phía sau thanh trạng thái.
Thanh trạng thái trong suốt là lý tưởng khi giao diện người dùng không xuất hiện bên dưới thanh trạng thái hoặc một hình ảnh được vẽ bên dưới thanh trạng thái. Thanh trạng thái trong mờ là lý tưởng khi giao diện người dùng cuộn bên dưới thanh trạng thái. Để biết thêm thông tin về tính năng bảo vệ độ dốc , hãy xem bài viết Thiết kế tràn viền.
Điều hướng
Android cho phép người dùng kiểm soát thao tác điều hướng bằng các nút quay lại, màn hình chính và tổng quan:
- Nút Quay lại sẽ đưa bạn trở về chế độ xem trước đó.
- Nút Màn hình chính sẽ chuyển bạn ra khỏi ứng dụng và đến màn hình chính của thiết bị.
- Nút Tổng quan cho thấy các ứng dụng đang hoạt động và các ứng dụng gần đây chưa bị loại bỏ.
Người dùng có thể chọn trong số nhiều cấu hình điều hướng, bao gồm cả thao tác bằng cử chỉ và điều hướng thích ứng. Để mang lại trải nghiệm tối ưu cho người dùng, hãy tính đến nhiều loại thao tác điều hướng.
Điều hướng bằng cử chỉ
Điều hướng bằng cử chỉ không sử dụng các nút quay lại, màn hình chính và tổng quan, mà thay vào đó, thao tác này cho thấy một tay cầm cử chỉ duy nhất để tạo điều kiện. 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 để quay lại và vuốt lên từ dưới cùng để chuyển đến màn hình chính. Vuốt lên và giữ sẽ mở chế độ tổng quan.
Điều hướng bằng cử chỉ là một mẫu điều hướng có khả năng 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 người dùng tốt nhất, hãy tính đến điều hướng bằng cử chỉ bằng cách thực hiện như sau:
- Hỗ trợ nội dung tràn viền.
- Tránh thêm các hoạt động tương tác hoặc đích chạm trong phần lồng ghép điều hướng bằng cử chỉ.
Để biết thêm thông tin, hãy xem bài viết Thêm tính năng hỗ trợ cho điều hướng bằng cử chỉ.
Điều hướng thích ứng
Một mẫu điều hướng phổ biến khác trên Android là chuyển đổi giữa thanh điều hướng dọc và thanh điều hướng tuỳ thuộc vào lớp kích thước cửa sổ của màn hình. Các thành phần điều hướng thích ứng trong Jetpack Compose xử lý nhiều hệ số hình dạng, đồng thời ngăn các thanh hệ thống can thiệp vào bố cục của các thành phần điều hướng.
Trong bố cục thích ứng, hãy cân nhắc cách các thanh hệ thống có thể hoạt động hoặc được tạo kiểu khác nhau trong nhiều bối cảnh, chẳng hạn như kích thước cửa sổ nhỏ gọn hoặc mở rộng hoặc các tư thế gập khác nhau.
Để biết thêm thông tin, hãy xem bài viết Xây dựng thao tác điều hướng thích ứng.
Biểu tượng điều hướng
Biểu tượng điều hướng cũng có thể xuất hiện theo nhiều cách tuỳ thuộc vào tuỳ chọn hoặc giao diện do người dùng đặt. Để biết thêm thông tin, hãy xem bài viết Biểu tượng thanh hệ thống.
Đặt kiểu điều hướng
Android xử lý tính năng bảo vệ trực quan của giao diện người dùng ở chế độ điều hướng bằng cử chỉ và ở các chế độ nút. Hệ thống áp dụng tính năng điều chỉnh màu động, trong đó nội dung của các thanh hệ thống thay đổi màu dựa trên nội dung phía sau.
Chế độ điều hướng bằng cử chỉ
Sau khi nhắm đến Android 15 hoặc gọi enableEdgeToEdge trên Activity, hệ thống sẽ vẽ một thanh điều hướng bằng cử chỉ trong suốt và áp dụng tính năng điều chỉnh màu động. Trong ví dụ sau, tay cầm trong 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.
Bạn nên luôn sử dụng thanh điều hướng bằng cử chỉ trong suốt.
Nên
Không nên
Chế độ nút
Sau khi nhắm đến Android 15 hoặc gọi enableEdgeToEdge trên Activity, hệ thống sẽ áp dụng một lớp phủ trong mờ phía sau các thanh điều hướng bằng nút. Bạn có thể xoá lớp phủ này bằng cách đặt Window.setNavigationBarContrastEnforced() thành false.
Sử dụng thanh điều hướng bằng 3 nút trong suốt khi có thanh ứng dụng ở dưới cùng hoặc thanh điều hướng ứng dụng ở dưới cùng, hoặc khi giao diện người dùng không cuộn bên dưới thanh điều hướng bằng 3 nút. Để có thanh điều hướng trong suốt, hãy đặt Window.setNavigationBarContrastEnforced() thành false và thêm khoảng đệm cho các thanh ứng dụng ở dưới cùng để vẽ bên dưới các thanh điều hướng hệ thống, như trong hình 7, 8 và 9. Xem
Tính năng bảo vệ thanh hệ thống để biết thêm thông tin.
Sử dụng thanh điều hướng bằng 3 nút trong mờ cho nội dung cuộn. Để biết thêm thông tin về các điểm cần cân nhắc đối với thanh điều hướng trong mờ, hãy xem bài viết Thiết kế tràn viền.
Bàn phím và thao tác điều hướng
Mỗi loại thao tác điều hướng phản ứng phù hợp với bàn phím ảo để cho phép
người dùng thực hiện các hành động như loại bỏ hoặc thậm chí thay đổi loại bàn phím. Để đảm bảo quá trình chuyển đổi diễn ra suôn sẻ, đồng bộ hoá quá trình chuyển đổi của ứng dụng
với cách bàn phím trượt lên và xuống từ cuối màn hình, hãy sử dụng
WindowInsetsAnimationCompat.
Bố cục
Bố cục thích ứng tối ưu hoá không gian hiển thị có sẵn. Các bố cục này sắp xếp giao diện người dùng của ứng dụng bằng cách di chuyển nội dung vào các ngăn thứ cấp hoặc thứ ba.
Khi thiết kế bố cục thích ứng, hãy cân nhắc cách các thanh hệ thống tương tác với nội dung của bạn. Sử dụng WindowInsets để đảm bảo giao diện người dùng của bạn không bị che khuất bởi các thanh hệ thống trên các màn hình như màn hình lớn, thiết bị có thể gập lại và cửa sổ ứng dụng ở chế độ nhiều cửa sổ và chế độ cửa sổ kiểu máy tính.
Khi ứng dụng của bạn hiển thị tràn viền, hãy xác minh rằng nội dung và các thành phần điều khiển không bị che khuất bởi giao diện người dùng hệ thống. Ví dụ: nếu thanh điều hướng che khuất một nút, thì người dùng có thể không nhấp được vào nút đó.
Để biết thêm thông tin, hãy xem bài viết Bố cục chính tắc.
Vết cắt trên màn hình
Vết cắt trên màn hình là một vùng trên một số thiết bị kéo dài vào bề mặt màn hình để cung cấp không gian cho các cảm biến hướng về phía trước. Vết cắt trên màn hình có thể khác nhau tuỳ thuộc vào nhà sản xuất. Hãy cân nhắc cách vết cắt trên màn hình sẽ tương tác với nội dung, hướng và tính năng tràn viền.
Chế độ hiển thị tối đa
Bạn có thể ẩn các thanh hệ thống khi cần có 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 thị các thanh hệ thống và thao tác hoặc tương tác với các thành phần điều khiển hệ thống. Để biết thêm thông tin, hãy xem bài viết Nội dung hiển thị tối đa và Ẩn các thanh hệ thống cho chế độ hiển thị tối đa.