Hệ thống màu Wear Material 3 Expressive sử dụng 3 lớp điểm nhấn (chính, phụ, thứ ba) cho các thành phần chính và 2 lớp nền trung tính. Mỗi vai trò cung cấp một loạt các giá trị có độ tương phản nhất quán, cho phép kết hợp màu sắc biểu cảm nhưng dễ tiếp cận để mang lại trải nghiệm hợp nhất trên mọi giao diện.
Vai trò của màu sắc là gì?
Vai trò của màu sắc giống như "số" trong một bức tranh sơn theo số. Đây là mô liên kết giữa các thành phần của giao diện người dùng và màu sắc của các thành phần đó.
- Vai trò của màu được liên kết với các thành phần Material: Bạn sẽ sử dụng các vai trò màu này cho dù đang sử dụng bảng phối màu cơ sở tĩnh hay màu động. Nếu sản phẩm của bạn chứa các thành phần tuỳ chỉnh, thì bạn cần ánh xạ đúng cách các thành phần đó đến nhóm vai trò màu này.
- Vai trò của màu sắc hỗ trợ khả năng hỗ trợ tiếp cận: Hệ thống màu được xây dựng dựa trên các cặp màu dễ tiếp cận hơn. Các cặp màu này có độ tương phản màu tối thiểu là 3:1.
- Vai trò của màu được mã hoá: Vai trò được triển khai trong thiết kế và mã thông qua mã thông báo. Mã hiệu thiết kế (design token) là một quyết định nhỏ về mặt thiết kế, có thể sử dụng lại và tạo nên phong cách hình ảnh của hệ thống thiết kế.
Các thuật ngữ thiết yếu
Dưới đây là các thuật ngữ chính mà bạn sẽ thấy trong tên của vai trò màu:
- Surface (Mặt): Vai trò dùng cho nền và các khu vực lớn, ít được nhấn mạnh trên màn hình.
- Chính, phụ, trung gian: Vai trò của màu nhấn dùng để làm nổi bật hoặc giảm bớt sự chú ý đến các thành phần trên nền trước.
- Vùng chứa: Vai trò dùng làm màu tô cho các phần tử trên nền trước như nút. Bạn không nên sử dụng các màu này cho văn bản hoặc biểu tượng.
- Bật: Các vai trò bắt đầu bằng thuật ngữ này cho biết màu sắc của văn bản hoặc biểu tượng trên màu mẹ được ghép nối. Ví dụ: on-primary được dùng cho văn bản và biểu tượng so với màu nền chính.
- Biến thể: Các vai trò kết thúc bằng thuật ngữ này cung cấp một lựa chọn thay thế ít nhấn mạnh hơn cho cặp không phải biến thể. Ví dụ: biến thể đường viền là phiên bản màu đường viền ít được nhấn mạnh hơn.
Vai trò chính
Vai trò chính được dùng cho các thành phần chính trên giao diện người dùng, chẳng hạn như các nút Chụm cạnh, nút nổi bật, trạng thái đang hoạt động và biểu tượng trên kiểu nút theo tông màu.
Chính
- Chính
- Trên màu chính
Sử dụng vai trò Chính cho các thao tác quan trọng nhất trong giao diện người dùng, chẳng hạn như các nút chính hoặc lời kêu gọi hành động. Màu sắc này phải nổi bật và dễ nhận biết ngay lập tức để hướng người dùng đến các hoạt động tương tác chính.
Primary-Dim
- Primary-Dim
- Trên màu chính
Vai trò làm mờ thường được dùng cho các phần tử cần phân biệt rõ ràng về mặt hình ảnh với hành động chính nhưng không yêu cầu người dùng chú ý hoặc tương tác ngay lập tức.
Primary-Container
- Vùng chứa chính
- On-Primary-Container
Áp dụng Vùng chứa chính cho các phần tử nền như thẻ hoặc cửa sổ bật lên để làm nổi bật các phần hoặc trạng thái đã chọn. Nó giúp thu hút sự chú ý đến nội dung quan trọng hoặc các hoạt động đang diễn ra trong giao diện người dùng.
Vai trò phụ
Vai trò phụ được dùng cho các thành phần chính trên giao diện người dùng. Các thành phần này không quan trọng bằng vai trò chính nhưng vẫn cần phải nổi bật. Bạn có thể sử dụng cùng lúc màu chính và màu phụ trong bố cục để tạo sự khác biệt và tiêu điểm.
Phụ
- Cấp hai
- Trên màu cấp hai
Sử dụng vai trò Phụ để hỗ trợ các thao tác trong các khu vực có giao diện người dùng dày đặc, chẳng hạn như các nút phụ hoặc thao tác bổ sung. Lớp này duy trì khả năng hiển thị mà không làm lu mờ các phần tử chính trong bố cục phức tạp.
Secondary-Dim
- Secondary-Dim
- Cấp hai
Vai trò Secondary-Dim (Phụ – Giảm độ sáng) cung cấp độ tương phản dịu cho các phần tử thụ động ở các khu vực đông đúc. Màu này bổ sung cho màu phụ trong khi vẫn tạo chiều sâu tinh tế, giúp giao diện người dùng luôn gọn gàng và giúp người dùng điều hướng.
Secondary-Container
- Vùng chứa phụ
- On-Secondary-Container
Áp dụng Vùng chứa phụ để sắp xếp các phần tử phụ trong bố cục dày đặc. Lớp này tạo cấu trúc và phân tách, đảm bảo nội dung phụ có thể phân biệt được nhưng không chiếm ưu thế.
Vai trò phụ
Vai trò thứ ba được dùng cho các điểm nhấn tương phản để cân bằng màu chính và màu phụ hoặc gây sự chú ý đến một thành phần cụ thể, chẳng hạn như trường nhập. Vai trò phụ cũng có thể giúp cho biết thời điểm nội dung thay đổi hoặc cần nổi bật, chẳng hạn như khi đạt được một mục tiêu.
Bậc 3
- Tertiary
- Trên cấp ba
Vai trò phụ được dùng để thu hút sự chú ý đến các thành phần chính. Vai trò phụ đặc biệt hiệu quả đối với các thành phần cần nổi bật, chẳng hạn như huy hiệu, hình dán hoặc phần tử hành động đặc biệt.
Tertiary-Dim
- Tertiary-Dim
- Tertiary
Sử dụng vai trò Tertiary Dim (Làm mờ cấp ba) cho các nút hoặc hành động liên quan đến hành động cấp ba nhưng không yêu cầu tiêu điểm ngay lập tức.
Vùng chứa cấp ba
- Vùng chứa cấp ba
- Trên vùng chứa cấp ba
Áp dụng Vùng chứa phụ cho nền nhóm nội dung liên quan đến phụ, chẳng hạn như bộ sưu tập huy hiệu hoặc hình dán. Kiểu này làm nổi bật các thành phần phụ trong khi vẫn duy trì sự cân bằng và cấu trúc trong giao diện người dùng.
Vai trò ngữ nghĩa
Error-Red (Lỗi-Đỏ) được dùng để chỉ các vấn đề nghiêm trọng như lỗi, xoá và mọi vấn đề liên quan đến trường hợp khẩn cấp. Tính năng này được thiết kế để thu hút sự chú ý ngay lập tức đến các vấn đề hoặc cảnh báo, đảm bảo người dùng có thể nhanh chóng xác định những khía cạnh cần khắc phục. Tông màu Đỏ lỗi phải duy trì độ tương phản đủ để đáp ứng các tiêu chuẩn hỗ trợ tiếp cận, đảm bảo màu này hiển thị rõ ràng và dễ phân biệt với các màu trạng thái khác như cảnh báo hoặc thông báo thành công.
Lỗi
- Lỗi
- Khi xảy ra lỗi
Màu đỏ ngữ nghĩa nhưng hơi có màu sắc chủ đề, cho biết các thao tác xoá, đóng hoặc loại bỏ, chẳng hạn như Vuốt để hiển thị. Thêm làm một giải pháp thay thế vùng chứa ít đáng báo động và khẩn cấp hơn so với màu lỗi mờ.
Error-Dim
- Error-Dim
- Khi xảy ra lỗi
Màu đỏ ngữ nghĩa nhưng hơi có màu sắc chủ đề, cho biết lỗi có mức độ ưu tiên cao hoặc các hành động khẩn cấp, chẳng hạn như cảnh báo an toàn, lớp phủ hộp thoại không thành công hoặc nút dừng.
Error-Container
- Vùng chứa lỗi
- Vùng chứa On-Error
Màu vùng chứa ít nổi bật hơn, dành cho các thành phần sử dụng trạng thái lỗi. Cũng có thể cho biết trạng thái lỗi đang hoạt động có tính tương tác thấp hơn trạng thái đã điền, chẳng hạn như nút hoặc thẻ chia sẻ khẩn cấp đang hoạt động hoặc trên hộp thoại lớp phủ không thành công.
Vùng chứa bề mặt và độ nâng
Vùng chứa bề mặt đóng vai trò quan trọng trong việc xác định chiều sâu và độ cao trong giao diện người dùng, cung cấp cấu trúc và hệ phân cấp thông qua màu sắc, giúp phân biệt các thành phần dựa trên tầm quan trọng và khả năng tương tác của chúng.
Surface-Container-Low
- Surface-Container-Low
- Trên bề mặt
- On-Surface-Variant
Rất phù hợp với vùng chứa mở rộng cần nằm bên dưới Vùng chứa bề mặt, chẳng hạn như thẻ mở rộng trong Thông báo. Cũng có thể dùng cho các thẻ không tương tác, trong đó nội dung vẫn được hưởng lợi từ tính năng chứa.
Surface-Container
- Vùng chứa trên bề mặt
- Trên bề mặt
- On-Surface-Variant
Màu vùng chứa mặc định cho hầu hết các phần tử. Kiểu này cung cấp độ cao trung tính, vừa phải, phù hợp với các thành phần giao diện người dùng chung.
Surface-Container-High
- Surface-Container-High
- Trên bề mặt
- On-Surface-Variant
Lý tưởng cho các thành phần có mức độ nhấn mạnh cao cần nằm ở trên cùng hoặc kết hợp với Vùng chứa bề mặt. Màu này giúp tập trung và phân cấp các khu vực quan trọng trong giao diện người dùng.