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ì.

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.

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.

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ẻ.

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.

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.

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.

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.

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ứ.

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.

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.

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?

Đ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?

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.

Dưới đây là các màu phẳng và trong suốt cạnh nhau, để tiện 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.

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!