Xu hướng phát triển UI: Một tương lai “đen tối”

Chào mừng bạn đến với thời kỳ trỗi dậy của dark mode (giao diện nền tối).

Thời điểm hiện tại, khi chúng ta đã đi được nửa quãng đường của năm 2019, có thể chắc chắn một điều rằng: Dark mode đã “thống trị” gần như mọi hệ điều hành và trong từng ứng dụng.

Phiên bản iOS 13 cũng sẽ được trên bị Dark mode
Google Chrome Dark Mode interface ui chrome google browser sketch template clean minimal mockup download download free macosx mac darkmode dark mockup
Dark mode trên Chrome
Dark mord trên macOS
Kết quả hình ảnh cho dark mode facebook
Messenger cũng có dark mode

Tuy nhiên, hãy bắt đầu bằng việc khẳng định rằng dark mode không phải là thứ gì đó mới mẻ hoàn toàn. Ở những ngày đầu, trong thời kì sơ khai của cuộc cách mạng máy tính cá nhân, dark mode đã được biết đến như hình ảnh giao diện với các ký tự xanh lá trên nền đen cũ kỹ, nhưng thực chất đó chỉ là hệ quả của công nghệ màn hình lạc hậu thời bấy giờ.

Những chiếc máy tính thời xưa đã có “dark mode”

Thế mà hàng chục năm sau, công nghệ sản xuất màn hình đã vươn mình đến những thành tựu vượt bậc, mà dark mode vẫn sống sót và một lần nữa xuất hiện trở lại. Vậy sự thật đằng sau là gì?


“Lướt” mọi lúc mọi nơi 

Có hai nguyên nhân chính giải thích tại sao ngày nay, các nhà phát triển phần mềm lại mong muốn áp dụng dark mode vào giao diện ứng dụng của mình đến thế.

Đầu tiên, các thể loại màn hình điện tử (điện thoại, máy tính bảng, laptop…) xuất hiện ở bất cứ đâu. Chúng ta sử dụng thiết bị di động xuyên suốt ngày và đêm. Lúc này, vai trò của dark mode là giúp mắt bạn thư giãn, dễ chịu, đặc biệt khi bạn lướt newsfeed lần cuối rồi đi ngủ (mặc dù “lần cuối” đôi khi có thể là 3 tiếng sau đó). 

Lý do thứ hai là việc chuyển tiếp từ công nghệ màn hình LCD sang OLED như Apple, Google, Samsung và nhiều hãng sản xuất điện thoại khác đang làm trên thị trường. Đặc trưng của tấm nền OLED là chúng sẽ tiêu thụ điện năng gần như bằng 0 khi hiển thị màu đen. Trong khi với màn hình LCD, đèn nền sẽ chiếu sáng cho toàn bộ màn hình kể cả những điểm ảnh có màu đen. Đây thực sự là tin tốt cho tuổi thọ của pin, chỉ bằng việc áp dụng giao diện dark mode, các nhà phát triển phần mềm có thể dễ dàng giúp thời lượng sử dụng pin tăng lên đáng kể.


Một số hướng dẫn căn bản khi thiết kế dark mode

Đầu tiên cần phân biệt rõ hai khái niệm dark (tối) và black (đen). Việc này không đơn giản như thể chỉ cần đổi background (nền) từ trắng sang đen là xong, vì như vậy bạn không thể nào áp dụng các hiệu ứng drop shadow (đổ bóng) được nữa, thiết kế sẽ trở nên phẳng lì và nhàm chán vô cùng. Để làm các vật thể trong thiết kế trở nên nổi bật và chân thực hơn, các nguyên tắc cơ bản về lighting-shading (ánh sáng-bóng đổ) nên được chú ý và nắm rõ, bên cạnh đó việc phân cấp (hierarchy) cũng sẽ trở nên dễ dàng hơn.

Hai hình vuông có cùng sắc độ xám, một hình đặt trên nền đen 100%, (trái), một hình đặt trên nền xám (121212).

Một số màu bậc một (primary color), như nút bấm (button) màu xanh dương (blue) trong ví dụ bên dưới vẫn tạo được đủ độ tương phản và rõ nét trên cả hai nền giao diện lightdark

Thế nhưng trong một số trường hợp, khi được áp dụng vào những khối text (văn bản), sắc xanh sẽ không ổn tí nào. Mẹo ở đây là bạn có thể giảm saturation (độ bão hoà) của màu đó thấp xuống một tí để tạo sự tương phản tốt hơn. 

Nên áp thêm một layer khoảng 40% trắng cho các màu bậc một để giảm saturation bớt xuống.

Ví dụ trong tài liệu Material Guidelines của Google cũng khuyên nên áp một layer trắng khoảng 40%, để giảm độ bão hoà của các màu bậc một nhằm mang lại trải nghiệm người dùng tốt hơn. Stark là công cụ rất tiện dụng và hữu ích trong việc đánh giá độ tương phản giữa hai lớp layer với nhau


Tăng cường trải nghiệm đọc

Một quy luật cực kì đơn giản mà bạn nên bỏ túi ngay: Không nên chọn màu chữ đen hoàn toàn 100% nằm trên nền trắng hoàn toàn 100% và ngược lại. Vì các kí tự có màu sáng trắng 100% sẽ trở nên rõ nét quá mức trên nền đen tối 100%, khiến mắt mệt mỏi khi phân biệt các đường nét của mỗi kí tự trong đoạn văn.

