Nguyên tắc thiết kế giao diện darkmode

Thiết kế giao diện người dùng chế độ tối rất phổ biến hiện nay, từ màn hình điện thoại di động đến TV. Chế độ darkmode thể hiện quyền lực, sự sang trọng, tinh tế và thanh lịch. Tuy nhiên, có rất nhiều thách thức trong việc thiết kế giao diện người dùng chế độ tối, và nếu nó không được thực hiện đúng cách, nó sẽ không đáp ứng được mong đợi. Trước khi đi sâu vào thiết kế giao diện này, người thiết kế nên cân nhắc nhiều yếu tố trước khi bắt đầu.

Các nhà vật lý học cho rằng, màu đen không phải là màu thực, mà màu đen nằm trong vùng hoàn toàn không có ánh sáng. Trong thí nghiệm chiếu ánh sáng mặt trời qua lăng kính, Ngài Isaac Newton thậm chí còn không đưa màu đen vào quang phổ màu.

Trong tâm lý học màu sắc, hầu hết các màu đại diện cho những điều khác nhau cho những người khác nhau. Trong văn hóa phương Tây, màu đen thường gắn liền với cái chết, bí ẩn và ma quỷ. Vì bản chất, màu xanh lá cây thường gắn liền với sự phát triển. Màu xanh lam tượng trưng cho hòa bình vì nó liên quan đến màu sắc của bầu trời và nước. Màu sắc là cảm xúc.

Hiệu ứng màu sắc cũng khác nhau giữa các nền văn hóa. Ví dụ, màu tím đại diện cho sự sang trọng trong nhiều nền văn hóa cổ đại, và thuốc nhuộm màu tím rất đắt tiền, và chỉ những gia đình hoàng gia hiếm hoi mới có thể mua được.

Các sản phẩm kỹ thuật số có giao diện người dùng ở chế độ tối — liên quan đến quyền lực, sang trọng và bí ẩn — đang là xu hướng tăng trưởng tích cực. Mặc dù đã có khá nhiều người khẳng định 1 điều rằng chế độ tối có thể giảm đi sự mỏi mắt và tiết kiệm pin, nhưng không có bằng chứng nào cho thấy điều này là đúng cả. Tuy nhiên, không thể phủ nhận rằng chế độ tối là một lựa chọn đẹp hơn.

Giao diện người dùng tối so với giao diện người dùng sáng

Không phải tất cả các chủ đề đều phù hợp với các chủ đề tối. Các nhà thiết kế nên xem xét sự phù hợp với thương hiệu, tâm lý văn hóa và màu sắc, đồng thời cân nhắc tác động cảm xúc trước khi đưa ra quyết định.

Các ứng dụng tài chính hướng đến thế hệ trẻ có thể cung cấp một chủ đề tối thú vị, nhưng điều này không phù hợp với các trang web ngân hàng lớn với số lượng lớn người dùng. Khi kiểm tra số dư và thanh toán hóa đơn, quá giàu, quá tối và quá sành điệu có thể khiến người dùng thất vọng.

Như chúng ta đã biết, giao diện người dùng tối của các ứng dụng B2B SaaS rất khó thiết kế. Các phần tử giao diện người dùng Web tiêu chuẩn như bảng dữ liệu, tiện ích con, biểu mẫu và menu thả xuống trông khác lạ trên chủ đề tối. Vì đã sử dụng nhiều cách phối màu không được phù hợp lắm với giao diện người dùng tối nên đây có lẽ có thể là một thách thức lớn đối với các nhà thiết kế.

Ngoài ra, có nhiều lý do chính đáng để sử dụng giao diện chế độ tối, chẳng hạn như:

Khi thiết kế thưa thớt và tối thiểu, chỉ có một số loại nội dung

Khi chế độ tối phù hợp với môi trường và mục đích sử dụng, chẳng hạn như các ứng dụng giải trí ban đêm

Tạo ra cho website vẻ ngoài trông ấn tượng và thu hút

Hơn nữa, điều này không được khuyến khích trong một số trường hợp:

Khi có nhiều văn bản (khó đọc trên nền tối)

Khi có nhiều loại nội dung hỗn tạp

Khi thiết kế yêu cầu nhiều màu

So sánh thiết kế giao diện chế độ tối

