Hoặc những điều cần lưu ý khi phát triển chế độ tối cho ứng dụng, trang web
Năm 2018 cho thấy chế độ tối đang xuất hiện. Bây giờ chúng ta đã đi được nửa năm 2019, chúng ta có thể tự tin nói rằng: họ ở đây và ở khắp mọi nơi.
Hãy bắt đầu với thực tế rằng chế độ tối không phải là một khái niệm mới chút nào. Nó đã được sử dụng trong một thời gian khá dài. Và thực tế, ngày xưa, trong một thời gian dài, đây là thứ duy nhất họ sử dụng: màn hình thuộc loại “xanh trên đen”, nhưng chỉ vì lớp phủ phát quang bên trong phát ra ánh sáng xanh lục khi tiếp xúc với bức xạ .
Nhưng ngay cả sau khi màn hình màu ra đời, chế độ tối vẫn tiếp tục tồn tại. Tại sao cái này rất?
Có hai động cơ chính giải thích tại sao ngày nay mỗi người thứ hai lại vội vàng thêm chủ đề tối vào ứng dụng của họ. Trước hết: máy tính có ở khắp mọi nơi. Ở mọi nơi chúng ta nhìn đều có một loại màn hình nào đó. Chúng ta sử dụng thiết bị di động từ sáng đến tối muộn. Sự hiện diện của chế độ tối giúp giảm mỏi mắt khi bạn đi ngủ trước khi đi ngủ trong “lần cuối cùng” cuộn qua nguồn cấp dữ liệu xã hội của bạn. mạng. (Nếu bạn giống tôi, "lần trước" có thể có nghĩa là cuộn giấy dài 3 giờ . Chế độ tối? Vâng, làm ơn! )
Một lý do khác là công nghệ sản xuất màn hình mới. Các mẫu máy hàng đầu của các công ty lớn - Apple, Google, Samsung, Huawei - đều được trang bị màn hình OLED, không giống như màn hình LCD, không cần đèn nền. Và đó thực sự là tin tốt cho pin của bạn. Hãy tưởng tượng bạn đang xem hình ảnh một hình vuông màu đen trên điện thoại; với màn hình LCD, đèn nền sẽ chiếu sáng toàn bộ màn hình mặc dù phần lớn nó có màu đen. Nhưng khi xem cùng một hình ảnh trên màn hình OLED, các pixel tạo nên hình vuông màu đen sẽ bị tắt. Điều này có nghĩa là chúng hoàn toàn không tiêu thụ năng lượng.
Những loại màn hình này làm cho chế độ tối trở nên thú vị hơn nhiều. Bằng cách sử dụng giao diện tối, bạn có thể kéo dài đáng kể thời lượng pin của thiết bị. . Tất nhiên, chế độ tối đi đôi với những thay đổi về giao diện người dùng, vì vậy hãy cùng ôn lại kiến thức của chúng ta!
Chế độ tối 101
Trước hết: “tối” không giống như “đen”. Đừng cố thay nền trắng bằng nền đen, vì điều này sẽ khiến bạn không thể sử dụng bóng. Một thiết kế như thế này sẽ siêu phẳng (theo chiều hướng xấu).
Điều quan trọng là phải ghi nhớ các nguyên tắc cơ bản về bóng/ánh sáng. Các vật thể ở trên cao hơn sẽ có bóng sáng hơn, mô phỏng ánh sáng và bóng đổ trong đời thực. Điều này giúp dễ dàng phân biệt giữa các thành phần khác nhau và hệ thống phân cấp của chúng.
Hai hình vuông màu xám giống hệt nhau có bóng, một hình trên nền đen 100%, hình còn lại có số #121212. Khi vật nâng lên, nó trở thành màu xám nhạt hơn.
Trong chủ đề tối, bạn vẫn có thể làm việc với màu cơ bản thông thường miễn là độ tương phản ổn. Hãy giải thích bằng một ví dụ.
Trong giao diện này, thao tác chính là nút lớn màu xanh ở thanh dưới cùng. Không có vấn đề gì về độ tương phản khi chuyển giữa chế độ sáng hoặc tối, nút bấm vẫn bắt mắt, icon rõ ràng, nhìn chung mọi thứ đều ổn.
Khi cùng một màu được sử dụng theo những cách khác nhau, chẳng hạn như trong văn bản, sẽ có vấn đề. Hãy thử sử dụng sắc thái ít bão hòa hơn (nhiều) của màu chính hoặc tìm cách khác để kết hợp màu sắc thương hiệu vào giao diện.
Bên trái: Màu đỏ trên nền đen trông xấu. Đúng: giảm độ bão hòa và mọi thứ đều ổn. - khoảng. dịch
Điều tương tự cũng xảy ra với bất kỳ màu mạnh nào khác mà bạn có thể đã sử dụng, chẳng hạn như màu cảnh báo hoặc lỗi. Google sử dụng lớp phủ màu trắng 40% phía trên màu lỗi mặc định trong khi chuyển sang chế độ tối. Đây là điểm khởi đầu khá tốt vì nó sẽ cải thiện mức độ tương phản để phù hợp với tiêu chuẩn AA. Tất nhiên, bạn luôn có thể thay đổi cài đặt khi thấy phù hợp nhưng hãy nhớ kiểm tra mức độ tương phản. Nhân tiện, một công cụ hữu ích cho mục đích này là plugin Sketch - , cho thấy chính xác mức độ tương phản giữa 2 lớp.
Còn văn bản thì sao?
Mọi thứ ở đây đều đơn giản: không có gì phải đen 100% và trắng 100% và ngược lại. Màu trắng phản chiếu các sóng ánh sáng ở mọi bước sóng, màu đen hấp thụ. Nếu bạn đặt văn bản 100% màu trắng trên nền đen 100%, các chữ cái sẽ phản chiếu ánh sáng, bị nhòe và trở nên khó đọc hơn, điều này sẽ ảnh hưởng tiêu cực đến khả năng đọc.
Điều tương tự cũng xảy ra với nền trắng 100%, phản chiếu quá nhiều ánh sáng để có thể tập trung hoàn toàn vào các từ. Hãy thử làm dịu màu trắng một chút, sử dụng màu xám nhạt cho nền và văn bản trên nền đen. Điều này sẽ làm giảm mỏi mắt, ngăn ngừa
Chế độ tối ở đây và sẽ không biến mất
Lượng thời gian chúng ta dành trước màn hình không ngừng tăng lên và mỗi ngày mới, những màn hình mới lại xuất hiện trong cuộc sống của chúng ta, từ lúc chúng ta thức dậy cho đến khi chìm vào giấc ngủ. Đây là một hiện tượng khá mới, mắt chúng ta chưa quen với việc tăng thời gian sử dụng thiết bị vào buổi tối. Đây là lúc chế độ tối phát huy tác dụng. Với việc giới thiệu tính năng này trong macOS và Material Design (và rất có thể là trong iOS), chúng tôi tin rằng sớm hay muộn nó sẽ trở thành mặc định trong tất cả các ứng dụng, cả thiết bị di động và máy tính để bàn. Và tốt hơn hết là bạn nên chuẩn bị cho việc này!
Lý do duy nhất để không triển khai chế độ tối là khi bạn hoàn toàn chắc chắn 100% rằng ứng dụng của bạn chỉ được sử dụng dưới ánh sáng ban ngày. Tuy nhiên, điều này không xảy ra thường xuyên.
Điều đáng nói là một số điều sẽ cần đặc biệt chú ý khi triển khai chế độ tối, ngoài những nguyên tắc cơ bản được tóm tắt trước đó.
Về khả năng truy cập, chế độ tối không thuận tiện nhất vì độ tương phản nhìn chung thấp hơn, do đó không cải thiện khả năng đọc chút nào.
Nhưng hãy tưởng tượng rằng bạn đang chuẩn bị đi ngủ, bạn rất muốn đi ngủ, nhưng ngay trước khi chìm vào giấc ngủ, bạn lại nhớ ra rằng mình cần gửi cho ai đó một tin nhắn cực kỳ quan trọng không thể đợi được dù chỉ một đêm. Bạn lấy điện thoại của mình, bật nó lên và AAAAAAH... nền sáng của iMessage sẽ giúp bạn tỉnh táo thêm 3 giờ nữa. Mặc dù văn bản sáng trên nền tối không được coi là dễ tiếp cận nhất, nhưng việc có chế độ tối ngay giây phút này sẽ tăng sự tiện lợi lên một triệu. Tất cả phụ thuộc vào tình huống hiện tại của người dùng.
Đó là lý do tại sao chúng tôi nghĩ chế độ tối tự động một ý tưởng tuyệt vời như vậy. Nó bật vào buổi tối và tắt vào buổi sáng. Người dùng thậm chí không cần phải suy nghĩ về nó, điều này rất thuận tiện. Twitter đã làm rất tốt với cài đặt chế độ tối. Ngoài ra, chúng chỉ có chế độ tối và chế độ thậm chí còn tối hơn cho tất cả các màn hình OLED này, giúp tiết kiệm pin và mọi thứ liên quan đến nó. Điều quan trọng cần lưu ý ở đây: cho người dùng cơ hội chuyển đổi thủ công bất cứ khi nào họ muốn: không có gì tệ hơn việc tự động thay đổi giao diện mà không có khả năng chuyển đổi trở lại.
Twitter có chế độ tối tự động bật vào buổi tối và tắt vào buổi sáng.
Ngoài ra, khi phát triển một chủ đề, cần lưu ý rằng một số thứ không thể trở nên tối tăm.
Lấy một trình soạn thảo văn bản như Trang. Bạn có thể làm cho giao diện tối đi, nhưng bản thân tờ giấy sẽ luôn có màu trắng, mô phỏng một tờ giấy thật.
Các trang đã bật chế độ tối
Điều tương tự cũng xảy ra với tất cả các loại trình chỉnh sửa tạo nội dung, chẳng hạn như Sketch hoặc Illustrator. Mặc dù giao diện có thể được làm tối, nhưng bản vẽ nghệ thuật mà bạn làm việc cùng sẽ luôn có màu trắng theo mặc định.
Phác thảo ở chế độ tối và vẫn có bản vẽ màu trắng sáng.
Vì vậy, bất kể ứng dụng nào, chúng tôi tin rằng chế độ tối sẽ có sẵn trên hệ điều hành bạn sử dụng, nghĩa là tốt nhất bạn nên chuẩn bị cho tương lai. trời sẽ tối.
Nếu bạn muốn tìm hiểu thêm về cách phát triển giao diện người dùng tối, hãy nhớ xem hướng dẫn , đây là nguồn thông tin chính của chúng tôi cho bài viết này.
Nguồn: www.habr.com