在 Android Q 之后，蘋果也在 iOS13 支持了深色模式，深色模式成了2019下半年的熱門話題，不少產品已經完成了對深色模式的適配，淘寶、微信也先后開始內測，「變黑」似乎已經成為趨勢。而在適配深色模式之前，設計師需要深入了解它的特性，衡量適配深色模式帶來的價值，以及規(guī)劃合適的策略，避免陷入「為黑而黑」的泥潭。
1. 深色系界面弱化背景，瀏覽內容更專注。
影片放映時會關掉所有燈光，只有屏幕亮起吸引觀眾的注意力，同樣的原理下，當產品界面是深色背景時，頁面元素優(yōu)先級更清晰，用戶更容易注意到關鍵內容。而且相比淺色為主的界面，深色界面對眼睛的視覺壓力更小。
注：至于它的「護眼」作用還尚未明確，長時間盯著屏幕造成的視覺疲勞依然不可避免。
2. 新鮮感
看了太久千篇一律的「白底黑字」，深色模式讓用戶多了一種選擇。人人喜歡新鮮的樣式，哪怕只是短暫的熱情嘗試，都會增加用戶對產品的新鮮感，并且不可否認的是，黑色更容易讓人感覺到酷炫新鮮。
3. 省電- OLED 屏幕顯示深色能耗更低
OLED 屏幕中每個像素都是自主發(fā)光，在顯示深色元素時，消耗的電量更少，而在顯示純黑色時，像素點可以徹底關閉。打個不完全嚴謹的比方，手機屏幕就像是排列了幾萬個小燈泡的大燈板，OLED 屏幕顯示黑色時會真的把那塊區(qū)域的燈泡關掉，自然會省電。
很多產品已經存在夜間模式，開啟夜間模式后界面同樣會轉向暗色，而突然被討論的「深色模式」和「夜間模式」有什么區(qū)別？
對于用戶而言顯然沒有必要分清楚夜間模式和深色模式的差別，在外觀上，它們真的很像。但是以設計師的角度來說，只有真正區(qū)分它們之間的差別和應用場景，才能提供給用戶一套邏輯清晰的選擇方案，讓用戶更方便快捷地選擇自己想要的模式。
△ 開啟夜間模式前后對比
△ 淺色/深色模式下的界面對比
通過這兩張對比圖，可以明顯地感覺到夜間模式與深色模式下，界面元素的對比、層級表現都有所區(qū)別。
夜間模式的設計目的，是讓用戶在夜間使用手機時，屏幕顯示更柔和，調整色溫、降低飽和度，而在白天開啟夜間模式很難看清顯示內容，并不適合在白天使用。
顯然，深色模式不是夜間模式，用戶可以在任何時間任何環(huán)境下使用它，需要維持和淺色模式同樣的產品特性，可以和設備的夜覽模式同時開啟。
用戶將系統(tǒng)主題設置為深色后，自然就會期望所有的 app 都變成深色，深色模式逐漸會成為產品標配的功能。已經有越來越多的產品用各種方式對系統(tǒng)的深色模式進行適配。主要分為以下三種類型：
- app 自動跟隨系統(tǒng)主題切換模式，如果用戶的手機系統(tǒng)不支持深色模式，產品不會切換到深色模式。代表產品有 微信讀書、豆瓣、懶飯、Instagram、愛奇藝
- 原有夜間模式與深色模式進行捆綁，讓用戶自行選擇是否配合系統(tǒng)主題切換。在不支持深色主題的系統(tǒng)內用戶可以通過開啟夜間模式，使產品主題變?yōu)樯钌。嚴格來說，這并不是真正的深色模式，而出于不同的決策模型，產品團隊會做出最適合自己的選擇。代表產品：QQ、Twitter
- 原有產品沒有夜間模式，正在內測跟隨系統(tǒng)切換主題的深色模式。代表產品：微信、淘寶
iOS & Android 兩套設計語言的 Dark Mode 策略除了在基礎色彩體系的數值有些差距外，更明顯的是在 Accent color 的不同處理方式。
Android Q 則強調保障清晰觀看體驗的前提下，要具備更多的靈活性，比如在原色彩上面加 40% 的白色透明遮罩，以增強在深色背景上的清晰對比度，缺點可能會讓原色彩在感官上發(fā)生較大的偏差。
1. 語義化顏色
在 iOS 設計語言規(guī)范下，產品支持深色模式就必須管理兩套完整的顏色方案，確保它們之間始終保持同步，這就要求設計團隊以更系統(tǒng)的方式來管理顏色體系。為此，蘋果引入了「語義化顏色」的概念。
注：語義化顏色是通過「用途」來對元素進行定義描述，而不是具體的色值！赣猛尽苟x下的顏色是動態(tài)性，脫離于具體的表現樣式而獨立存在。比如，「背景色」，在深色模式中指代黑色，而在淺色模式中指代白色，這樣就可以讓顏色靈活地適應淺色與深色模式切換。具體應用方法已有很多資料分享，本文不做擴展。
2. 統(tǒng)一規(guī)律變化色彩梯度
Android 適配方案簡單粗暴，對于顏色可參考梯度漸變模型規(guī)律配色，頁面背景根據層級疊加不同透明度的白色即可。但是完全執(zhí)行就容易導致產品在深色模式下產生風格偏移，出現不符合品牌設計語言的情況。
3. 智能語義化
在 iOS 適配策略的基礎上，淘寶團隊在分享中提出了「智能語義化」方案，使適配成本大幅降低。方案思路是：設計師根據不同 UI 元素的特性先制定顏色語義化規(guī)則，技術在框架層面通過「顏色自動反轉」技術實現顏色反轉。
然而除去基本顏色，大量的圖標、插圖，動效等等需要一一調整兼容，完美適配深色模式需要多方配合持續(xù)維護，而后期的功能開發(fā)也需要同時兼顧兩種模式，對于自定義元素較多、業(yè)務組成復雜的 APP 適配難度可想而知。
看完本文后，你可以了解深色模式受到追捧的原因，區(qū)分深色模式與夜間模式的不同，了解到適配深色模式的多種策略和面臨的挑戰(zhàn)，深入思考，當前產品是否真的需要適配深色模式。最后，希望能夠幫你找到真正適合自己產品的適配策略。
承擔因您的行為而導致的法律責任，
本站有權保留或刪除有爭議評論。
參與本評論即表明您已經閱讀并接受
上述條款。