Trang này được dịch bởi Cloud Translation API.

Màu

Nền tảng của chiến lược màu sắc trên Android Automotive OS là ý tưởng “xây dựng từ màu đen”. Màu giao diện cơ bản trên nền đen giúp mang lại trải nghiệm nhất quán hơn cho người dùng, mà không có thay đổi lớn giữa giao diện ngày và đêm.

Việc xây dựng từ màu đen cũng đảm bảo sự phù hợp tốt hơn với phần cứng, vì vật liệu tối thường được sử dụng trong nội thất ô tô và trang tổng quan.

Xem nhanh hướng dẫn (TL;DR)

Xây dựng các lựa chọn màu từ màu đen để hỗ trợ cả lái xe ban ngày và ban đêm
Duy trì tỷ lệ tương phản tối thiểu là 4,5:1 giữa nền và biểu tượng hoặc văn bản

Dùng màu ở mức tối thiểu, có mục đích
Hiển thị độ cao qua thang màu xám
Sử dụng độ trong suốt và độ mờ để định hướng tiêu điểm bằng hình ảnh

Bảng màu và độ dốc

Giao diện tối của giao diện Android Automotive OS dựa trên bảng màu xám. Lý tưởng nhất là các màu bổ sung phải có cường độ giảm, như trong các biến thể tối của màu trong bảng màu của Material Design.

Phần này bao gồm thông tin về bảng màu và độ mờ, cùng với biểu đồ cung cấp các giá trị thang màu xám cho độ cao liên kết với từng thành phần.

Material Design

Màu sắc và bảng màu

Bảng thang màu xám của Android Automotive OS

Bảng điều khiển thang màu xám của Android Automotive OS được dùng cho các phần tử như văn bản và biểu tượng. Bảng màu này được thiết kế phù hợp với các yêu cầu riêng của môi trường lái xe.

Bảng này cần đủ đa dạng để:

Bao gồm tất cả các trường hợp sử dụng khác nhau của giao diện người dùng giao diện tối
Cung cấp phạm vi đủ để xác định hệ thống phân cấp thông qua sự khác biệt về sắc độ

bảng màu xám xám — Bảng màu này là bảng màu chính của Android Automotive OS, hỗ trợ giao diện tối của giao diện này.

Những khác biệt về sắc độ tạo ra ảo ảnh về chiều sâu ngay cả trên nền đen chân thực, nơi không thể nhận thấy bóng. Để cung cấp đủ sự khác biệt về sắc độ, bảng màu thang màu xám của Android Automotive OS có màu xám nằm giữa. Màu xám Material Design bắt đầu từ màu xám 900 tiếp cận màu sáng hơn quá nhanh; màu hai bước sáng hơn sẽ là màu xám 700, màu quá sáng đối với bối cảnh tự động.

Biểu đồ độ cao thành phần — Biểu đồ này hiển thị các độ cao mà tại đó các thành phần khác nhau nghỉ ngơi. Mỗi độ cao có một giá trị màu xám tương ứng.

Mức độ thang màu xám của chế độ ban ngày và ban đêm — Biểu đồ này hiển thị các giá trị màu xám liên quan đến nhiều mức độ cao trong chế độ ban ngày và ban đêm

Màu nhấn

Ngoài bảng màu thang màu xám ở cốt lõi của giao diện Android Automotive OS, các màu khác có thể được dùng một cách hạn chế cho các mục đích như vẽ tiêu điểm.

Hiện tại, hệ điều hành Android Automotive có một màu nhấn chính thức, là màu xanh dương trong thư viện hỗ trợ, có tên là "ô tô nổi bật". Để tăng độ bão hòa và rung, màu xanh lam này hơi dịch chuyển từ màu xanh tiêu chuẩn của Google. Sự thay đổi này giúp các màu ngồi thoải mái hơn trên bề mặt tối.

Màu “màu nhấn của ô tô” trong hệ điều hành Android Automotive là màu bão hoà hơn so với màu xanh dương tiêu chuẩn của Google, được thiết kế để hoạt động tốt trong giao diện tối khi lái xe trong cả ngày và đêm.

Biểu đồ về độ mờ

Độ trong suốt truyền tải cảm giác về chiều sâu và củng cố mô hình không gian Material Design. Để sử dụng hiệu quả độ trong suốt, hãy chọn giá trị độ mờ tối hoặc trắng dựa trên trường hợp sử dụng của bạn.

Giá trị độ mờ tối

Trường hợp sử dụng phổ biến nhất cho các giá trị độ mờ tối là tạo ra các lớp phủ (lớp phủ).

Giá trị độ mờ màu trắng

Các giá trị này chủ yếu được sử dụng trên văn bản. Hiệu ứng này đặc biệt hiệu quả khi màu nền. Sử dụng nền màu xám đậm trên nền tối, có vẻ quá bùn.

Để xem ví dụ về cách sử dụng độ mờ trong các lớp chế độ phân cấp và văn bản, hãy xem Hướng dẫn và ví dụ.

