Bất kỳ lỗi nào trong các yếu tố này đều có thể dẫn đến một trải nghiệm người dùng kém. 7 mẹo sau đây sẽ giúp ích cho bạn khi thiết kế giao diện người dùng tối lần đầu tiên.
1. Không sử dụng màu đen tuyền
Hãy tránh sử dụng nền đen thuần túy mà nên dùng màu xám đậm. Ví dụ: theme 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. Các sắc thái tối của màu xám có thể hiển thị bóng, độ sâu và elevation một cách dễ dàng.
2. Đảm bảo độ tương phản của chữ đá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 để chữ dễ đọc. Nguyên tắc WCAG 2.0 nêu rõ chữ hoặc ảnh của chữ phải có tỷ lệ tương phản ít nhất là 4,5:1; chữ 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 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 (extension) WAVE Chrome.
3. Chọn style phông chữ phù hợp
Bạn cũng phải tính đến các style phông chữ, bao gồm kích thước, weight và chiều cao của dòng. Với kích thước phông chữ, hãy sử dụng các giá trị đủ để đảm bảo chữ hiển thị rõ ràng trên nền tối.
Xem xét các style sau đây cho một trang web:
body {
font-family: "Courier New", monospace;
font-size: 12px;
font-weight: 200;
line-height: 1;
color: #333333;
}Phông khó đọc, cỡ chữ quá nhỏ và weight phông chữ quá nhẹ, như bạn có thể thấy từ ảnh chụp bên dưới.
Dưới đây là một số style phù hợp mà bạn có thể sử dụng.
body {
font-family: "Arial", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #FFFFFF;
background-color: #121212;
}
Và đây là kết quả:
4. Tránh màu nhấn (accent color) bão hòa
Màu bão hòa có thể trông quá sáng và mờ trên nền tối. Thay vào đó, hãydùng các màu ít đậm và nhạt hơn.
Ví dụ, hãy xem xét hai kiểu nút sau:
/* Saturated blue */
.btn-saturated-blue {
background-color: #121212;
color: #0e0bf6;
}
/* Muted blue */
.btn-muted-blue {
background-color: #121212;
color: #4c5ab3;
}Màu xanh bão hòa quá sáng và khó đọc trên nền tối, trong khi màu xanh lam nhạt có độ tương phản tốt và dễ đọc hơn.
Một công cụ như colorable rất hữu ích để tạo các tổ hợp màu dễ nhìn.
5. Sử dụng khoảng trắng để giao diện người dùng không bị nặng nề
Bảng màu tối có thể khiến giao diện người dùng trông bị nặng nề. Khi được dùng đúng cách, khoảng trắng 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 chữ dễ đọc hơn. Khoảng cách vừa đủ cũng có thể giúp thiết kế gọn gàng và hiện đại hơn.
Ví dụ, trang chủ của Apple. Khoảng cách giữa các phần tử trên trang làm cho trang trông rất hiện đại và làm nổi bật 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 UI
Khi thiết kế giao diện người dùng sáng, bạn có thể sử dụng bóng đổ để thêm chiều sâu và elevation cho các phần tử. Tuy nhiên, khi dùng nền tối, đôi khi khó nhìn thấy bóng trong giao diện.
Bạn có thể đạt được elevation trong UI 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 phần khác nhau như nút bấm và modal.
7. Đảm bảo ảnh 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à tối. Bạn có thể sử dụng các truy vấn phương tiện (media query) CSS ở chế độ tối để thay ảnh phù hợp với UI 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 một số phần của trang ở chế độ tối, bạn có thể sử dụng tên lớp .bgpattern và thêm code sau vào stylesheet của mình.
@media (prefers-color-scheme: dark) {
/* Apply this style in dark mode only */
.bgpattern {
background-image: url("/dark.jpg");
}
}
Truy vấn phương tiện này đảm bảo rằng hình nền đó chỉ được hiển thị khi người dùng sử dụng chế độ 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 hiện đại cho trang web hoặc ứng dụng của bạn. Chúng cũng có thể giúp 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ải phù hợp với mọi ứng dụng và bạn phải luôn luôn cần cân nhắc các yếu tố về thương hiệu và tệp người dùng.
Nói chung, UI tối phù hợp nhất với các thương hiệu ưu tiên sự sang trọng, 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 (dashboard) và các công cụ trực quan.
Tìm hiểu các khóa học lập trình của FUNiX tại đây:
Vân Nguyễn
Dịch từ: https://www.makeuseof.com/dark-ui-design-tips/
Bình luận (0
)