Thiết kế hệ thống màu có thể tiếp cận của Hazel (Phần 2)

Mar 22 2022
Điều gì sẽ xảy ra khi bảng màu đơn giản của bạn cũng cần đáp ứng các trạng thái tương tác, tình cảm, các yêu cầu về khả năng tiếp cận và hơn thế nữa?
Lưu ý rằng đây là phần 2 của 2 về thiết kế hệ thống màu sắc dễ tiếp cận của Hazel. Nếu bạn chưa đọc phần 1, xem đây! Eureka! Dù giải pháp là gì, tôi có cảm giác rằng các mã thông báo thiết kế sẽ cung cấp một số thông tin chi tiết về cách hệ thống hóa tất cả.

Lưu ý rằng đây là phần 2 của 2 về thiết kế hệ thống màu sắc dễ tiếp cận của Hazel. Nếu bạn chưa đọc phần 1, xem đây !

Eureka!

Dù giải pháp là gì, tôi có cảm giác rằng các mã thông báo thiết kế sẽ cung cấp một số thông tin chi tiết về cách hệ thống hóa tất cả. Và nó đã xảy ra khi sự kiện Sơ đồ năm 2021 của Figma sắp diễn ra và nó bao gồm một bài thuyết trình về mã thông báo thiết kế trong hệ thống thiết kế của Asana.

Toàn bộ bài thuyết trình rất đáng để xem, nhưng đây là cú đánh tiền:

Các mã thông báo thiết kế của Asana được sắp xếp theo cảm tính, cách sử dụng, sự nổi bật và tương tác.

Tôi cảm thấy như thể họ đã phá vỡ vụ án này một cách rộng rãi.

Mã thông báo thiết kế của Asana được tạo thành từ 4 thuộc tính ngữ nghĩa.

Sentiment mô tả cảm giác mà màu sắc đang truyền tải. Các tùy chọn bao gồm mặc định, thành công, cảnh báo, nguy hiểm, bán thêm, đã chọn và beta.

Cách sử dụng mô tả yếu tố mà màu đang được áp dụng. Các tùy chọn bao gồm nền, văn bản, biểu tượng và đường viền.

Sự nổi bật mô tả mức độ chú ý của màu sắc. Các tùy chọn bao gồm mặc định, yếu, trung bình và mạnh.

Tương tác mô tả cách người dùng tương tác với một phần tử được tô màu. Các tùy chọn bao gồm mặc định, di chuột, hoạt động và tắt.

Điều chỉnh công thức

Bắt đầu với nút chính của hệ thống thiết kế của tôi, tôi nhanh chóng nhận ra rằng tôi không thể chỉ áp dụng phương pháp của Asana như hiện tại.

Asana dành tình cảm nào cho nút chính của Hazel? Nút này không được "chọn".

Tuy nhiên, tôi tự tin rằng nó cung cấp một khuôn khổ vững chắc mà tôi có thể thích ứng bằng cách điều chỉnh từng thuộc tính. Tôi cũng sắp xếp lại thứ tự chúng để ưu tiên những màu đang được áp dụng.

Việc sử dụng sẽ được làm phẳng bề mặt, nội dung và đường viền. Nội dung xuất hiện trên các bề mặt và các bề mặt phác thảo đường viền.

Cảm xúc sẽ bao gồm trung lập, chính, thông tin, thành công, cảnh báo và chỉ trích. Chính sẽ bao gồm các yếu tố tương tác cũng như các yếu tố được “chọn”. Tôi có thể đang kéo dài ý ​​nghĩa của "tình cảm", vì vậy tôi sẵn sàng tiếp nhận các đề xuất.

Sự nổi bật sẽ bao gồm mặc định, dịu đi, vô hiệu hóa và tắt tiếng, trong số những thứ khác. Mặc định có nghĩa là "sự nổi bật tối đa". Thuộc tính này đã trở thành ngăn kéo tất cả của tôi, với một số tiếc rằng tôi sẽ đề cập sau.

Tương tác sẽ không thay đổi.

Tiêm ý nghĩa

Điều quan trọng nữa là các giá trị thuộc tính phải có định nghĩa nhất quán và có ý nghĩa.

