Cần lưu ý gì khi thiết kế chế độ Dark Mode cho Web/App?

Chế độ Dark Mode (nền tối) là 1 tùy chọn hiển thị giao diện được thiết lập dựa theo hệ điều hành thiết bị, của từng trang web, từng ứng dụng riêng biệt.
Mục đích của chế độ Dark Mode là làm giảm ánh sáng phát ra từ màn hình thiết bị.

Dark Mode ngày càng được ưa chuộng và sử dụng phổ biến bởi người dùng công nghệ ở khắp mọi nơi trên thế giới.

Tuy nhiên, có vài lưu ý nhỏ dành cho các bạn UI Designer cũng như các Coder khi thiết kế chế độ "Dark Mode". Hãy cùng tìm hiểu qua nội dung bên dưới nhé:

Đầu tiên bạn cần nhớ rằng:

Chế độ Dark Mode không dành cho tất cả thương hiệu. 

Trước khi quyết định đưa chế độ Dark Mode vào UI Design, hãy đánh giá đúng tệp khách hàng, giá trị thương hiệu, tính cách và màu sắc thương hiệu đang sử dụng.

Nếu mọi thứ OK, triển khai thôi!!!

1. Đừng sử dụng màu đen thuần khiết

Sẽ rất khó chịu cho mắt chúng ta khi nhìn vào màu "đen hoàn toàn" trên các thiết bị điện tử.

Hãy làm cho nó bớt tương phản với 1 chút xám nhé.

2. Phân cấp thông tin bằng tương phản

Trong chế độ Dark Mode, bạn có thể tạo hệ thống phân cấp nội dung bằng cách điều chỉnh Contrast đối tượng.

Các đối tượng được ưu tiên, càng quan trọng thì cần sáng hơn.

Lưu ý: hạn chế sử dụng Shadow trong chế độ Dark Mode.

3. Lưu ý độ trung hòa màu sắc khi hiển thị trên Dark Mode

Màu sắc sẽ nổi bật hơn khi đặt trên background màu đen. Do đó hãy tránh sử dụng các màu có độ bão hòa cao.

Hãy sử dụng các màu pastel hoặc pha thêm màu trắng & xám để thiết kế trở nên dịu mắt hơn.

4. Kiểm tra hình ảnh trước khi sử dụng

Các hình ảnh được đưa lên Dark Mode cũng cần điều chỉnh Contrast phù hợp.

Giảm độ tương phản và độ sáng để hình ảnh dễ nhìn hơn.

5. Hãy cho user được lựa chọn

Có thể UI Design của Dark Mode rất đẹp, nhưng hãy cung cấp cho người dùng Toggle Button để chuyển đổi giữa chế độ Light & Dark Mode.

---

Bài viết được tổng hợp, biên soạn và thiết kế minh họa bởi Keyframe Team.

Nếu bạn muốn học và thực hành sâu hơn về cách thiết kế chế độ Dark Mode thì có thể tham gia khóa học Figma UI Design tại Keyframe nhé.
Xem khóa học tại đây: https://keyframe.vn/khoa-hoc-offline/khoa-hoc-figma-ui-design-80.html