Dark mode design: Mẹo để tạo các trang web và ứng dụng chủ đề tối

Dark mode design: Mẹo để tạo các trang web và ứng dụng chủ đề tối

Bởi KhanhThi vào 2/4/20 lúc 10:31
  1. KhanhThi

    KhanhThi CTV nữ

    Đã được thích:
    513
    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ỷ.

    darkmode.

    Ư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

    darkmode-1.

    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

    darkmode-3.

    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.
     
    Có thể bạn thích
Rất hy vọng bạn sẽ có ý kiến đóng góp để mình hoàn thiện hơn.

Bình luận

Thảo luận trong 'Kiến thức thiết kế' bắt đầu bởi KhanhThi, 2/4/20.

Chia sẻ trang này