• Thanh nhàn Chu

Thiết kế chế độ tối: mẹo để tạo các trang web và ứng dụng chủ đề tối

Làm mờ ánh sáng, thư giãn mắt và tiết kiệm năng lượng của bạn. Chế độ tối 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 đã nhảy lên tàu thiết kế chế độ tối.


Hãy cùng xem các thương hiệu hàng đầu này đang làm gì và làm thế nào bạn có thể mang giao diện người dùng chế độ tối vào thiết kế của riêng bạn. Bạn sẽ học được những ưu và nhược điểm của chế độ tối và các thực tiễn tốt nhất cần thiết khi thiết kế cho chế độ tối để đả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.



Chế độ tối là gì?


Chế độ tối là giao diện người dùng (UI) á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. Nó đảo ngược giao diện màu trắng mặc định của UI mà các nhà thiết kế đã sử dụng trong nhiều thập kỷ.


Để đáp ứng với thời gian màn hình tăng lên của chúng ta, các nhà phát triển đã phát hiện ra rằng các giao diện chủ đề tối giúp giảm mỏi mắt, đặc biệt là trong các tình huống ánh sáng yếu hoặc ban đêm. Căng mắt ít hơn có nghĩa là ít đau đầu hơn và kinh nghiệm làm việc tốt hơn.


Instagram dark mode UI
Instagram dark mode UI

Google Fit dark mode UI via The Verge
Google Fit dark mode UI via The Verge
WhatsApp on desktop dark mode UI via What’s App
WhatsApp on desktop dark mode UI via What’s App

Nhưng chế độ tối thực sự là không có điều gì mới.

Bạn có nhớ mã máy tính màu xanh lá cây rơi xuống nền đen trong The Matrix không? Đó là sự khởi đầu với chế độ tối: những màu màn hình đơn sắc, cũ kỹ của những chiếc máy tính đầu tiên


Chiếc máy tính với dòng chữ màu xanh lá cây trên nền đen là chế độ tối OG
Chiếc máy tính với dòng chữ màu xanh lá cây trên nền đen là chế độ tối OG

Cái nhìn tối cổ điển đó đã lỗi thời trong thập niên 80 vì văn bản màu đen trên nền trắng được thiết kế để mô phỏng giao diện của mực trên giấy.


Đây là chuẩn mực trong gần ba thập kỷ, cho đến khi chế độ tối xuất hiện lần đầu tiên trong Windows Phone 7 vào năm 2010. Khi Google xác minh rằng chế độ tối giúp tiết kiệm pin, họ đã thêm tính năng này vào hệ điều hành Android vào năm 2018. Một năm sau, Apple đã theo sau với chế độ tối trên iOS và iPadOS.



Chế độ tối trong iOS 13 qua 9to5Mac
Chế độ tối trong iOS 13 qua 9to5Mac

Ưu điểm của việc sử dụng Chế độ tối


Chế độ tối chỉ giúp mắt dễ nhìn (nếu thực hiện đúng) nhưng phong cách này giúp tiết kiệm pin và thậm chí có thể khỏe mạnh hơn.


Hãy cùng kiểm tra 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


Bạn không nên cảm nhận đôi mắt của bạn, nhưng, bất cứ ai phân tích dữ liệu trên màn hình trong một thời gian dài đều biết rằng sau một thời gian, bạn bắt đầu có dấu hiệu mỏi mắt. Hội chứng thị giác máy tính (CVS) bao gồm đau mắt, mờ mắt, nhìn đôi, đau đầu, đau cổ, lưng và nhiều hơn nữa. Khi nói đến biểu đồ và đồ thị, chế độ tối có thể giúp giảm đau theo nghĩa đen.


Tăng tầm nhìn trong ánh sáng xung quanh thấp


Nếu bạn ngủ say và ai đó bật đèn sáng, bạn sẽ bị đau đầu.Nguyên tắc hoạt động tương tự đối 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 chúng ta dễ dàng xem nội dung hơn trong các tình huống ánh sáng yếu.



Tiết kiệm pin


Một số tiện ích kỹ thuật số với màn hình OLED có thể tắt các pixel đen khi chúng không được sử dụng.Chế độ tối sử dụng số pixel đen tăng lên, buộc thiết bị phải sử dụng ít năng lượng hơn.


Tăng cảm xúc


Rất nhiều người đang dùng UI chế độ tối vì lợi ích sức khỏe và tiết kiệm năng lượng hơn là lý do thẩm mỹ. Chế độ tối nhắc nhở họ rằng họ đang làm gì đó lành mạnh hơn một chút, điều này tạo ra cảm giác tốt giống giống như mà bạn vừa đi mua sắm.


Prevents ADD


Ánh sáng trắng và màu sắc có xu hướng làm giảm sự chú ý của bạn và nó trở nên khó khăn hơn khi bạn đang làm việc. Chế độ tối UI có thể tăng sự tập trung bằng cách hướng sự tập trung của bạn vào các vùng nội dung trong giao diện của bạn khi nội dung đó hiển thị và nền biến mất.





1 lượt xem0 bình luận

Bài đăng gần đây

Xem tất cả