Màu trên kính

Màu sắc cần xem xét màn hình, môi trường và nhận thức. Màu trên kính sử dụng một bảng màu tinh tế để hỗ trợ hành vi của màn hình cộng và tối ưu hoá cho sự thoải mái về thị giác. Bạn nên sử dụng màu sắc một cách thận trọng trên kính để hài hoà với thế giới thực, cho biết các hành động quan trọng, hiển thị hình ảnh hoặc cung cấp ý nghĩa ngữ nghĩa.

Màu đen trong suốt trên màn hình quang học nhìn xuyên qua. Hãy lưu ý điều này khi thiết kế vì màu tối sẽ trông xỉn hoặc trong suốt, nhưng bạn cũng có thể dùng màu tối để tạo chiều sâu.

Phối màu

Bảng phối màu của kính (tập hợp các mã màu hoặc vai trò để tạo giao diện màu cho ứng dụng) bao gồm 3 vai trò nhấn, 4 vai trò bề mặt (hoặc vai trò trung tính) và các vai trò tương ứng. Các vai trò màu sắc tương tự như vai trò trong bảng phối màu trên thiết bị di động và nên được sử dụng theo cách tương tự.

Các phần tử thiết kế phải được neo vào cuối khung hình.

Bạn có thể dùng màu nhấn cho màu sắc phù hợp để làm nổi bật nhưng với mức độ hạn chế.

Sử dụng văn bản màu trắng cho hầu hết nội dung văn bản. Bạn có thể dùng màu phông chữ cho văn bản được nhấn mạnh.
Sử dụng văn bản có màu cho tất cả nội dung.

Tuỳ chỉnh màu

Khi tuỳ chỉnh màu sắc cho kính, bạn cần đảm bảo giảm thiểu tối đa tình trạng cản trở tầm nhìn và hài hoà với thế giới thực, đồng thời ưu tiên khả năng đọc trong nhiều điều kiện ánh sáng. Điều này bao gồm việc hiệu chỉnh màu sắc một cách cẩn thận để cân bằng độ sáng với độ bão hoà, đảm bảo nổi bật để dễ đọc trong khi vẫn giữ đủ độ bão hoà để có thể phân biệt ngay lập tức. Bạn có thể tuỳ chỉnh màu chính để sử dụng màu tương tác chính hoặc màu thương hiệu của bạn. Hãy cân nhắc độ tương phản, độ rực màu và mức tiêu thụ điện năng của màu đã chọn.

Các phần tử thiết kế phải được neo vào cuối khung hình.

Màu sắc thương hiệu và màu sắc ngữ nghĩa được tối ưu hoá

Những màu sắc thể hiện thương hiệu, hành động hoặc cảnh báo hệ thống phải:

  • Đủ sáng để dễ đọc
  • Đủ độ bão hoà để có thể phân biệt được màu sắc

Mức sử dụng nguồn

Một số màu tiêu thụ nhiều điện năng hơn và toả nhiều nhiệt hơn so với những màu khác. Màu xanh lục tiêu thụ ít điện năng nhất, màu xanh dương tiêu thụ nhiều điện năng nhất khi so sánh các màu có tông màu tương đương như bạn thấy ở bên phải. Giảm thiểu số lượng pixel bạn bật sáng. Màn hình càng sáng thì màn hình càng nóng. Đừng lấp đầy màn hình bằng màu trắng, vì điều này có thể gây ra hiện tượng giảm nhiệt.

Các phần tử thiết kế phải được neo vào cuối khung hình.

Hãy xem xét độ tương phản giữa tất cả các nền mà người dùng sẽ gặp phải.
Độ tương phản quá thấp cho các phần tử trên giao diện người dùng trên nhiều nền, điều này có thể gây mỏi mắt và khó đọc.
Để có đủ độ tương phản trên mọi nền, bạn cần có độ chênh lệch tương phản là 70 (7:1) về tông màu của màu nền trước và màu nền sau. Bạn có thể thử nghiệm bằng cách đặt thiết kế của mình ở chế độ hoà trộn màn hình.
Dùng màu khử bão hoà.
Sử dụng màu sắc quá bão hoà. Chúng có thể không hiển thị đúng cách và làm giảm khả năng đọc.

Bạn nên tránh sử dụng các bề mặt được tuỳ chỉnh.

Các phần tử thiết kế phải được neo vào cuối khung hình.

Màu vùng chứa tối

Nhìn chung, các vùng chứa phải tập trung vào việc hiển thị nội dung bên trong mà không gây xao nhãng:

  • Bề mặt phải có màu đen để có độ tương phản cao nhất
  • Đường viền phải dễ thấy nhưng không quá nổi bật

Sử dụng các bề mặt tối và nội dung tươi sáng.
Sử dụng các bề mặt sáng hoặc có màu.

Bạn có thể tuỳ chỉnh đường viền để thêm thương hiệu hoặc giao diện người dùng biểu cảm.

Dùng màu mặc định. Những thành phần này đã được tối ưu hoá cao cho màn hình kính.
Sử dụng nhiều màu viền.

Hãy cẩn thận và điều chỉnh màu tuỳ chỉnh giữa đường viền trạng thái mặc định và đường viền trạng thái tiêu điểm.

Các phần tử thiết kế phải được neo vào cuối khung hình. Tuỳ chỉnh tiêu điểm đường viền bằng màu xanh dương: trạng thái tiêu điểm nổi bật được tạo thành từ 2 đường viền, màu sắc được áp dụng cho lớp 2 để làm nổi bật trạng thái tiêu điểm.