Luôn có 1 cuộc chiến nổ ra khi nhắc đến màu sắc. Designer thích màu đỏ, CEO lại muốn màu xanh, CTO thì chọn #2D88F3, CMO nói tại sao không chuyển màu như IOS7?

Trong hệ thống thiết kế giao diện người dùng, màu sắc được xem như một nền tảng quan trọng, đại diện cho ngôn ngữ Thiết kế. Một điều thú vị là hệ thống màu của UI không hề đơn giản như khi làm Brand guideline. Màu sắc trong UI thực sự rất sống động. Mỗi một màu sắc được sử dụng không chỉ để đẹp mà còn mang một tín hiệu, chỉ dẫn một hành động hoặc đưa ra gợi ý cho người dùng.

Những câu hỏi cần đặt ra trước khi lựa chọn màu sắc thiết kế:

  • Ai là người dùng sản phẩm?
  • Họ có tính cách, thói quen, sở thích như thế nào?
  • Giao diện này sẽ gửi gắm thông điệp gì?
  • Giọng điệu mà bạn muốn truyền tải?
  • Mục tiêu cần đạt được với UI guideline? (không bắt buộc)

Các màu sắc chủ yếu trong thiết kế UI

UI Color system

1. Màu Primary

Màu Primary thường là màu đại diện của nhãn hàng. Đây là màu chủ đạo mà người dùng nhìn thấy nhiều nhất về sản phẩm. Thường 1 hoặc tối đa 2 màu primary là lý tưởng cho thiết kế.

Bên cạnh màu Primary (sơ cấp), tùy theo tình huống cụ thể, designers có thể tạo ra bộ màu secondary (thứ cấp).

2. Màu Accent

Màu Accent sử dụng để nhấn mạnh hành động và thông tin cần được chú ý như văn bản, nút call-to-action, floating button (nút nổi), progress bars (thanh tiến trình), selection controls (bảng lựa chọn), các nút đặc biệt, slider (thanh trượt), links (liên kết)… Từ màu Primary, màu Accent có thể được chọn bằng cách sử dụng bánh xe màu kết hợp theo các cách kết hợp màu: tương tự, đơn sắc, bổ sung, chia bổ sung, bộ ba, …

Trong trường hợp màu Accent được chọn quá tối hoặc quá sáng so với nền, nên chọn một màu khác thay thế nhưng không nên quá khác với màu gốc.

Hãy cứ thoải mái sáng tạo và thử. Tuy nhiên, đừng quên rằng màu Accent chỉ nên chiếm khoảng 10% màu toàn bộ sản phẩm. Mô hình lý tưởng là 60 – 30 – 10: tức 60% Primary, 30% Secondary và 10% Accent. Đơn giản vì nếu tất cả mọi người đều là ngôi sao, thì không có ai là ngôi sao cả. Tuy nhiên, trên thực tế, việc áp dụng nguyên tắc này là không bắt buộc. Bạn chỉ cần thoải mái một cách hợp lý là được.

3. Màu Semantic

Màu Semantic là màu thể hiện những chú ý đặc biệt như: lỗi, thành công, cảnh báo, thông tin. Những màu sắc này được chọn dựa trên nghiên cứu rất chắc chắn về tâm lý học tín hiệu:

  • Màu đỏ thường dùng để hiển thị “lỗi”, “nguy hiểm”, “sai”.
  • Màu xanh lá dành cho “thành công”, “an toàn”, “đúng đắn”.
  • Màu vàng để “cảnh báo”, “thận trọng”, “cảnh giác”.
  • Màu xanh dương dành cho “thông tin”.

4. Màu Neutrals

Màu Neutrals bao gồm ba màu: Trắng, đen và xám.

Đây là những màu thường được sử dụng cho văn bản hoặc nền. Bạn có thể thay đổi opacity của màu đen để để sử dụng cho văn bản, thay vì phải lựa chọn cụ thể mã màu đen hoặc xám. Ví dụ, điều chỉnh opacity của màu đen thành 54% hoặc 81% hoặc hơn để được màu xám phù hợp. Cách này rất tiện dụng khi thiết kế.

Tuy nhiên, trên hết, bạn vẫn phải chú ý vào sự tương phản giữa các màu đối tượng và màu nền.

5. Chart

Việc tạo một bộ gồm 10 hoặc 20 màu theo thứ tự cụ thể để hiển thị dữ liệu sẽ giúp việc đánh giá trở nên dễ dàng hơn. Tuy nhiên nó là một việc rất khó, dưới đây sẽ là một vài típ mà bạn có thể tham khảo:

Phân loại: Tạo nhiều màu tương phản với nhau và sắp xếp chúng theo thứ tự cụ thể. Bộ màu này trình bày các loại hiển thị dữ liệu khác nhau (biểu đồ thanh, biểu đồ đường, …).

Hãy chọn những màu khác nhau chứ đừng chỉ thay đổi độ bão hòa. Bởi vì khi nhìn vào dữ liệu, bạn muốn cho người đọc thấy rõ sự tương phản giữa đường màu xanh dương và đường màu xanh lá cây, chứ không phải giữa đường màu xanh dương và một dạng khác của màu xanh dương.

Lưu ý đặc biệt: màu đỏ và màu xanh lá cây là 2 màu rất có ý nghĩa trong đời sống(xanh đồng nghĩa với lên, đỏ đồng nghĩa với xuống, …), hãy sử dụng chúng một cách khôn ngoan!

Tuần tự: Cố định, thay đổi theo hướng đi lên (bản đồ nhiệt, bản đồ cây,…). Tạo sự tương phản mạnh đi từ sáng đến tối, không bao giờ dừng ở giữa.

Đối lập: Tập hợp chuỗi màu đối lập (thường thấy trong bản đồ nhiệt). Mẹo: không bao giờ sử dụng màu gradient với 2 màu đối lập, luôn tạo các bước đệm giữa chúng.

Chart Color

Một vài kiểu dữ liệu đặc biệt: Không có dữ liệu, dữ liệu sai /trống /không chính xác. Thường nên chọn màu xám cho dữ liệu trống và màu trắng cho không có dữ liệu. Tất nhiên, 2 màu đó phải trông đủ khác biệt.

Các element đặc biệt (chủ yếu sử dụng màu trung tính): chú giải công cụ, tiêu đề biểu đồ, điểm dữ liệu, trục biểu đồ, đường thẳng, giá trị, …

Một lưu ý cuối cùng cho bạn khi thiết kế UI guideline:

Hãy giữ mọi thứ đơn giản một cách có hệ thống!

Written by: Anna Molly

Tags:

Trả lời