Giảm bớt ánh sáng, giúp đỡ mỏi mắt hơn và tiết kiệm pin. Dark mode là một trong những xu hướng lớn nhất trong thiết kế và các thương hiệu đẳng cấp thế giới như WhatsApp, Instagram, Google, Facebook và Apple đã tích hợp vào thiết kế của họ.
Chúng ta hãy xem những thương hiệu hàng đầu này đang làm gì và làm thế nào bạn có thể mang Dark mode vào thiết kế của riêng bạn. Bạn sẽ tìm hiểu những ưu và nhược điểm của Dark mode và các thực tiễn tốt nhất cần thiết khi thiết kế để đảm bảo thiết kế web và ứng dụng của bạn trông và hoạt động hoàn hảo trong "chế độ tối".
Dark Mode là gì?
Dark mode hay còn gọi là "Chế độ tối" là các thiết kế giao diện người dùng (UI) thường sử dụng các ánh sáng yếu, sử dụng màu tối tối (thường là màu đen hoặc màu xám) làm màu nền chính. Đó là sự đảo ngược của UI trắng mặc định mà các nhà thiết kế đã sử dụng trong nhiều thập kỷ.
Ưu điểm của việc sử dụng Darkmode
Chế độ tối không chỉ giúp dịu mắt hơn mà phong cách này còn giúp tiết kiệm pin cho các thiết bị di động. Hãy xem những lợi thế thực tế của chế độ tối so với chế độ sáng.
Giảm mỏi mắt
Khi nhìn vào màn hình quá lâu, chúng ta thường có cảm giác mỏi mắt và đau mắt. Nhưng chế độ tối vì đặc tính là giảm bớt ánh sáng phát ra từ màn hình nên có thể giúp dịu mắt đáng kể, giúp người dùng giảm hẳn cảm giác đau mắt nhất là vào buổi tối.
Tăng khả năng hiển thị trong môi trường ánh sáng xung quanh thấp
Nếu bạn đang ngủ và ai đó bật đèn sáng, bạn sẽ bị chói mắt. Nguyên tắc tương tự hoạt động với những người làm việc trước màn hình máy tính vào đêm khuya hoặc sáng sớm. Chế độ tối làm giảm ánh sáng mạnh và giúp dễ dàng xem nội dung hơn trong môi trường ánh sáng yếu.
Tiết kiệm pin
Các màn hình OLED khi hiển thị màu đen thì nó sẽ tắt các điểm ảnh đó đi thay vì hiển thị màu đen như các màn hình LCD, từ đó màn hình OLED sử dụng chế độ tối Dark Mode sẽ đem đến thời lượng pin tốt hơn so với màn hình LCD và cả màn thiết bị sử dụng OLED nhưng không dùng Dark Mode.
Nhược điểm của việc sử dụng chế độ tối
Giống như bất cứ điều gì, chế độ Dark cũng có những nhược điểm của nó.
Giảm kết nối cảm xúc
Màu sắc tươi sáng có thể tạo ra cảm xúc tươi sáng. Nếu đó là những gì người xem của bạn đang tìm kiếm, thì việc làm tối màu sắc có thể tạo ra một rào cản tinh thần với họ. Họ sẽ có một thời gian khó khăn hơn để tạo ra một kết nối cảm xúc với chủ đề tối. Nếu bản chất thương hiệu của bạn là động lực, truyền cảm hứng hoặc tinh thần, giao diện người dùng chế độ tối có thể là một canh bạc. Nếu màu sắc tươi sáng có thể tạo ra cảm xúc tươi sáng, thì điều ngược lại cũng có thể xảy ra. Vậy người dùng của bạn là ai? Hãy xác định trước khi thiết kế.
Màu tương phản thấp có thể khó đọc
Nếu bạn không có được màu sắc và độ tương phản ngay khi thiết kế trang web hoặc ứng dụng chủ đề tối, nó có thể khiến văn bản khó đọc hơn, vì vậy hãy ghi nhớ điều đó khi tạo email, ứng dụng hoặc thiết kế trang web ở chế độ tối .
Khi nào nên sử dụng chế độ tối
Phù hợp với màu sắc thương hiệu của bạn
Khi bảng màu hiện có của một thương hiệu đã tương thích chế độ tối.
Làm nổi bật ngành của bạn
UI chế độ tối cũng hữu ích để tăng cường tương tác với người dùng. Ví dụ, các thương hiệu tập trung vào cuộc sống về đêm và giải trí là kết hợp hoàn hảo cho chế độ tối vì nội dung thường được kết hợp với nền tối trong cuộc sống thực.
Tối giản
Nếu thiết kế của bạn đã tối giản với nội dung hạn chế, điều kiện này sẽ rất phù hợp cho chế độ tối.
Mẹo cho thiết kế chế độ tối
1. Đừng làm quá tối
Các nhà xuất bản sách không sử dụng giấy trắng tinh khiết vì độ tương phản với mực đen quá mạnh. Nó làm bạn nheo mắt và có thể dẫn đến hiện tượng đau đầu. Điều tương tự cũng xảy ra với các thiết bị kỹ thuật số. Nếu chỉ sử dụng một màu đen tinh khiết. Mắt cảm giác khó chịu nhìn vào màn hình có độ tương phản cao.
2. Có độ tương phản phù hợp
Nền chế độ tối phải đủ tối để hiển thị văn bản màu trắng. Đề xuất từ Google Material Design là sử dụng mức độ tương phản giữa văn bản và nền, tối thiểu là 15,8:1.
3. Đừng đảo ngược màu
Nếu bạn đang chuyển sang chế độ tối từ chế độ tiêu chuẩn, có thể có các tín hiệu hình ảnh có giá trị trong chủ đề ban đầu. Đừng chỉ đơn giản đảo ngược màu sắc để có được chủ đề tối . Bạn có thể biến màu sắc có mục đích tâm lý thành màu sắc vô nghĩa. Hãy cố ý về lựa chọn màu sắc của bạn.
Chúng ta hãy xem những thương hiệu hàng đầu này đang làm gì và làm thế nào bạn có thể mang Dark mode vào thiết kế của riêng bạn. Bạn sẽ tìm hiểu những ưu và nhược điểm của Dark mode và các thực tiễn tốt nhất cần thiết khi thiết kế để đảm bảo thiết kế web và ứng dụng của bạn trông và hoạt động hoàn hảo trong "chế độ tối".
Dark Mode là gì?
Dark mode hay còn gọi là "Chế độ tối" là các thiết kế giao diện người dùng (UI) thường sử dụng các ánh sáng yếu, sử dụng màu tối tối (thường là màu đen hoặc màu xám) làm màu nền chính. Đó là sự đảo ngược của UI trắng mặc định mà các nhà thiết kế đã sử dụng trong nhiều thập kỷ.
Ưu điểm của việc sử dụng Darkmode
Chế độ tối không chỉ giúp dịu mắt hơn mà phong cách này còn giúp tiết kiệm pin cho các thiết bị di động. Hãy xem những lợi thế thực tế của chế độ tối so với chế độ sáng.
Giảm mỏi mắt
Khi nhìn vào màn hình quá lâu, chúng ta thường có cảm giác mỏi mắt và đau mắt. Nhưng chế độ tối vì đặc tính là giảm bớt ánh sáng phát ra từ màn hình nên có thể giúp dịu mắt đáng kể, giúp người dùng giảm hẳn cảm giác đau mắt nhất là vào buổi tối.
Tăng khả năng hiển thị trong môi trường ánh sáng xung quanh thấp
Nếu bạn đang ngủ và ai đó bật đèn sáng, bạn sẽ bị chói mắt. Nguyên tắc tương tự hoạt động với những người làm việc trước màn hình máy tính vào đêm khuya hoặc sáng sớm. Chế độ tối làm giảm ánh sáng mạnh và giúp dễ dàng xem nội dung hơn trong môi trường ánh sáng yếu.
Tiết kiệm pin
Các màn hình OLED khi hiển thị màu đen thì nó sẽ tắt các điểm ảnh đó đi thay vì hiển thị màu đen như các màn hình LCD, từ đó màn hình OLED sử dụng chế độ tối Dark Mode sẽ đem đến thời lượng pin tốt hơn so với màn hình LCD và cả màn thiết bị sử dụng OLED nhưng không dùng Dark Mode.
Nhược điểm của việc sử dụng chế độ tối
Giống như bất cứ điều gì, chế độ Dark cũng có những nhược điểm của nó.
Giảm kết nối cảm xúc
Màu sắc tươi sáng có thể tạo ra cảm xúc tươi sáng. Nếu đó là những gì người xem của bạn đang tìm kiếm, thì việc làm tối màu sắc có thể tạo ra một rào cản tinh thần với họ. Họ sẽ có một thời gian khó khăn hơn để tạo ra một kết nối cảm xúc với chủ đề tối. Nếu bản chất thương hiệu của bạn là động lực, truyền cảm hứng hoặc tinh thần, giao diện người dùng chế độ tối có thể là một canh bạc. Nếu màu sắc tươi sáng có thể tạo ra cảm xúc tươi sáng, thì điều ngược lại cũng có thể xảy ra. Vậy người dùng của bạn là ai? Hãy xác định trước khi thiết kế.
Màu tương phản thấp có thể khó đọc
Nếu bạn không có được màu sắc và độ tương phản ngay khi thiết kế trang web hoặc ứng dụng chủ đề tối, nó có thể khiến văn bản khó đọc hơn, vì vậy hãy ghi nhớ điều đó khi tạo email, ứng dụng hoặc thiết kế trang web ở chế độ tối .
Khi nào nên sử dụng chế độ tối
Phù hợp với màu sắc thương hiệu của bạn
Khi bảng màu hiện có của một thương hiệu đã tương thích chế độ tối.
Làm nổi bật ngành của bạn
UI chế độ tối cũng hữu ích để tăng cường tương tác với người dùng. Ví dụ, các thương hiệu tập trung vào cuộc sống về đêm và giải trí là kết hợp hoàn hảo cho chế độ tối vì nội dung thường được kết hợp với nền tối trong cuộc sống thực.
Tối giản
Nếu thiết kế của bạn đã tối giản với nội dung hạn chế, điều kiện này sẽ rất phù hợp cho chế độ tối.
Mẹo cho thiết kế chế độ tối
1. Đừng làm quá tối
Các nhà xuất bản sách không sử dụng giấy trắng tinh khiết vì độ tương phản với mực đen quá mạnh. Nó làm bạn nheo mắt và có thể dẫn đến hiện tượng đau đầu. Điều tương tự cũng xảy ra với các thiết bị kỹ thuật số. Nếu chỉ sử dụng một màu đen tinh khiết. Mắt cảm giác khó chịu nhìn vào màn hình có độ tương phản cao.
2. Có độ tương phản phù hợp
Nền chế độ tối phải đủ tối để hiển thị văn bản màu trắng. Đề xuất từ Google Material Design là sử dụng mức độ tương phản giữa văn bản và nền, tối thiểu là 15,8:1.
3. Đừng đảo ngược màu
Nếu bạn đang chuyển sang chế độ tối từ chế độ tiêu chuẩn, có thể có các tín hiệu hình ảnh có giá trị trong chủ đề ban đầu. Đừng chỉ đơn giản đảo ngược màu sắc để có được chủ đề tối . Bạn có thể biến màu sắc có mục đích tâm lý thành màu sắc vô nghĩa. Hãy cố ý về lựa chọn màu sắc của bạn.
