<>Color Terminology
Thuật ngữ màu sắc hình thành nên nền tảng kiến thức về màu sắc của chúng ta. Các thuật ngữ màu sắc như HUE (mầu sắc), TINT (mầu phớt) và Shade (mầu bóng đổ) như những công cụ mà chúng ta có thể sử dụng để phát triển các bảng màu độc đáo.
/Hue
– Hue (mầu sắc) là thuật ngữ chỉ màu chủ đạo hay tổ hợp 12 màu đậm nhạt khác nhau trên bánh xe màu (Color Wheel). Đây là thuộc tính giúp phân biệt các màu sắc cơ bản, không bao gồm trắng, đen hay xám.
/Tint
– Hiểu một cách đơn giản nếu bạn tăng thêm màu trắng vào màu gốc bạn sẽ có những màu sáng hơn màu bạn đầu đó gọi là Tint.
/Shade
– Hiểu một cách đơn giản nếu bạn tăng thêm màu đen vào màu gốc bạn sẽ có những màu tối hơn màu bạn đầu đó gọi là Shade.
/Tone
– Tương tự như 2 cái trên nhưng là tăng thêm cả đen + trắng (xám) vào mầu gốc.
/Value
– Value là chỉ số về độ sáng tối của mầu gốc. Mức thấp nhất là đen và sáng dần lên trên cột mầu đã chọn.
/Saturation
– Saturation (độ bão hòa) là mức độ rực rỡ của màu sắc, cho biết sự mạnh mẽ của một màu so với màu xám tinh khiết.
<>Hierarchy
– Khi một element tương phản với các thứ xung quanh, điều đó cho thấy element đó có tầm quan trọng cao hơn. Chúng ta có thể sử dụng màu sắc và trọng lượng màu để thiết lập hệ thống phân cấp trong giao diện.
– Bằng cách sử dụng các sắc thái màu, chúng ta có thể chỉ định mức độ quan trọng khác nhau cho các element.
– Nếu một element quan trọng hơn element khác thì nó phải có trọng lượng trực quan cao hơn. Điều này giúp người dùng dễ dàng lướt nhanh trang và phân biệt giữa thông tin quan trọng và thông tin ít quan trọng hơn.
– Thông tin nào nổi bật hơn, đậm nét hơn thì mắt người dùng sẽ bị thu hút trước tiên, sau đó họ sẽ chuyển sang những thông tin hỗ trợ bên dưới.
<>Expressive
– Hiển thị màu sắc thương hiệu tại những điểm chú ý nhằm củng cố phong cách cho thương hiệu của bạn.
– Hãy nghĩ về màu sắc thương hiệu của bạn như đường trên đĩa bánh mì nướng bơ. Quá nhiều đường sẽ lấn át hương vị tự nhiên, còn quá ít thì nó sẽ nhạt nhẽo.
– Khi thêm màu sắc để củng cố thương hiệu của bạn vào giao diện, hãy suy nghĩ kỹ về thời điểm và vị trí nó được thêm vào.
<>Meaning
– Màu sắc gợi lên những cảm giác hoặc cảm xúc khác nhau, vì vậy bằng cách hiểu tâm lý của màu sắc, chúng ta có thể sử dụng màu sắc thương hiệu để gây được chú ý với khách hàng.
– Điều quan trọng là phải nhận ra khách hàng của bạn là ai và hãy nhớ rằng nhận thức về màu sắc khác nhau tùy theo từng nền văn hóa. Ví dụ, trong văn hóa phương Tây, màu trắng thường gắn liền với đám cưới, trong khi ở văn hóa phương Đông, màu trắng được coi là màu của tang tóc.
– Bạn càng hiểu nhiều về màu sắc và ý nghĩa của nó thì nó càng có tác dụng mạnh mẽ.
– Các công ty sử dụng màu sắc trong xây dựng thương hiệu và tiếp thị như một chiến thuật để tác động đến cảm xúc của chúng ta mọi lúc. Bạn có để ý rằng hầu hết các nhà hàng thức ăn nhanh đều sử dụng màu đỏ và vàng trong thương hiệu của mình không? Đó là bởi vì màu đỏ gây ra sự kích thích, thèm ăn, đói và thu hút sự chú ý – trong khi màu vàng gây ra cảm giác hạnh phúc và thân thiện.
<>Limit color
– Bằng cách hạn chế sử dụng màu sắc trong ứng dụng của bạn, các khu vực nhận được màu sắc sẽ nhận được nhiều sự chú ý hơn, chẳng hạn như văn bản, hình ảnh và các thành phần riêng lẻ như nút.
– Bạn sẽ nhận thấy trong nhiều ứng dụng có nhiều bài đăng đầy màu sắc và nội dung khó đoán như Instagram hay Twitter, giao diện của chúng có xu hướng khá đơn giản. Điều này tuy tinh tế nhưng nó làm mất đi sự tập trung vào giao diện và tập trung vào nội dung.
<>State
– Màu sắc là một cách mà chúng ta có thể hiển thị sự thay đổi trạng thái trong giao diện của mình. Bằng cách tắt màu của một button, nó có thể cho biết rằng nút đó bị disable hoặc bằng cách tô sáng nút đó bằng màu đỏ, điều đó báo hiệu lỗi. Chúng ta cũng nên kèm theo các màu lỗi của mình bằng thông báo lỗi và biểu tượng để đảm bảo độ rõ ràng và thu hút người dùng mù màu.
<>Consistency & context
– Việc sử dụng màu sắc trong giao diện phải nhất quán để màu sắc luôn có ý nghĩa giống nhau ngay cả khi ngữ cảnh thay đổi. Ở ví dụ trên thì khi button đã mầu đỏ thì thanh thông báo cần chuyển sang mầu vàng.
<>Color Palettes
/Bước 1 — Primary & system colors
– Màu chính mà tôi chọn là màu tím. Khi tôi có primary color (màu chính), tôi cần màu cho text, background …
– Thông thường, tôi sẽ chọn màu tối để sử dụng cho text và màu xám nhạt cho background.
/Bước 2 – Creating a palette
– Tham khảo các trang như material design của google.
/Bước 3 – Tie it all together
– Kết hợp palette color đã chọn vào UI screen
<>Quy tắc 60-30-10
– 60% mầu chủ đạo, 30% mầu phụ, và 10% là mầu nhấn.
