1. Giới thiệu
Lần cập nhật gần đây nhất: 11/5/2022
Hệ thống màu Material 3 tạo ra bảng phối màu dễ tiếp cận bằng thuật toán màu động, nhưng khả năng hỗ trợ tiếp cận có ý nghĩa gì đối với màu sắc? Hệ thống màu mới của Material Design tạo ra bảng phối màu dễ tiếp cận bằng cách nào và những công cụ nào hữu ích?
Kiến thức bạn sẽ học được
- Mối liên hệ của màu sắc với các nguyên tắc về khả năng hỗ trợ tiếp cận và độ tương phản.
- Cách công cụ có thể giúp tạo bảng phối màu dễ tiếp cận, chỉnh sửa và kiểm tra độ tương phản.
Điều kiện tiên quyết
Đối với phòng thí nghiệm này, chúng ta sẽ xây dựng dựa trên một số khái niệm thiết kế cơ bản.
- Có kiến thức về bảng phối màu và vai trò hiện tại trên Android.
- Kiến thức về Figma.
Bạn cần có
- Tài khoản Figma
- Tệp Designlab trong Figma
- Trình bổ trợ Figma Material Theme Builder (Trình tạo giao diện Material)
2. Bắt đầu
Thiết lập
Để bắt đầu, bạn cần truy cập vào tệp Figma Designlab. Mọi thứ bạn cần cho lớp học này đều có trong tệp Figma đó. Bạn có thể tải xuống và nhập tệp hoặc sao chép tệp này từ cộng đồng Figma.
Trước tiên, hãy đăng nhập vào Figma hoặc tạo một tài khoản.
Bản sao của Cộng đồng Figma
Chuyển đến tệp Thiết kế với màu sắc dễ tiếp cận hoặc tìm tệp Thiết kế bằng màu sắc dễ tiếp cận trong Cộng đồngFigma. Nhấp vào Sao chép ở góc trên cùng bên phải để sao chép tệp đó vào các tệp.
Bố cục tệp
Khi bạn xem qua tệp, hãy chú ý rằng tệp nằm độc lập, bắt đầu với phần giới thiệu. Mỗi phần được chia thành một hàng gồm các bảng minh hoạ được liên kết với nhau, trong đó có một số khái niệm chính cho phần này, sau đó là các bài tập. Các phần và bài tập xây dựng lẫn nhau và phải được hoàn thành tuần tự.
Lớp học lập trình này sẽ hướng dẫn bạn về các khái niệm và bài tập đó một cách chi tiết hơn. Hãy cùng tham gia lớp học lập trình này để tìm hiểu thêm về các tính năng mới của Material You!
Bắt đầu từ bảng minh hoạ Giới thiệu, có các nút liên kết các bảng vẽ với nhau theo thứ tự. Để truy cập vào đường liên kết, hãy nhấp vào nút đó.
Cài đặt trình bổ trợ Figma
Lớp học lập trình này chủ yếu dựa vào một trình bổ trợ Figma mới để tạo bảng phối màu và mã thông báo động. Cài đặt trình bổ trợ Figma ngay trên trang cộng đồng Figma hoặc tìm kiếm "Material Theme Builder" (Trình tạo giao diện Material) trong Cộng đồng Figma.
3. Màu sắc và khả năng hỗ trợ tiếp cận
Khả năng tiếp cận là cách duy nhất để thiết kế cho mọi người, đảm bảo rằng các sản phẩm bạn làm ra tiếp cận được nhiều đối tượng nhất có thể.
"Tôi có thể nhìn thấy màu sắc trên màn hình không?" chỉ là yếu tố đầu tiên cần cân nhắc khi thiết kế bằng màu sắc. Mọi người nhìn nhận màu sắc theo nhiều cách, tuỳ thuộc vào thị lực của họ.
Mù màu có thể có nghĩa là kiểm tra các tổ hợp màu để các phần tử trên giao diện người dùng không bị lẫn nhau.
Mặc dù độ mờ và độ đậm có thể không phải là màu sắc theo nghĩa đen của một màu, nhưng chúng có tác động trực quan mạnh mẽ đến cách cảm nhận màu sắc.
Việc sử dụng độ mờ thấp sẽ tạo ra màu sáng hơn, có thể làm cho văn bản khó đọc. Ví dụ: người bị cận thị sẽ gặp khó khăn khi đọc văn bản được đặt thành độ mờ 30% ở khoảng cách hợp lý.
Hãy cẩn thận khi sử dụng độ mờ và không được sử dụng theo nguyên tắc được đề xuất.
Độ đậm phông chữ có thể có hiệu ứng tương tự, tính đến độ đậm phông chữ mỏng hơn trên nền tối hơn. Trong khi in, phông chữ rất mỏng sẽ khiến mực bị "tràn" vào đó, tạo ra văn bản gây khó chịu. Mắt chúng ta cũng tạo ra hiệu ứng này trên màn hình và cố gắng lấp đầy không gian.
Kiểu chữ mỏng trên nền tối sẽ tạo ra hiệu ứng gây khó chịu.
Mức độ dễ đọc so với mức độ dễ đọc. Trong toàn bộ phòng thí nghiệm này, chúng tôi sẽ đề cập đến mức độ dễ đọc của văn bản. Mức độ dễ đọc đo lường mức độ dễ nhìn, còn mức độ dễ đọc đánh giá mức độ dễ hiểu.
4. Độ tương phản màu
Chúng tôi đưa ra nguyên tắc về khả năng hỗ trợ tiếp cận để cung cấp cho các nhà thiết kế và nhà phát triển một danh sách kiểm tra nhất quán với sự tham gia của chuyên gia nhằm đảm bảo chúng tôi áp dụng những phương pháp hay nhất để tạo ra các sản phẩm dành cho tất cả mọi người. WCAG là tiêu chuẩn thông thường và nội dung mà phòng thí nghiệm này đề cập đến.
Độ tương phản màu là sự khác biệt giữa độ chói của thành phần nền trước và nền sau, được thể hiện theo định dạng tỷ lệ. Tiêu chí tỷ lệ này áp dụng cho điểm. Việc đo lường độ tương phản giữa văn bản trên nút và vùng chứa có thể giúp xác định xem văn bản có dễ đọc hay không.
Ví dụ về trường hợp độ tương phản màu không thành công.
Nguyên tắc về độ tương phản màu được chia thành văn bản và không phải văn bản, mỗi loại có một bộ điểm riêng.
Văn bản
AA | AAA | |
Chữ lớn | 3:1 | 4,5:1 |
Văn bản thông thường (nội dung) | 4,5:1 | 7:1 |
Không phải văn bản
AA | |
Không phải văn bản (yếu tố đồ họa) | 3:1 |
Hãy thử kiểm tra độ tương phản và xem cách khắc phục theo cách thủ công.
- Trong Figma, hãy tìm màu trong các thành phần trên giao diện người dùng. Bắt đầu với Văn bản lớn (#C0BEC5), nó nằm trên màu nền (#F5F5FF). Sử dụng trình kiểm tra độ tương phản trực tuyến, nhập các màu này vào nền trước và nền sau cho thấy nó không đạt tất cả điểm xếp hạng.
- Văn bản quá sáng so với màu nền. Vẫn trên trình kiểm tra độ tương phản trực tuyến, hãy điều chỉnh màu nền trước bằng công cụ chọn màu thành màu tối hơn cho đến khi vượt qua AAA.
- Quay lại Figma, áp dụng màu truyền mới cho văn bản lớn.
- Làm theo cùng một quy trình cho phần nội dung và các nút, nhớ kiểm tra cả màu văn bản và màu nền cho mỗi nút.
- ,Sử dụng kết quả trong mục Đối tượng đồ hoạ và thành phần giao diện người dùng để áp dụng cùng một quy trình cho các biểu tượng**.**
- Đưa màu mới vào Figma cho từng phần tử. Bây giờ, tất cả các phần tử đều phải vượt qua chỉ số tương phản!
Ví dụ về độ tương phản màu truyền.
Điều này có vẻ giống như một quá trình dài và kết quả có thể đã tạo ra một bảng màu ít hài hoà hơn. Công cụ này có thể giúp bạn làm việc đó!
5. Có độ chói
Hệ thống màu động mới cho Material Design được xây dựng bằng cách sử dụng độ chói thay vì màu sắc. Có nghĩa là nếu sắc độ và sắc độ bị xoá, chúng ta có thể thấy độ tương phản thông qua sắc độ.
Khi trích xuất một màu, kết quả sẽ dẫn đến 5 màu chính thay đổi từ đó các bảng sắc độ được tạo ra. Một bảng sắc độ màu bao gồm 13 tông màu, gồm cả trắng và đen. Giá trị tông màu 100 tương đương với ý tưởng ánh sáng ở mức tối đa và cho kết quả màu trắng. Mọi giá trị tông màu từ 0 đến 100 thể hiện lượng ánh sáng có trong màu.
Hệ thống bảng sắc độ là trọng tâm để làm cho bất kỳ bảng phối màu nào cũng có thể truy cập được theo mặc định.
Kết hợp màu dựa trên sắc độ, thay vì giá trị thập lục phân hay màu sắc, là một trong những hệ thống quan trọng giúp dễ dàng truy cập được vào bất kỳ màu nào đầu ra. Những sản phẩm sử dụng màu động sẽ đáp ứng yêu cầu vì các tổ hợp thuật toán mà người dùng có thể trải nghiệm sẽ được thiết kế để đáp ứng các tiêu chuẩn về hỗ trợ tiếp cận.
Các phần tử có độ chói tương tự nhau không có độ tương phản thích hợp để dễ đọc, trong khi các phần tử có giá trị độ chói khác nhau sẽ dễ phân biệt hơn.
Màu động của Material You được xây dựng để hoạt động trong các bối cảnh khó đoán. Để quản lý tỷ lệ tương phản trong nhiều ngữ cảnh xem khác nhau, mức độ chói là thuộc tính chính cho phép các màu kết hợp thành công ngay cả khi nhóm sản phẩm không thử nghiệm từng cách kết hợp màu cụ thể.
6. Tạo một giao diện dễ tiếp cận
Trình tạo giao diện tạo mã thông báo Material Design dưới dạng kiểu Figma, cho phép bạn trực quan hoá màu động và tạo giao diện tuỳ chỉnh. Việc này được thực hiện trong khi tuân theo hệ thống màu của Material 3 để đảm bảo các màu dễ tiếp cận được tạo trong bảng phối màu.
- Trong chế độ plugin, nhấp vào Tuỳ chỉnh. Thao tác này sẽ chuyển giao diện sang một giao diện tuỳ chỉnh. Giao diện Material đã được tạo, nhưng bạn cũng có thể tạo một giao diện mới nếu muốn. Để tìm hiểu thêm, hãy xem hình ảnh trực quan của màu động.
- Tiếp theo, đặt màu Khoá chính. Màu chính có thể là màu chính của thương hiệu hoặc màu nhấn chính được sử dụng nhiều nhất. Nhấp vào màu được gắn nhãn Primary (Chính) để mở công cụ chọn màu và chọn màu. Màu chính được dùng cho màu nguồn, gần giống với màu nguồn trong chế độ cài đặt động.
Thêm màu vào MTB.
- Các màu chính còn lại sẽ được điền dựa trên màu chính. Điều này có nghĩa là bạn không cần phải thêm màu sắc bổ sung nếu không cần đến chúng. Nếu muốn, hãy thêm màu cấp hai và màu thứ ba.
- Sơ đồ màu thể hiện các màu chính được diễn giải từ màu đầu vào, bảng sắc độ được tạo ra và bảng phối màu thu được với vai trò của màu. Có cả bảng phối sáng và tối!
- Phòng thí nghiệm này đã cung cấp một giao diện người dùng mẫu để xem bảng phối màu được áp dụng. Sau khi chọn thành phần Giao diện người dùng ứng dụng, hãy nhấp vào hoán đổi trong trình bổ trợ.
Bảng phối màu với bản minh hoạ được kết nối.
Đối với những bài tập này, Trình tạo giao diện Material đã tạo mã thông báo bắt buộc trong tệp Figma.
7. Kiểm tra độ tương phản với Material Theme Builder (Trình tạo giao diện Material)
Thật tuyệt, nhưng chúng tôi hiểu rằng bạn sẽ muốn cập nhật một số kiểu trong số này bằng các màu khác nhau theo cách thủ công. Material Theme Builder (Trình tuỳ chỉnh giao diện Material) tích hợp sẵn tính năng kiểm tra độ tương phản cho màu sắc trong bảng phối màu cốt lõi để giúp bạn đưa ra các quyết định này.
- Vì mã thông báo được tạo dưới dạng kiểu, nên chúng ta cũng có thể đặt giá trị của màu đã tạo. Trong kiểu Figma, chuyển xuống Màu chính của giao diện hiện tại và chọn biểu tượng Chỉnh sửa kiểu ở bên phải.
- Cập nhật Màu chính trong thuộc tính. Điều này được phản ánh trong dữ liệu đầu ra màu sắc và giao diện người dùng của ứng dụng. Thuật toán màu không tạo ra màu này nên chúng tôi không thể đảm bảo khả năng tiếp cận.
- Trong trình đơn trình bổ trợ, hãy nhấp vào Kiểm tra độ tương phản, sau đó mở lại cửa sổ Chỉnh sửa kiểu cho chế độ chính. Thao tác này sẽ kiểm tra độ tương phản và cho thấy chỉ số về độ tương phản.
Độ tương phản trong hộp thoại kiểu Figma.
8. Xin chúc mừng
Xuất sắc! Hỗ trợ tiếp cận là một phần quan trọng trong quy trình của bạn. Với Material Design và Material Theme Builder (Trình tạo giao diện Material), việc này thậm chí còn dễ dàng hơn nữa.
Nếu bạn có thắc mắc, cứ thoải mái hỏi chúng tôi bất cứ lúc nào qua @MaterialDesign trên X.
Hãy theo dõi để biết xem nội dung và hướng dẫn về thiết kế trên youtube.com/MaterialDesign