Cách lựa chọn và chuyển màu sắc sang chế độ nền tối cho UI Designer
Thiết kế chế độ nền sáng/tối linh hoạt đang ngày càng được nhiều người ưa chuộng và sử dụng phổ biến trên khắp thế giới bởi lợi ích đa dạng của nó.
Người dùng không chỉ được lựa chọn chế độ mà mình thích và vừa mắt hơn, chế độ nền tối còn được khuyến khích sử dụng vì phát ra ít ánh sáng xanh lam gây hại hơn. Các nhà nghiên cứu khoa học chứng minh được rằng ánh sáng xanh lam phát ra từ màn hình điện tử gây vô số ảnh hưởng tiêu cực đến sức khoẻ của bạn, từ đôi mắt đến cơ quan não bộ, chất lượng giấc ngủ, nhịp độ sinh học của cơ thể bạn. Hơn nữa, chế độ nền tối cũng có tác động tích cực đến hiệu quả sử dụng và độ bền của thiết bị, giữ mát thiết bị tốt hơn.
Vậy, màu sắc hiển thị ở chế độ nền sáng sẽ khác thế nào so với chế độ nền tối? Có phải chúng ta chỉ cần đổi màu nền màn hình từ trắng sang đen, màu chữ từ đen sang trắng là xong không?
1. Màu sắc phù hợp với chế độ nền tối
Không phải màu sắc nào cũng có thể sử dụng để hiển thị màn hình web/app ở chế độ nền tối, đặc biệt là những màu sắc có độ bão hoà cao. Độ bão hoà (Saturation) là cụm từ để chỉ mức độ sử dụng màu sắc nhất định, hay còn để thể hiện mức độ đậm nhạt của một màu sắc. Mức độ bão hoà càng cao thì màu sắc sẽ càng tươi và rực rỡ. Nhưng khi bạn đặt các màu như vậy trên nền đen, giao diện thiết kế sẽ trông rất khó nhìn, thậm chí tạo cảm giác mỏi và nhức mắt cho người xem do hiện tượng "bị cháy", mất nét của sắc độ bão hoà quá cao. Bạn có thể nhận thấy điều đó rất rõ ở ví dụ trên.
2. Cách lựa chọn và chuyển màu sắc sang chế độ nền tối
Do đó, có hai cách để lựa chọn màu sắc tốt nhất hoặc để chuyển đổi màu sắc dễ dàng từ chế độ nền sáng sang chế độ nền tối như sau:
2.1. Chèn thêm lớp màu trắng có độ trong suốt
Hãy tạo một lớp màu trắng thuần #FFFFFF nhưng có độ trong suốt nhất định (Opacity < 100%) để chèn đè lên màu sắc đang có độ bão hoà cao. Từ đó, bạn sẽ có ngay một màu mang độ bão hoà thấp hơn, hiển thị rõ ràng và thuận mắt hơn với chế độ nền tối nhưng vẫn theo chuẩn tông màu thiết kế của web/app đó.
Ví dụ, với một màu xanh "rực rỡ" #0E00B5, chỉ cần bạn đặt một lớp màu trắng #FFFFFF với độ trong suốt 40%, bạn đã chuyển đổi thành công nó sang màu xanh nhạt hơn là #6E66D3.
2.2. Chọn từ một bảng màu đơn sắc
Bảng màu đơn sắc (Monochromatic color pallete) là bảng màu bao gồm các sắc độ, tông màu sáng tối khác nhau của một màu. Nếu chia sắc độ bão hoà của một màu thành 10 mức, thì các màu sáng ở giữa mức 01 và mức 05 sẽ phù hợp với chế độ nền tối, giúp người dùng dễ nhìn và dễ đọc.
Chuẩn bị sẵn cho mình các bảng màu đơn sắc để có thể linh hoạt chọn lựa và chuyển đổi màu sắc giữa các chế độ màu nền nhé!
3. Hoàn thành
Các UI Designer đã nắm vững được cách lựa chọn và chuyển màu sắc sang chế độ nền tối để áp dụng vào các dự án thiết kế của mình chưa? Thực hành ngay thôi nào!
Nguồn: @ui__ux
