深色模式(Dark Mode)近年來成為了一個時髦的詞彙，蘋果在2019年的WWDC大會上為iOS13引入深色模式，Google也在2019年Android Q版本中正式推出了深色模式。發布會之後，各大APP紛紛在應用商店上架了支持深色模式的新版本。「暗黑」時代已經到來，APP對深色模式的適配設計成為迫在眉睫的需求。設計師如何快速為APP產品設計出體驗良好的深色模式？本文就以下方面給大家提供一些淺顯的經驗和思路。
深色模式是行動裝置內置的一種屏幕色彩模式，整體以深色為主。在深色模式下APP所有界面、視圖、菜單、控制項等將調用一套更深的背景色方案。
人們可以將深色模式設置為系統的默認外觀模式，也可以讓設備在光照條件較弱的環境中自動切換至深色模式。
隨著人們對手機設備依賴性越來越強，設備使用時間也覆蓋了白天、黑夜，在暗光環境下的使用時間越來越多，產品設計時要考慮在暗光模式下的良好視覺體驗。深色模式是當前這一問題的最佳解決方案。
聚焦於內容。深色模式可以讓用戶更加聚焦界面的內容區，使內容本身得以突顯，周圍的界面元素則會隱退於背景之中。
同一界面在深淺兩種模式下的呈現，可以很直觀的感受到在深色模式下的內容會更凸顯。
深色模式相對正常模式更加節能。由於 OLED 屏幕中每個像素都是自主發光，所以顯示的像素顏色越深，所消耗的電流就更低。當顯示顏色為全黑時，像素點就可以徹底關閉，更加的節省手機電量。
Youtube同一界面深淺兩種模式下屏幕的電流對比，可以看到同樣的界面，最高亮度下深色模式降低了 60% 的耗電量。
深色模式對信息的保護。深色模式下屏幕信息在非正視角預覽時，信息辨別度會降低。當色彩運用得當，深色模式可以起到一定的信息保護作用。
深色模式帶來的新鮮體驗。看了太久的白底黑字，深色模式可以給予用戶多一種選擇。使用界面的新鮮感和驚喜感，會增加用戶使用應用的愉悅度和粘性。並且深色色系更容易營造高端、神秘、奇妙的氛圍感。
為APP進行「深色模式」設計時應該遵循哪些要點？iOS HIG和Google Material Design分別給出了一些規範。在查閱了一些文章和資料以後，本文總結了幾點普適性的視覺設計要點。
深色模式不是夜間模式，所以界面的元素一定要讓用戶能清晰的識別，閱讀，使用。根據 WCAG2.0對比度的標準，界面元素和背景的對比度至少要滿足 AA 級標準，即最低 4.5:1 的對比度。在 iOS 的規範中，建議對比度至少滿足 7:1；在Google的規範中，因為涉及到不同背景層級的概念，甚至要求主要文字和最深色背景的對比度達到 15.8:1。因此,在設計時界面元素和背景的對比度不能低於4.5:1。
在深色模式下儘量避免大面積鮮豔色彩的使用，如果突然出現大面積鮮豔彩色，較高的明度、飽和度會和深色背景形成強烈的對比，從而讓用戶不適。所以在深色模式的設計中，這種情況要儘量避免。如果一定要出現，建議適當降低彩色的飽和度和明度，儘可能減少對視覺的衝擊。
在切換到深色模式後，原來的紅色變得非常突出，應適當調整飽和度和明度
為了保證產品視覺的一致性，產品主色調可保持原飽和度不變。適當的亮色點綴會讓頁面更加豐富，看起來不會太呆板。但由於主色調原本是適用在淺色模式下的，飽和度一般較高，所以應用範圍應當極其克制，僅限於在個別元素，如按鈕、提示、圖標、標籤等，界面中的其餘部分仍應遵循低飽和的配色規則。
Goolgle Material design建議「深色模式」的主背景色最好選用 #121212即深灰色號。但如果一直採用無色彩傾向的#121212深灰色作為背景，用戶很容易就會感到乏味。可以嘗試把產品主色調融入到背景中去營造氛圍感，把主色調用極低的透明度與Goolge建議的#121212深灰色相疊加，得到的結果就可以用來作為氛圍背景色運用到設計中，減少用戶產生的乏味感。但切記，在主色調使用時透明度要儘量低，疊加時才能保證產生的氛圍背景色足夠暗，最終在最高的層級中依然能保證 4.5:1 的最低對比度要求。
和「淺色模式」的設計一樣，在設計「深色模式」的界面時，也必須要體現出層次感，同時突出頁面布局中的重要元素。在「淺色模式」下，一般會採用陰影來表達層次。然而這種方式卻不適用於「深色模式」。在深色背景下加入陰影看起來很像發光。因此，建議通過提升各層級的亮度來實現這個目的。
以上帶大家了解了一下深色模式的基本特性和一些設計要點，但最終還需要把深色模式落地到實際項目中去。深色模式的開發和設計都不是小工程，會耗費團隊內部比較大的資源。如何有效落地，利用最少的人力成本實現最優的線上效果，下篇將結合跨境GO實際落地項目帶您一起探索深色模式在跨境APP中的設計落地。
參考資料：
關於WCGA2.0標準：Web Content Accessibility Guidelines (WCAG) Overview | Web Accessibility Initiative (WAI) | W3C
iOS HIG中Dark Mode 設計指導的章節：Dark Mode – Visual Design – iOS – Human Interface Guidelines – Developer
Material Design中Dark Mode 設計指導的章節：https://material.io/design/color/dark-theme.html#properties