Và tương tự trong trường hợp đặt chữ đen 100% trên nền trắng 100%, lúc này phần nền quá trắng sẽ hấp thu ánh sáng quá nhiều, tạo sự tương phản quá mạnh, khiến ta khó lòng tập trung vào các kí tự được nữa. Mẹo ở đây là bạn nên giảm độ trắng của chữ xuống còn khoảng 90% trên nền đen, hay tăng xám của nền lên 5%, đối với chữ đen. Điều này không chỉ giúp tăng thêm phần thẩm mỹ, mà còn giúp người dùng tránh bị mỏi mắt (eye strain) khi phải nhìn màn hình quá lâu trong ngày.


Dark mode sẽ sống mãi theo thời gian

Khoảng thời gian nhìn vào màn hình điện tử đang tăng dần, con người ngày càng phải làm việc và tiếp xúc với chúng nhiều hơn. Như đã trình bày ở trên, đây là một trong những nguyên nhân chủ chốt khiến xu hướng giao diện dark mode trở nên quan trọng hơn bao giờ hết cho sức khoẻ người dùng. Hiện tại những hệ điều hành phổ biến đã trang bị tính năng dark mode cho người dùng, như macOS, Android, Windows và gần đây nhất là iOS 13.

Có lẽ một trong những trường hợp hiếm hoi nhất mà chúng ta không nên áp dụng dark mode là khi người dùng ở ngoài trời cực sáng, nhưng điều này có thể xét vào trường hợp ngoại lệ.

Nếu bàn về tính tiếp cận (accessibility) thì dark mode làm độ tương phản của toàn thể giao diện giảm xuống, có nghĩa là trải nghiệm đọc (readability) không được cải thiện mấy.

Nhưng nếu không có dark mode, thì bạn cứ tưởng tượng thử xem, trước lúc đi ngủ, những giây phút xem phim, nhắn vài cái tin cho bạn bè, lướt newsfeed,…có thể làm bạn thức đến sáng không chừng. Đèn nền quá sáng của các thiết bị máy tính sẽ làm não bạn nhầm tưởng đang là ban ngày, và khiến bạn cực kì khó ngủ. Trái lại, dark mode tuy có độ tương phản không cao, nhưng có thể giúp người dùng có một cuộc sống khoẻ mạnh và hiệu năng hơn. Vấn đề là tuỳ thuộc vào hoàn cảnh và nhu cầu sử dụng của người dùng.

Bes future1
Nguồn Uldz 

Và đó là lý do vì sao chúng cần trang bị tính năng hay ho như automatic dark mode (tự động chuyển đổi sang dark mode) cho mọi người. Bạn sẽ không cần phải bật/tắt thủ công mỗi khi màn đêm buông xuống, và điều này cũng góp phần tăng thời lượng sử dụng pin lâu hơn, vì công nghệ màn hình OLED đang dần phổ biến trên thị trường. 

Kết quả hình ảnh cho ios 13 automatic
iOS 13 sẽ được trang bị tính năng tự động chuyển sang dark mode dựa theo thiết lập của người dùng, tương tự Night Shift.

Cũng có một lưu ý khá quan trọng khác là chúng ta chỉ nên làm “tối” những phần nào cần thiết mà không ảnh hưởng đến trải nghiệm sử dụng của người dùng. Bạn có thể thấy các ứng dụng soạn thảo văn bản Word, Pages, hay các công cụ thiết kế như Illustrator, Photoshop, Sketch không làm tối hết hoàn toàn, phần để soạn thảo hay sáng tạo nội dung thì vẫn là một trang trắng. 

Kết quả hình ảnh cho office 2019 dark mode
Dark mode trên Microsoft Office PowerPoint
Dark mode trên Sketch

Tóm lại, dù bạn có muốn tin hay không thì tương lai của xu hướng thiết kế giao diện người dùng sẽ là một màu “đen tối”.


Biên tập: Đông Đông

Cùng tác giả

#Tag

giao diện UI

iDesign Must-try

Cheryl Vo: ‘Trước khi thiết kế, mình luôn hỏi tại sao?’
Cheryl Vo: ‘Trước khi thiết kế, mình luôn hỏi tại sao?’
Tính khái niệm trong Design Decisions (tạm dịch: Quyết định thiết kế) của một thiết kế hay là hành trình những cảm xúc Cheryl Vo sẽ được mở khóa từ…
Các hiệu ứng thị giác trong UI (User Interface)
Các hiệu ứng thị giác trong UI (User Interface)
Biết cách ứng dụng các hiệu ứng thị giác có thể dùng để cân bằng các icon, căn chỉnh lề các thành phần thiết kế một cách chính xác và…
Hiểu đơn giản về UX/UI - Học UX cần tố chất gì và UI cần thế mạnh nào?
Hiểu đơn giản về UX/UI - Học UX cần tố chất gì và UI cần thế mạnh nào?
Trong thời đại cách mạng kĩ thuật số, nơi mà các màn hình điện tử smartphone, laptop, hay máy tính bảng trở thành chiếc cầu nối quan trọng truyền tải…
Thuật ngữ UX/UI kỳ 3 - Tính khả dụng trong thiết kế
Thuật ngữ UX/UI kỳ 3 - Tính khả dụng trong thiết kế
Thực tiễn cho thấy cấu trúc dữ liệu là cách tuyệt vời để tối ưu hóa công việc và đó là một trong những lý do tại sao những thứ…
[Turorial] Hướng dẫn lựa chọn font chữ phù hợp cho website của bạn
[Turorial] Hướng dẫn lựa chọn font chữ phù hợp cho website của bạn
Thiết kế website là một quá trình dài hơi cần bỏ ra nhiều công sức. Bạn phải cân nhắc nhiều yếu tố, từ cách phối màu đến xác định vị…
Khám phá thiết kế UI kỳ 6
Khám phá thiết kế UI kỳ 6
Khám phá thiết kế UI là chuỗi các tác phẩm liên quan đến thiết kế giao diện web/app và các thiết kế tương tác nhằm mang lại trải nghiệm thân thiện…