Chủ đề tối (darkmode) không phải là 1 chủ đề đen. Một trong những mối quan tâm chính của chủ đề Bóng tối là độ tương phản để các yếu tố hình ảnh có thể tách rời và văn bản dễ đọc. Hầu hết các nhà thiết kế sẽ nghĩ rằng sử dụng màu đen là lựa chọn tốt nhất để đạt được độ tương phản mạnh. Tuy nhiên, tốt nhất là không sử dụng màu đen tuyền (# 000000) cho màu nền hoặc bề mặt. Màu đen có lẽ tốt nhất nên được dành cho các phần tử, các giao diện người dùng khác và chúng nên được sử dụng một cách tiết kiệm. Ví dụ: màu đen thực sự có thể được sử dụng cho các phần tử hoặc đường viền giao diện người dùng nhỏ.

Chủ đề Tối trong Thiết kế Vật liệu của Google đề xuất màu xám đậm (# 12122) làm màu nền của chủ đề Tối. Ngoài ra, nhiều nhà thiết kế đề xuất thêm màu xanh lá cây đậm tinh tế cho màu xám đậm. Điều này có xu hướng tạo ra tông màu tối tốt hơn và bảng màu chủ đề tối dễ chịu hơn cho màn hình kỹ thuật số.

Trang web Brittany Chiang kết hợp màu xám đậm với màu xanh lam để tạo ra một bảng màu tối dễ chịu.

Bảng màu xám cũng giúp tạo ra chiều sâu, vì hiệu ứng bóng đổ dễ nhìn hơn màu đen.

Các bạn sẽ cần đặc biệt chú trọng tới độ tương phản văn bản và hình ảnh trong giao diện người dùng tối.

Nguyên tắc hỗ trợ tiếp cận nội dung web (WCAG) quy định rằng “độ tương phản của biểu diễn văn bản trực quan ít nhất phải là 4,5: 1”, ngoại trừ văn bản lớn, phải có tỷ lệ tương tự. Hệ số phản xạ ít nhất là 3: 1. Do đó, các nhà thiết kế cần đảm bảo rằng nội dung vẫn rõ ràng ở chế độ tối.

Bạn cũng nên kiểm tra xem độ tương phản giữa các màn hình khác nhau và các phần tử giao diện người dùng khác trên thiết bị (chẳng hạn như thẻ, nút, trường văn bản và biểu tượng) có chính xác hay không. Nếu có sự tách biệt không thể nhận thấy giữa các thành phần giao diện người dùng, thiết kế có thể gây mất tập trung hoặc mờ nhạt.

Độ tương phản không đủ giữa văn bản và nền trong thiết kế giao diện người dùng tối ở bên trái.

Chú ý đến màu sắc

Màu sắc sẽ có thể nổi bật hơn trong giao diện người dùng tối. Tránh sử dụng màu sắc bão hòa, tốt nhất là sử dụng màu nhấn nhẹ nhàng, không bão hòa để xuất hiện tối. Ngoài ra, theo 1 phương pháp tốt nhất, màu sắc sẽ cần đáp ứng 1 số tiêu chuẩn: WCAG AA ít nhất là 4,5: 1 khi được sử dụng với các loại văn bản.

Khi xác định cách phối màu cho giao diện người dùng tối, Google đề xuất một số màu nên được sử dụng trong hầu hết các chủ đề tối. Sử dụng bảng phối màu Tách bổ sung – Isosceles Triangle có thể hữu ích. Cách phối đồ bao gồm một màu chính và hai màu liền kề bổ sung cho màu chính. Điều này cung cấp độ tương phản cần thiết cho ngoại hình.

Ứng dụng Jabra Sound+ giới hạn bảng màu giao diện người dùng tối với hai màu nhấn.

Sự phối màu chính xác giúp tạo ra độ tương phản tốt. Coloring chính là một công cụ vô cùng hữu ích để chọn sử dụng các kết hợp màu phù hợp với khả năng tiếp cận của văn bản và cả màu nền.

Khi xuất hiện trên nền tối, văn bản và các yếu tố cơ bản (chẳng hạn như các nút và biểu tượng) phải đáp ứng các tiêu chuẩn về tính dễ đọc. Như trong ứng dụng Jabra Sound + ở trên, văn bản và biểu tượng có thể sử dụng các màu khác ngoài màu trắng.

Trang web có tên Material Design của Google đã có một trình tạo bảng màu cực kì hữu ích (ở trong “Công cụ chọn màu”) chúng có thể giúp các nhà thiết kế tạo bảng màu và áp dụng chúng vào giao diện người dùng. Khả năng tiếp cận của sự kết hợp màu sắc cũng có thể được đo lường bằng cách sử dụng các công cụ màu sắc.

“Các bạn có thể sử dụng các màu tương phản thật mạnh mẽ để cải thiện được khả năng đọc. Nhiều yếu tố ảnh hưởng đến cảm nhận màu sắc, bao gồm kích thước và độ dày phông chữ, độ sáng màu, độ phân giải màn hình và điều kiện ánh sáng.”

• Hướng dẫn Giao diện Người của Apple

Ít hơn là nhiều: Tận dụng không gian âm

Một trong những yếu tố cơ bản của thiết kế giao diện người dùng tối thành công là việc sử dụng hiệu quả không gian âm. Nếu thiết kế không đẹp, giao diện người dùng tối có thể khiến các sản phẩm kỹ thuật số trông nặng nề và độc đoán. Để có thể cân bằng, các nhà thiết kế có thể sử dụng không gian âm trong thiết kế để làm cho giao diện chế độ tối trở nên nhẹ nhàng và đơn giản. Khi được sử dụng khéo léo, không gian âm làm cho giao diện người dùng tối dễ đọc hơn và giúp mọi người dễ dàng hấp thụ thông tin hơn.

Nhà soạn nhạc người Pháp Claude Debussy từng nói: “ m nhạc là không gian giữa các nốt nhạc.” Khi quét giữa các thành phần bố cục, không gian âm cũng vậy. Nếu không có khoảng cách, bộ não con người không thể quét các điểm quan tâm và có xu hướng đi lang thang.

Chúng ta không thể nào nhồi nhét quá là nhiều các yếu tố và văn bản, đây là hạn chế của thiết kế UI tối. Thế nhưng bằng cách xem xét cẩn thận các hệ thống phân cấp 1 cách trực quan trong các giao diện người dùng tối, thì các designer có thể làm cho sự sáng tạo của họ dễ nhận thấy hơn, do đó nâng cao trải nghiệm người dùng.

Nét chữ
Mọi đoạn văn bản trong giao diện người dùng tối cần được kiểm tra cẩn thận. Tiêu điểm kép: độ rõ ràng và độ tương phản. Đầu tiên, đó là về kích thước. Văn bản cần phải đủ lớn để có thể đọc được (văn bản nhỏ trên nền tối sẽ khó đọc hơn). Thứ 2, du cho phải có đủ độ tương phản giữa cả văn bản và nền.

Hàng nghìn phông chữ kỹ thuật số hiện đã được hỗ trợ và các thông báo có thể được hiển thị dễ dàng. Các designer có thể có cách giảm thiểu các vấn đề về khả năng đọc của người dùng bằng cách tăng độ tương phản và điều chỉnh kích thước phông chữ, khoảng cách ký tự và chiều cao dòng của văn bản nhỏ hơn.

W3C khuyến nghị AAA nên có tỷ lệ tương phản ít nhất là 7: 1 đối với văn bản có kích thước thông thường (dưới 18 điểm nếu nó không được in đậm). Điều này cũng áp dụng cho các phần tử giao diện người dùng khác, chẳng hạn như biểu tượng, hình ảnh văn bản và nhãn văn bản, chẳng hạn như nhãn nút. Trách nhiệm của nhà thiết kế là đảm bảo rằng bất kỳ ai cũng có thể truy cập vào tất cả các sản phẩm kỹ thuật số.

Các designer có thể sử dụng vô số tùy chọn để tạo ra các phông chữ tuyệt vời hoạt động tốt trong giao diện người dùng tối. Phông chữ Google, thư viện phông chữ và Adobe Typekit là một số công cụ cung cấp tích hợp trang web hoặc ứng dụng đơn giản và nhiều lựa chọn công cụ.

Trang AirPods Pro trên trang web của Apple sử dụng phông chữ lớn và độ tương phản mạnh để đạt được hiệu quả tối đa.
sâu

Chủ đề tối không có nghĩa là nó phẳng. Theo chủ đề ánh sáng, hệ thống ánh sáng và bóng tối tạo cảm giác có chiều sâu. Đối với giao diện người dùng tối thì khó hơn vì chúng chủ yếu chứa các bề mặt tối với các điểm nhấn màu thưa thớt. Tuy nhiên, các nhà thiết kế có thể sử dụng ba đến bốn mức độ sâu và cách phối màu tương ứng để tạo độ sâu cho văn bản.

Hầu hết các hệ thống thiết kế hiện đại đều sử dụng các hệ thống thể hiện chiều sâu, cảm giác về chiều sâu tương ứng với thế giới tự nhiên. Độ sâu giúp nhấn mạnh hệ thống phân cấp trực quan của giao diện. Ví dụ, hộp thoại cảnh báo.

Bề mặt được chiếu sáng theo nhiều cách khác nhau để chỉ ra các mức độ sâu khác nhau. Vị trí của bề mặt càng cao trong thang đo thì bề mặt đó càng sáng. Bề mặt sáng hơn giúp dễ dàng phân biệt chiều cao giữa các phần tử và tạo hiệu ứng đổ bóng, làm cho các cạnh của mỗi bề mặt trở nên rõ ràng hơn.

Độ sâu của giao diện người dùng tối có thể được mô tả bằng cách sử dụng thang đo độ sâu.
(Dựa trên thiết kế material design)

Mọi cấp độ tạo màu đều cần phải cẩn thận. Tốt nhất là không vượt quá bốn hoặc năm cấp độ. Các designer cần phải xem xét tới độ tương phản của văn bản có độ sâu lớn (sáng hơn). Nếu màu nền không đủ tối để cung cấp mức độ tương phản ít nhất là 15,8: 1 giữa văn bản trắng và bề mặt, thì độ tương phản của văn bản phải sáng hơn tiêu chuẩn 4,5: 1. Trong một số trường hợp nhất định, các bạn tốt hơn nên chỉ định rằng các màu văn bản của các phần tử nên được đặt thành màu đen tuyền (# 000000) trong hệ thống thiết kế để tạo độ tương phản tốt với nền xám nhạt.

Cảm hứng để thiết kế giao diện người dùng tối

Dựa trên các nguyên tắc trên, đây là một số ví dụ điển hình về thiết kế giao diện người dùng tối:

Atom Finance sử dụng chủ đề tối tinh tế và được giới hạn ở ba màu nhấn. Bố cục sử dụng không gian âm và thiết kế khoảng cách tối giản, phù hợp với các trang web tài chính phức tạp. Trang web sử dụng các bóng mờ với các độ sâu phần tử khác nhau trong giao diện người dùng.

Cả hai trang web với chủ đề tối này đều sử dụng phông chữ đậm.Các bạn nên sử dụng bóng đổ 1 cách thật cẩn thận với một màu nhấn duy nhất mà thôi. Nó nên là màu phù hợp với thiết kế giao diện người dùng tối.

Dù cho những thách thức được đặt ra khi sử dụng các chủ đề tối trong darkmode trong các ứng dụng SaaS, bảng điều khiển nên là 1 thứ có thể trực quan hóa dữ liệu này của IBM là một ví dụ điển hình. Số lượng màu nhấn được giữ ở mức tối thiểu và trang web sử dụng các bóng mờ để hiển thị các độ sâu giao diện người dùng khác nhau.

Các ứng dụng dành cho thiết bị di động này tuân theo các phương pháp hay nhất về thiết kế giao diện người dùng ở chế độ tối, chỉ sử dụng màu đen làm đường viền, sử dụng bóng thích hợp cho các yếu tố khác nhau và sử dụng một số hạn chế về màu sắc.

chỉ cần đặt

Quyết định sử dụng thiết kế giao diện người dùng tối cần được thực hiện cẩn thận. Không nên sử dụng giao diện này vì những lý do sai trái – sang trọng, khác biệt hoặc bắt chước thiết kế của người khác. Các nhà thiết kế cần có đủ lý do để lựa chọn và cân nhắc nội dung, môi trường sử dụng và thiết bị trước khi đưa ra quyết định.

Chủ đề tối phù hợp với một số sản phẩm kỹ thuật số, nhưng nó thực sự khó thực hiện đối với những sản phẩm này. Sự đơn giản là chìa khóa. Chúng rất phù hợp để trình bày nội dung tối giản, trực quan hóa dữ liệu, các trang web truyền thông và nền tảng giải trí. Chế độ tối không phù hợp với các nền tảng B2B phức tạp, lượng dữ liệu lớn, các trang có lượng văn bản lớn và lượng lớn nội dung phong phú.

Đối với những nhà thiết kế dũng cảm, những người sẵn sàng phá bỏ ranh giới phong cách mới và khám phá giao diện người dùng tối qua lăng kính của cảm xúc và thẩm mỹ, họ cung cấp một sân chơi thú vị với đầy những khả năng vô tận. -Về “mặt tối”.