或為應用程式或網站開發深色模式時要記住什麼
2018 年，黑暗模式即將到來。 2019 年已經過去一半，我們可以自信地說：他們就在這裡，而且無所不在。
首先，深色模式根本不是一個新概念。 它已經使用了相當長的時間了。 事實上，在很長一段時間裡，這是他們唯一使用的東西：顯示器是「黑底綠」的顯示器，但這只是因為內部的發光塗層在暴露於輻射時會發出綠光。
但即使在推出彩色顯示器之後，深色模式仍然存在。 為什麼會這樣呢？
有兩個主要動機可以解釋為什麼今天每一個人都急於在他們的應用程式中添加黑暗主題。 首先：計算機無所不在。 我們目光所及之處都有某種螢幕。 我們從早上到深夜都使用行動裝置。 當您在睡前「最後一次」滾動瀏覽社交動態時，深色模式的存在可以減輕眼睛疲勞。 網路。 （如果你像我一樣，「最後一次」可能意味著 3 小時的滾動 。 深色模式？ 是的，請！ ）
另一個原因是新的顯示器生產技術。 蘋果、谷歌、三星、華為等大公司的旗艦機型都配備了 OLED 螢幕，與 LCD 顯示器不同，它不需要背光。 這對您的電池來說確實是個好消息。 想像一下您正在手機上查看黑色方塊的影像； 對於 LCD，背光會照亮整個螢幕，即使大部分螢幕是黑色的。 但當在 OLED 顯示器上查看相同的影像時，構成黑色方塊的像素就會關閉。 這意味著它們根本不消耗能量。
這些類型的顯示器使黑暗模式變得更加有趣。 透過使用深色介面，您可以顯著延長設備的電池壽命。 。 黑暗模式當然與使用者介面的變化密切相關，所以讓我們重溫我們的知識吧！
深色模式 101
首先：「暗」與「黑」不同。 不要嘗試用黑色背景替換白色背景，因為這將導致無法使用陰影。 像這樣的設計將是超級扁平的（以一種糟糕的方式）。
記住陰影/照明的基本原則很重要。 較高的物體在陰影中應該更亮，模擬現實生活中的照明和陰影。 這使得區分不同的組件及其層次結構變得更加容易。
兩個相同的帶有陰影的灰色方塊，一個位於 100% 黑色背景上，另一個位於 #121212 上。 當物體上升時，它會變成淺灰色。
在深色主題中，只要對比度合適，您仍然可以使用常規基色。 讓我們用一個例子來解釋。
在此介面中，主要操作是底部欄中的藍色大按鈕。 明暗模式切換時對比度沒有問題，按鈕仍然醒目，圖示清晰，整體來說一切都很好。
當同一種顏色以不同的方式使用時，例如在文字中，就會出現問題。 嘗試使用飽和度較低的主色，或尋找其他方法將品牌顏色融入介面中。
左：黑底紅字看起來很糟。 右：降低飽和度，一切看起來都很好。 — 約。 翻譯
這同樣適用於您可能使用的任何其他強烈顏色，例如警告或錯誤顏色。 Google 在其預設錯誤顏色之上使用了 40% 的白色層覆蓋 當切換到深色模式。 這是一個非常好的起點，因為它將提高對比度等級以符合 AA 標準。 當然，您可以隨時更改您認為合適的設置，但請務必檢查對比度等級。 順便說一句，用於此目的的一個有用工具是 Sketch 插件 - ，它準確地顯示了兩層之間的對比。
文字呢？
這裡一切都很簡單：任何事物都不應該是 100% 黑色和 100% 白色，反之亦然。 白色反射所有波長的光波，黑色吸收。 如果將 100% 白色文字放置在 100% 黑色背景上，字母會反射光線、出現污跡，並且變得不太清晰，這會對可讀性產生負面影響。
100% 白色背景也是如此，它會反射太多光線，無法完全聚焦在文字上。 嘗試稍微軟化白色，在背景上使用淺灰色，在黑色背景上使用文字。 這將減輕眼睛疲勞，防止
深色模式已經到來並且不會消失
我們花在螢幕前的時間不斷增加，每一個新的一天，從我們醒來的那一刻到入睡，我們的生活中都會出現新的螢幕。 這是一個相當新的現象；我們的眼睛還不習慣深夜螢幕時間的增加。 這就是黑暗模式發揮作用的地方。 隨著 macOS 和 Material Design（最有可能在 iOS）中引入此功能，我們相信遲早它將成為所有應用程式（行動和桌面）的預設功能。 最好為此做好準備！
不實施深色模式的唯一原因是當您絕對 100% 確定您的應用程式專門在明亮的日光下使用時。 然而，這種情況並不常發生。
除了前面總結的基本原則之外，值得一提的是，在實施黑暗模式時需要特別注意一些事情。
就可訪問性而言，深色模式並不是最方便的，因為對比度通常較低，這根本無法提高可讀性。
但想像一下，你正準備睡覺，你真的很想睡覺，但就在你入睡之前，你記得你需要向某人發送一條超級重要的訊息，連一晚都等不及。 你拿起你的手機，打開它，然後啊啊啊…你的iMessage 的淺色背景會讓你再清醒3 個小時。雖然深色背景上的淺色文字不被認為是最容易訪問的，但此時使用深色模式會增加一百萬的便利性。 這完全取決於用戶目前所處的情況。
這就是為什麼我們認為 自動深色模式 這麼酷的主意。 它在晚上打開，在早上關閉。 用戶甚至不需要考慮，非常方便。 Twitter 在黑暗模式設定方面做得非常出色。 此外，所有這些 OLED 螢幕都只有深色模式和更暗模式，可以節省電池和與之相關的一切。 這裡要注意的是：讓使用者有機會隨時手動切換：沒有什麼比自動更改介面而無法切換回來更糟糕的了。
Twitter 有一個自動黑暗模式，會在晚上開啟並在早上關閉。
此外，在開發主題時，值得記住的是，有些東西根本不能變暗。
使用像 Pages 這樣的文字編輯器。 您可以使介面變暗，但紙張本身始終是白色的，模擬真實的紙張。
啟用深色模式的頁面
這同樣適用於所有類型的內容建立編輯器，例如 Sketch 或 Illustrator。 儘管介面可以變暗，但您預設使用的畫板將始終為白色。
在深色模式下繪製草圖，仍然有明亮的白色畫板。
因此，無論使用哪種應用程序，我們都相信您使用的作業系統將原生提供深色模式，這意味著最好為未來做好準備。 天會黑的。
如果您想了解有關開發深色 UI 的更多信息，請務必查看指南 ，這是我們本文的主要資訊來源。
來源： www.habr.com