Một số ví dụ bề mặt:

  • Nổi bật mặc định có nghĩa là màu sắc được điều chỉnh để đáp ứng các yêu cầu về độ tương phản văn bản tối thiểu của WCAG so với nội dung có nhiều khả năng xảy ra nhất.
  • Nổi bật hơn có nghĩa là màu sắc được điều chỉnh để đáp ứng các yêu cầu tối thiểu về độ tương phản không phải văn bản của WCAG so với nội dung có nhiều khả năng xảy ra nhất.
  • Độ nổi bật bị tắt có nghĩa là màu sắc được điều chỉnh để phù hợp với tỷ lệ tương phản 1,1: 1 so với màu bề mặt mặc định.
  • Nổi bật mặc định có nghĩa là các màu không trung tính được điều chỉnh để phù hợp với tỷ lệ tương phản 6,2: 1 so với màu bề mặt mặc định.
  • Nổi bật hơn có nghĩa là màu sắc được điều chỉnh để đáp ứng các yêu cầu về độ tương phản văn bản tối thiểu của WCAG so với màu bề mặt tương ứng của chúng.
  • Nổi bật hơn có nghĩa là màu sắc được điều chỉnh để đáp ứng các yêu cầu tối thiểu về độ tương phản không phải văn bản của WCAG so với màu bề mặt mặc định.
  • Độ nổi bật bị tắt có nghĩa là độ mờ của màu được đặt thành 10%.

Một tác dụng phụ hạnh phúc

Một trong những thách thức của việc thiết kế các sản phẩm nhãn trắng là tài sản thương hiệu được chuyển giao có thể không đáp ứng các yêu cầu về độ tương phản của WCAG. Cách tiếp cận màu sắc có hệ thống này đảm bảo sản phẩm nhãn trắng của bạn sẽ có thể tiếp cận được.

Kết quả hiện tại

Với cách tiếp cận mã thông báo thiết kế của Asana, tôi đã đi từ danh sách 206 màu ngày càng tăng thành danh sách tương đối ổn định gồm 119 màu.

Từ danh sách 206 màu ngày càng tăng đến danh sách ổn định gồm 119 màu với các định nghĩa có ý nghĩa

Điều này thể hiện mức giảm ~ 40% với một giải pháp có quy mô!

Hãy xem qua một vài ví dụ.

Các biến thể của nút
Biểu ngữ-Kiểu và Cảnh báo thông tin có thể loại bỏ với Tiêu đề và Hành động
Tập hợp trường văn bản thành công với nút biểu tượng theo dõi
Bánh mì nướng mặc định với hành động
Thẻ quan trọng với biểu tượng hàng đầu
Thả tập trường vùng ở trạng thái tải lên
Mục Bộ sưu tập Di động đã Chọn

Công việc đang được tiến hành

Có lẽ có nhiều cách khác để nướng chiếc bánh này nhưng đây là công thức đầu tiên tôi hài lòng.

Nhìn lại, tôi không chắc liệu "đảo ngược" có phải là thuộc tính "nổi bật" hay không. Nó có thể phù hợp hơn nếu nó được đặt dưới dạng "sử dụng" như một phần mở rộng. Ví dụ: “đảo ngược bề mặt” hoặc “đảo ngược nội dung”.

"Canvas" và "scrim" dường như cũng bị đặt sai vị trí trong thuộc tính "nổi bật". Theo định nghĩa, cả hai đều là bề mặt nên tôi vẫn chưa chắc chắn về cấu tạo của chúng. Có lẽ họ chỉ nên là những kẻ ngoại lai trong hệ thống này? Bạn nghĩ sao?

Dù thế nào đi nữa, giờ tôi đã có một cách tiếp cận lành mạnh với màu sắc. Tôi mong muốn áp dụng điều này cho một chủ đề tối. Nhưng do độ cao trong chủ đề tối hoạt động khác với chủ đề sáng như thế nào, tôi dự đoán sẽ có một vài điều chỉnh về cách màu sắc bề mặt hoạt động.

© Copyright 2021 - 2023 | vngogo.com | All Rights Reserved