Nguồn: Dribbble
Là một người chuyển ngành, khi mình tự học về ngành UX/UI, mình luôn chật vật trong biển kiến thức mà lĩnh vực mang lại. Một trong những chủ đề đó chính là màu sắc, mình luôn tự hỏi tại sao có quá nhiều bài báo và sách nói về lý thuyết màu sắc và bảng màu như vậy nhưng mình lại không biết cách làm sao để vận dụng nó tốt. Nếu các bạn đang gặp phải vấn đề tương tự, cùng đọc bài viết này nhé!
Trước kia, mình hay lấy chính các bảng màu (color pallete) sử dụng trong thiết kế giao diện của mình, tuy nhiên, cách làm này mang đến rất nhiều sự bối rối và thiếu hệ thống, dẫn đến giao diện rời rạc, thiếu tính nhất quán. Thông qua 5 tuần luyện công UI, mình bắt đầu thiết kế một cách có hệ thống và nhất quán hơn.
Ở đây, quy luật đơn giản mà bạn có thể bắt đầu: color modifications - hoặc color variations, tạm dịch “biến thể màu sắc”. Bạn có thể hiểu: Kỹ năng cơ bản của việc sử dụng màu sắc trong các thiết kế giao diện là có thể sửa đổi một màu cơ bản thành nhiều biến thể khác nhau.
Hãy chọn 1 màu bạn thích, mình vừa đọc bài viết này vừa luyện tập luôn nhé!
Biến thể màu sắc (color variation) là gì?
Nguồn: Material Design
Chắc hẳn các bạn đọc hiện tại ai cũng đều dùng qua ít nhất là 1 ứng dụng điện thoại/trang web đúng không nào? Các bạn có để ý rằng màu chủ đạo sẽ có nhiều tông trong cùng một ứng dụng không? Để mình cho bạn một ví dụ về ứng dụng Grab nhé!
Một điều mình nhận thấy trên nhiều giao diện đẹp mắt là chúng thường có các biến thể tối hơn và sáng hơn trên một màu chủ đề cụ thể. Ở đây cụ thể là màu xanh lá chủ đạo của Grab.
À, bạn đừng nhầm lẫn đây là màu chủ đạo rồi kéo độ nổi (Opacity) xuống nhé.. Không đâu. Đó là một biến thể được chọn bởi một số phép thuật khác.
Nhưng điều này đặt ra câu hỏi: làm thế nào để bạn thực sự sửa đổi một màu để có được các biến thể tốt?
Ở đây sẽ có 2 cách:
Ví dụ ngoài thực tế
Dùng HSB (nếu bạn chưa biết về HSB, hãy đọc phần 1 về màu sắc mình đã từng đăng tại đây)
Thật ra các biến thể màu sắc đều đến từ thực tế, từ môi trường xung quanh bạn.
Bóng
Bạn có thể nghĩ “bóng” chính là biến thể màu sắc của màu ấy. Ở đây tác giả bài viết gốc đã cho mình thấy 2 biến thể màu sắc đơn giản tại đây.
Khi có một biến thể màu có bóng, bạn có thể thấy độ sáng (brightness) giảm xuống và độ bão hòa (saturation) tăng lên. Bạn có thể tham khảo quy tắc này để vận dụng cho các thiết kế sau này của bạn.
Nên bạn có thể hiểu đơn giản, nếu bạn cần một biến thể màu sáng hơn, hãy giảm độ bão hòa (saturation), tăng độ sáng (brightness), hãy kéo bộ chọn màu của bạn đến gần màu xám hơn và xa màu đen hơn.
Biến màu sáng hơn = giảm saturation + tăng brightness
Nếu bạn cần một biến thể màu tối hơn, bạn cần tăng độ bão hòa và giảm độ sáng, vì vậy hãy kéo bộ chọn màu của bạn ra xa màu xám và gần màu đen hơn.
Biến màu tối hơn = tăng saturation + giảm brightness
Cách bạn có thể áp dụng
Khi nói đến các biến thể màu, bạn hãy tự hỏi: tôi chỉ cần một biến thể sáng hơn hoặc tối hơn trên màu mà tôi đã có?
(Và nếu bạn muốn một cái gì đó sạch sẽ và đơn giản, câu trả lời là như vậy, thường là có)
Các biến thể tối hơn:
Độ sáng giảm
Độ bão hòa tăng
Màu sắc (thường) chuyển sang độ sáng tối thiểu (đỏ, lục hoặc lam)
Các biến thể sáng hơn:
Độ sáng tăng
Độ bão hòa giảm
Hue (thường) chuyển sang độ sáng tối đa
Điều này sẽ cho phép bạn lấy một màu, nhưng sửa đổi nó liên tục cho tất cả các nhu cầu về giao diện người dùng của bạn, sử dụng các biến thể tối hơn và sáng hơn khi thích hợp.
Một ví dụ một màu chủ đề các biến thể của nó, nguồn từ tác giả gốc
Bạn có chủ đề nào quan tâm không? Hãy chia sẻ với Mirr để mình có thể tổng hợp thông tin cho bạn nhé!
Credit & Reference:
Color in UI Design: A (Practical) Framework - Erik D. Kennedy
UI Design: How to choose a color scheme using one color - Elizabeth Alli
Dịch và tổng hợp bởi: Huyền, thuộc Mirr Design
Mirr Design hiện đang tuyển sinh khóa học “Comprehensive User Interface Design” - CUID. Học tư duy thiết kế, thực hành thiết kế và tăng giá trị của thiết kế trong team.
Ai nên học? Khoá học được thiết kế giúp bạn nắm chắc quy trình và tư duy thiết kế, tạo tiền đề cho những bước tiến tiếp theo trong sự nghiệp UX Design. Nếu bạn đã có một vài năm kinh nghiệm hoặc đang có ý định chuyển ngành thì đây là khoá học dành cho bạn.
Comments