7 mẹo hữu ích để thiết kế giao diện người dùng tối

Giao diện người dùng tối đã trở nên phổ biến và nhiều ứng dụng hiện cung cấp tùy chọn chuyển đổi giữa chế độ sáng và tối. Tuy nhiên, triển khai giao diện người dùng tối có thể là một nhiệm vụ đầy thách thức đòi hỏi phải chú ý cẩn thận đến màu sắc, phông chữ, hình ảnh và khoảng cách được sử dụng.

Bất kỳ lỗi nào trong các yếu tố này đều có thể dẫn đến trải nghiệm người dùng kém. Các mẹo sau đây sẽ giúp ích cho bạn khi thiết kế giao diện người dùng tối đầu tiên.

1. Không sử dụng màu đen tuyền

Khi thiết kế giao diện người dùng tối, hãy tránh sử dụng nền đen thuần túy. Tốt hơn là sử dụng màu xám đậm. Ví dụ: chủ đề thiết kế material design của Google đề xuất màu #121212.

Nền đen kết hợp với chữ trắng có thể có quá nhiều độ tương phản và gây mỏi mắt. Thay vào đó, các sắc thái tối hơn của màu xám có thể hiển thị bóng, độ sâu và độ cao một cách dễ dàng.

2. Đảm bảo độ tương phản của văn bản Đáp ứng các nguyên tắc của WCAG 2.0

Chọn sự kết hợp màu sắc mang lại mức độ tương phản phù hợp để văn bản dễ đọc. Nguyên tắc WCAG 2.0 nêu rõ rằng văn bản hoặc hình ảnh của văn bản phải có tỷ lệ tương phản ít nhất là 4,5:1 với văn bản lớn (ít nhất 18 điểm hoặc 14 điểm in đậm) phải có tỷ lệ tương phản ít nhất là 3:1.

Có một số công cụ để kiểm tra độ tương phản của màu sắc, bao gồm tiện ích mở rộng WAVE Chrome cũng kiểm tra mức độ truy cập của màu sắc.

3. Chọn kiểu phông chữ phù hợp

Bạn cũng phải tính đến các kiểu phông chữ của văn bản bao gồm kích thước, trọng lượng và chiều cao của dòng. Nếu bạn đang tìm kiếm các tùy chọn phông chữ, đừng quên có rất nhiều trang web cung cấp phông chữ miễn phí. Đối với kích thước phông chữ, hãy sử dụng các giá trị đủ để đảm bảo văn bản rõ ràng và hiển thị trên nền tối.

Xem xét các phong cách sau đây cho một trang web:

 body {
  font-family: "Courier New", monospace;
  font-size: 12px;
  font-weight: 200;
  line-height: 1; 
  color: #333333;
} 

Họ phông chữ khó đọc, cỡ chữ quá nhỏ và trọng lượng phông chữ quá nhẹ. Những kiểu này làm cho trang khó đọc như bạn có thể thấy từ ảnh chụp màn hình bên dưới.

Dưới đây là một số kiểu phù hợp mà bạn có thể sử dụng để thay thế.

 body {
  font-family: "Arial", sans-serif;
  font-size: 16px; 
  font-weight: 400; 
  line-height: 1.5; 
  color: #FFFFFF;
  background-color: #121212; 
}
 

Và đây là trang kết quả:

4. Tránh màu nhấn bão hòa

Màu bão hòa có thể quá sáng và mờ trên nền tối. Thay vào đó, hãy sử dụng các màu ít đậm và nhạt hơn. Bằng cách này, bạn tạo giao diện người dùng có văn bản hiển thị.

Để chứng minh, hãy xem xét hai kiểu nút sau:

 
.btn-saturated-blue {
  background-color: #121212;
  color: #0e0bf6;
}

.btn-muted-blue {
  background-color: #121212; 
  color: #4c5ab3;
} 

Màu xanh bão hòa có thể quá sáng và khó đọc trên nền tối, trong khi màu xanh lam nhạt mang lại độ tương phản tốt và dễ đọc hơn.

Một công cụ như có thể tô màu rất hữu ích để tạo các tổ hợp màu tuân theo nguyên tắc trợ năng.

5. Sử dụng Không gian âm để ngăn việc tạo giao diện người dùng nặng nề

Bảng màu tối có thể khiến giao diện người dùng trông nặng nề. Khi được sử dụng đúng cách, không gian âm có thể giúp bạn làm nổi bật các thành phần giao diện người dùng quan trọng và làm cho văn bản dễ quét. Khoảng cách vừa đủ cũng có thể làm cho thiết kế gọn gàng và hiện đại hơn.

Lấy ví dụ, trang đích của Apple. Khoảng cách giữa các phần tử làm cho trang trông rất hiện đại và thú vị về mặt hình ảnh, cho phép các phần tử quan trọng nổi bật.

6. Sử dụng các sắc thái màu khác nhau để thêm chiều sâu cho giao diện người dùng

Khi thiết kế giao diện người dùng nhẹ, bạn có thể sử dụng bóng đổ để thêm chiều sâu và độ cao cho các phần tử. Tuy nhiên, do nền tối nên đôi khi khó nhìn thấy bóng trong giao diện người dùng tối.

Bạn có thể đạt được độ sâu trong giao diện người dùng tối bằng cách sử dụng nhiều sắc thái của màu tối. Ví dụ: thay vì chỉ có một nền tối, bạn có thể thêm các sắc thái sáng hơn của cùng một màu cho các thành phần khác nhau như nút và phương thức.

7. Đảm bảo hình ảnh của bạn phù hợp với giao diện người dùng tối

Bạn không cần sử dụng cùng một hình ảnh cho chế độ sáng và chế độ tối. Bạn có thể sử dụng các truy vấn phương tiện CSS ở chế độ tối để tắt hình ảnh phù hợp với giao diện người dùng tối bất cứ khi nào người dùng chuyển sang chế độ tối.

Ví dụ: để áp dụng một mẫu nền cụ thể cho các phần của trang ở chế độ tối, bạn có thể sử dụng tên lớp .bgpattern và thêm mã sau vào biểu định kiểu của mình.

 @media (prefers-color-scheme: dark) {
  
  .bgpattern {
    background-image: url("/dark.jpg");
  }
} 

Truy vấn phương tiện này đảm bảo rằng hình nền được tham chiếu chỉ được hiển thị khi bảng màu ưa thích của người dùng là màu tối.

Khi nào nên sử dụng giao diện người dùng tối

Thiết kế giao diện người dùng tối là một cách tuyệt vời để mang lại tính thẩm mỹ hiện đại cho trang web hoặc ứng dụng của bạn. Chúng cũng có thể giảm thiểu tình trạng mỏi mắt và tiết kiệm pin. Tuy nhiên, giao diện người dùng tối không phù hợp với mọi ứng dụng và bạn phải luôn xem xét thương hiệu và cơ sở người dùng.

Nói chung, giao diện người dùng tối phù hợp nhất với các thương hiệu ưu tiên sự sang trọng, uy tín, tối giản hoặc bí ẩn. Chúng cũng có thể là lựa chọn tuyệt vời cho bảng điều khiển và công cụ trực quan.