Độ tương phản

Để đáp ứng các nguyên tắc cơ bản về an toàn của Android Automotive OS, tỷ lệ tương phản giữa nền và biểu tượng hoặc văn bản phải ít nhất là 4,5:1. Để biết thông tin chi tiết về cách tỷ lệ tương phản áp dụng cho một số thành phần cụ thể trên giao diện người dùng của ô tô, hãy xem bài viết Tạo nội dung dễ đọc.

Độ tương phản không — Đừng để độ tương phản giảm xuống dưới 4,5:1, để giảm an toàn cho người lái xe

Hướng dẫn và ví dụ

Giao diện người dùng tối màu của Android Automotive OS rõ ràng, đơn giản và có ít màu sắc. Ngoài việc sử dụng màu sắc, tông màu và độ mờ phù hợp cho các thành phần trên giao diện người dùng (xem Bảng chế độ xem và bảng chuyển tiếp), bạn cần phải đảm bảo rằng mỗi lần sử dụng màu sắc và chuyển màu đều có mục đích.

Phần này cung cấp hướng dẫn và ví dụ về cách áp dụng độ trong suốt, độ mờ và màu sắc nhằm đạt được nhiều mục tiêu khác nhau. Các mục tiêu này bao gồm:

Làm mờ nền
Duy trì sự nhất quán
Thiết lập một hệ phân cấp hình ảnh thu hút sự chú ý của người dùng vào các hành động chính.
Phân biệt các thực thể trong danh sách

Màn hình bị che khuất có màn che

Màn nền toàn màn hình (lớp phủ) dùng để che khuất các nền phía sau các thành phần gây rối, chẳng hạn như hộp thoại yêu cầu người dùng thực hiện hành động. Một phần màn hình được dùng để thu hút sự chú ý vào quá trình chuyển đổi của các thành phần như thông báo.

Toàn màn hình ở chế độ ban ngày — Toàn bộ màn hình (thẻ hộp thoại phía sau) ở chế độ ban ngày

Một màn đen ở chế độ ban đêm — Toàn bộ màn hình phía sau (thẻ hộp thoại phía sau) ở chế độ ban đêm

Một phần màn hình ở chế độ ban ngày — Một phần (thông báo phía sau) ở chế độ ban ngày

Màn nền một phần ở chế độ ban đêm — Một phần (thông báo phía sau) ở chế độ ban đêm

Duy trì sự nhất quán với màu sắc

Màu sắc là tín hiệu mạnh mẽ để củng cố bộ nhớ và nhận dạng. Sử dụng thành phần này để tạo trải nghiệm nhất quán giữa các màn hình.

Nhận dạng màu hình ảnh — Duy trì độ liên tục của hình ảnh bằng cách sử dụng cùng một màu cho một mục trên nhiều chế độ xem, chẳng hạn như màu xanh lục được sử dụng cho các chế độ xem điều hướng từng chặng tại đây

Màu sắc liên tục — Sử dụng màu sắc để kết nối các thành phần và chức năng có liên quan một cách trực quan, chẳng hạn như các lời kêu gọi hành động đỏ được treo tại đây

Màu nhấn liên tục của ứng dụng — Sử dụng màu chủ đạo của ảnh bìa đĩa nhạc hoặc màu được chỉ định của ứng dụng trên các thành phần có liên quan làm thành phần hình ảnh liên tục. Tại đây, vòng tròn xung quanh nút tạm dừng được làm nổi bật với màu xanh lục của Spotify.

Hạn chế sử dụng màu — Không sử dụng màu sắc khác nhau để phân biệt tuỳ ý các thành phần lặp lại trong một màn hình. Hãy thận trọng khi sử dụng màu sắc khi chúng không làm tăng thêm giá trị – như trong trường hợp với những đường viền màu này xung quanh thẻ tóm tắt, vì vậy sẽ sao chép màu của biểu tượng ứng dụng.

Thiết lập một hệ phân cấp hình ảnh

Sử dụng giá trị độ mờ màu trắng để tạo hệ phân cấp hình ảnh nhất quán và mạnh mẽ. Các giá trị độ mờ 88, 72 và 56 chỉ chứa độ tương phản vừa đủ để đáp ứng các yêu cầu về khả năng tiếp cận, đồng thời tạo ra một môi trường đọc thoải mái trên nền tối. Sử dụng độ mờ 96% cho tất cả các màu trắng đối với chế độ ban đêm.

Ví dụ về độ mờ và độ tương phản để duy trì hệ thống phân cấp hình ảnh — Sử dụng các giá trị độ mờ và độ tương phản khác nhau để duy trì hệ thống phân cấp hình ảnh.

Hạn chế độ mờ và độ tương phản — Không lạm dụng giá trị độ mờ hoặc độ tương phản đầy đủ bằng cách áp dụng chúng cho quá nhiều phần tử. Cần có sự tương phản trong giá trị độ mờ để phân biệt thông tin chính và thông tin phụ.