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

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?
Không thiếu các bài báo và video về thiết kế bảng màu giao diện người dùng. Bạn thậm chí có thể sử dụng một công cụ như Công cụ Màu của Material Design để tạo ra một tập hợp đầy đủ các màu sắc hài hòa.

Không thiếu các bài báo và video về thiết kế bảng màu giao diện người dùng. Bạn thậm chí có thể sử dụng một công cụ như Công cụ Màu của Material Design để tạo ra một tập hợp đầy đủ các màu sắc hài hòa.

Nhưng khi nói đến hệ thống thiết kế của Hazel, tôi nghĩ việc lựa chọn màu sắc của nó cũng phải… có hệ thống. Tôi không có đủ tự tin để lôi những màu phù hợp ra khỏi không khí loãng như Mũ phân loại ở Hogwarts. Màu sắc nên có mối quan hệ có ý nghĩa giữa chúng và có thể được hệ thống hóa.

Nó biết rằng việc này sẽ không dễ dàng. Nguyên tắc thương hiệu, trạng thái tương tác, tình cảm và các yêu cầu về khả năng tiếp cận chỉ là một số yếu tố có thể góp phần vào sự phức tạp của hệ thống màu sắc.

Trong bài đăng gồm 2 phần này, tôi sẽ hướng dẫn bạn hành trình tạo ra một hệ thống màu sắc như vậy. Và hy vọng, bạn sẽ bỏ đi với một cái gì đó mà bạn có thể áp dụng cho riêng mình.

Những người khác đã làm điều này như thế nào?

Tôi đã quan sát xung quanh để tìm cách tiếp cận màu sắc một cách chu đáo và hệ thống màu của Shopify xuất hiện trên cùng. Việc họ cung cấp màu sắc và các thành phần của chúng dưới dạng tệp cộng đồng Figma chắc chắn không ảnh hưởng gì.

Bảng màu Polaris '

Khi xem xét kỹ hơn, cách nó được tổ chức đã đặt ra một số câu hỏi. Không phải “Nền” chỉ là một tập hợp các bề mặt khác? Tại sao lại là “Bật văn bản” và “Bật biểu tượng”? Không phải tất cả văn bản và biểu tượng trên một cái gì đó đã có? Không phải "Tiêu điểm" chỉ là một biên giới khác? “Tương tác” và “Hành động” không thừa sao?

Nhưng tôi đã có một danh sách ngày càng nhiều các thành phần và biến thể cần màu sắc và bây giờ tôi có một số thứ để làm việc. Tôi sẽ tìm ra nó khi tôi tiến bộ. #yolo

Lấy các màu cơ bản xuống đủ đơn giản.

Màu cơ bản

Bề mặt

Đối với bề mặt, tôi đã thực hiện một vài chỉnh sửa. Tôi đã bao gồm nền (“canvas”) và bề mặt nghịch đảo - chẳng hạn như nâng cốc. Cũng có một màu bề mặt "quản trị viên" được áp dụng cho thanh ứng dụng cho người dùng "quản trị viên". Bạn cũng có thể bắt đầu nhìn thấy màu sắc của trạng thái tương tác.

Màu bề mặt cơ sở bao gồm nền, nghịch đảo và quản trị

Sau đó là các màu bề mặt cảm xúc, hữu ích cho các thành phần như cảnh báo và thẻ.

Màu sắc bề mặt cảm xúc

Cũng có các bề mặt khác, chẳng hạn như bề mặt được chọn và scrim. Tập lệnh là những phông nền nửa trong suốt dựa vào đó các hộp thoại nghỉ ngơi.

Các bề mặt được chọn và tập lệnh

Và đó là nó cho các bề mặt. Càng xa càng tốt!

Nội dung

Đối với nội dung và biểu tượng, tôi quyết định rằng nếu nó nằm trên một bề mặt, thì đó là tất cả nội dung. Dễ như ăn bánh.

Đầu tiên, màu sắc nội dung trung tính.

Màu nội dung trung tính

Sau đó, màu sắc của nội dung tình cảm, rất hữu ích cho các nút và biểu tượng.

Màu sắc nội dung tình cảm
Màu nội dung tình cảm được áp dụng cho các nút và biểu tượng trong cảnh báo

Cuối cùng, có các màu nội dung được chọn. Chúng xuất hiện ở những nơi như ngăn điều hướng.

Màu nội dung đã chọn
Màu nội dung đã chọn trong ngăn điều hướng

Biên giới

Đường viền đơn giản như màu nội dung. Đầu tiên, có một biên giới để phân chia tất cả mọi thứ.

Màu đường viền đa năng

Tất nhiên, có những màu đường viền cảm tính, xuất hiện trong các cảnh báo.

Màu sắc đường viền cảm xúc

Và sau đó là các màu đường viền tiêu điểm, rất hữu ích cho các yếu tố tương tác như các nút và trường nhập.

Tiêu điểm màu đường viền

Lưu ý về độ mờ

Bạn sẽ nhận thấy rằng rất nhiều màu này không phẳng. Điều này là do sẽ có những trường hợp mà việc áp dụng màu phẳng cho các phần tử giao diện người dùng sẽ dẫn đến kết quả không mong muốn. Điều này đặc biệt đúng trong thiết kế tương tác.

Hãy xem xét menu thả xuống sau đây của các loại trái cây có quầy huy hiệu. Khá vô thưởng vô phạt, phải không?

Thực đơn thả xuống của trái cây

Điều gì sẽ xảy ra nếu đây là một menu nhiều lựa chọn và một trong các mục của nó đã được chọn? Và điều gì sẽ xảy ra nếu bạn đang lướt qua menu?

Màu sắc phẳng dẫn đến mất độ tương phản.

Nếu các huy hiệu có màu xám phẳng, bạn sẽ nhận thấy cách các huy hiệu hòa hợp với môi trường xung quanh. Độ tương phản bị mất.

Nhưng nếu các huy hiệu có màu xám trong suốt, độ tương phản sẽ tự động được giữ lại.

Màu sắc trong suốt duy trì độ tương phản phù hợp.

Dưới đây là các màu phẳng và trong suốt cạnh nhau, để tiện so sánh.

Màu sắc phẳng và trong suốt được so sánh

Bằng cách sử dụng màu trong suốt, bạn đang tự động đảm bảo mối quan hệ trực quan giữa các lớp của phần tử giao diện người dùng.

Chắc chắn, bạn có thể thiết lập các màu phẳng bổ sung để bao gồm tình huống này. Hoặc bạn có thể tạo một ngoại lệ ở đây và làm cho tất cả các huy hiệu trong suốt. Nhưng con đường này dẫn đến cái chết bởi một ngàn vết cắt.

Nói về mà…

Đi tắt đường ray

Nhìn vào màu sắc của Shopify, tôi lấy "tương tác" và "hành động" để có nghĩa là "thành phần". Vì tôi không biết. Đừng hỏi. ;)

Tôi vén tay áo lên và tạo một bảng màu cho tất cả các thành phần của mình. Và tôi đã kết thúc với con quái vật nhỏ này.

206 màu và đang phát triển

Chết tiệt, 206 màu chỉ cho 8 thành phần. Và nhiều hơn nữa đã đến.

Ngày nay, hệ thống thiết kế của chúng tôi bao gồm ~ 90 thành phần và Chúa biết có bao nhiêu biến thể. Tạo mã thông báo thiết kế từ những thứ này sẽ rất tệ!

Vào thời điểm này, tôi đã nhìn thấy những màu sắc không có ở đó và tôi phải ngủ trên đó.

Tiếp tục đến phần 2 , Asana mở rộng vụ án này!

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