編輯導讀：自從19年蘋果發(fā)布會推出了深色模式后，越來越多的APP開始更新了深色模式。本文作者以社區(qū)產品即刻為例，進行了一次深色模式的適配練習并復盤整理，供大家一同參考和學習。

一、寫在前面

在2019年iOS13和安卓P發(fā)布后，帶來了一個新的模式名為「Dark Mode」即深色模式，隨后一些頭部產品也都相繼更新為用戶帶來了更好的使用體驗。

需要注意的是深色模式非夜間模式，iOS文檔中也說明了內容與背景的色彩對比率要達到7:1來滿足用戶在白天強光下和夜晚弱光下的多場景需求。

即刻曾經作為一個日活300w+的老牌社區(qū)產品由于某些原因消失了一年，在近期又回歸到我們視野中，那就以即刻為例嘗試進行一次社區(qū)產品的Dark Mode適配，為即友們帶來更好的產品體驗。

二、深色模式給即友們帶來哪些好處？

1. 節(jié)省電量

在OLED屏的手機屏幕上，白色畫面越少功耗越低。所以當深色模式中界面元素以黑色形式出現時相當于關上了屏幕的燈（像素點）這時會比淺色模式大幅降低手機功耗，從而達到省電，增加待機時間的目的。

(圖為不同面積的白色畫面下調整屏幕亮度，對功耗的影響)

數據來源：《顯示比較：筆記本電腦上的OLED與IPS-功耗與效率》

2. 專注內容

用戶更易被深色背景上展示的圖文、視頻等內容所吸引，加強沉浸感，提高瀏覽效率。用官方的話說就是“使前景內容在較暗的背景下脫穎而出”。

3. 保護視力

在夜晚弱光環(huán)境下深色模式會與周圍的暗色環(huán)境相融合，刷到凌晨4點也不會亮瞎眼睛。

三、定義設計目標

本次以iOS版即刻7.0進行適配，著手設計前查閱了iOS人機界面指南中Dark Mode部分，蘋果為深色模式規(guī)定了五項設計原則：

1. 保持視覺風格的一致
2. 保持平臺的一致
3. 保持信息層級的一致
4. 保持操作規(guī)則的一致
5. 易于開發(fā)者實現

解讀官方文檔也就是說，深色模式要在風格、交互行為、信息層級的感知上和淺色模式保持一致。遵循官方文檔的建議，定義設計目標為：

1. 保持與淺色模式下全局的一致性；
2. 易于開發(fā)者實現。

四、執(zhí)行設計策略

1. 保持與淺色模式下全局的一致性

采取由整體到局部的形式，首先對界面整體信息層級進行分析，在深色模式下還原，再將界面中所承載的具體元素單獨處理。分為兩部分：信息層級的一致和視覺特征的一致。

（1）信息層級的一致

淺色模式中，界面通常會以陰影來體現層級空間，但在深色模式下加深色陰影并不直觀，淺色陰影反而有種發(fā)光的效果，合理的解決方案是通過顏色深淺來體現層級，即傳統感知上離用戶較近的內容顏色較亮。

由于OLED屏幕特性，在純黑背景上劃動內容會產生一定程度的拖影，文字尤為明顯，就像燈泡（像素點）打開和關閉的感覺，所以應避免使用純黑作為背景，尤其像即刻這樣以文字為主的產品，會非常影響閱讀體驗。

分析淺色模式下界面的信息層級關系，提取全局背景色、內容部分背景色，并在深色模式下一一對應，保持視覺統一，首先看下兩大系統是如何做層級劃分的。

iOS13：

iOS規(guī)范中官方給出了兩組背景色，分別為：系統背景色(System Backgrounds)：運用在全局的基礎背景元素。分組背景色(System Grouped Backgrounds)：運用在承載內容的分組背景元素。

兩組背景色也定義了主要、次要、三級三組顏色來體現不同的層級結構，每組顏色也給出了對應的背景色和前景色建議。

蘋果為了緩和黑白灰背景下視覺的無趣，在背景色中都加入了少許的藍色來提升質感。

Android P：

在material design的深色模式下由低到高分別為界面定義了10個層級，由0dp-24dp，表面高度越高，離隱含光源就會越近，表面也就會越淺，這點和iOS的設計比較一致，區(qū)別在于material design將最深的顏色使用深灰（#121212）而非純黑色（#000000），目的在于深灰可以代表更廣泛的顏色而非極限的黑色，也能適當降低背景與內容的對比度。

為了保留品牌標識，material design可以在默認背景色的基礎上疊加低透明度的品牌色變成帶有品牌色的背景色。

即刻的層級劃分

拆解即刻的主要界面層級，發(fā)現大多界面整體層級不會太多，設計手法較為扁平。對于內容型產品來說我認為這樣的設計目的在于引導用戶更加沉浸在內容里，在做深色模式適配時也應遵循沉浸感的整體體驗（即使深色模式自帶沉浸屬性）。

對主要界面的層級大致了解后，選擇從首頁入手通過背景色對深色模式進行層級還原。在淺色模式的背景色中，即刻選擇在淺灰中加入少許藍色來表現質感，為了在深色模式中還原這一設計語言。

在這里我選擇material design深色模式的配色方式，更加利于自定義。全局背景色選擇深灰（#121212）疊加6%不透明度的輔助藍色（#04A9F5），再在全局背景色基礎上疊加不同透明度的白色來配置不同層級的內容背景色。帶有藍色的背景色長時間瀏覽要比純灰色更舒適，也滿足了設計語言的延續(xù)。

（2）視覺特征的一致性

整理基礎元素文字、圖標、圖片等，還有其他元素如毛玻璃背景、加載、空狀態(tài)、默認圖等，在深色模式下這些視覺特征需要單獨處理以保證在深色模式下保持和諧。

1）品牌色

為了讓深色模式中的品牌色，我同樣采取在每個顏色上疊加不透明度的方式降低飽和度，在界面中就不會顯得太扎眼。

2）文字

即刻的文字色主要有三個層級，適配深色模式時由于內容型產品文字占比很大，大量純白色文字會使界面對比度過大，瀏覽很費力，所以均降低不同程度的透明度的來還原三個層級，并保證主要內容的色彩對比率在7:1以上。

對于簽名文字等輔助型信息，個人認為可以不必強制7:1，或4.5:1，否則文字間的主次關系會變得很弱。

3）圖標

規(guī)范中建議深色模式下將線型圖標轉為面型來幫助用戶建立體量感，但為了更傾向用戶習慣，高頻使用的功能圖標依舊保持與淺色模式一致，所以在這里并沒有將線型圖標重新繪制面型樣式。

即刻的圖標色與文字色使用的是一套顏色，所以在深色模式中也順應使用了這套顏色，白色圖標保持不變。

對于彩色圖標，采取適當降低飽和度和明度的方法與暗色背景更融合不突兀。

4）圖片

深色模式下的對比下，飽和度較高的圖片會顯得格外突出，就像燈泡一樣明亮晃眼，我們無法控制用戶會發(fā)什么樣色彩的圖片，所以統一做處理，在圖片上疊加一層10%不透明度的全局背景色來緩和這種情況。

（首頁兩模式對比）

（WCAG色彩對比率測試）

5）其他元素

個性化圖片背景：

在即刻的個人主頁、圈子主頁頂部都會出現可編輯的圖片背景滿足用戶個性化需求，默認狀態(tài)為頭像放大模糊出現毛玻璃的效果。經觀察發(fā)現在背景圖片上部會疊加一層帶有透明度漸變的深色滿足背景層上信息的識別性，這樣的設計手法發(fā)現只需按深色模式規(guī)范適配文字、標簽和頭像就能和整體界面較好融合，所以背景圖片不做處理。

加載：

即刻的加載動畫其實直接用在深色模式也可以，不會突兀，但在視覺上感知比較弱，所以我將加載動畫顏色以背景色為基礎提亮來提升用戶對界面狀態(tài)的感知。

默認圖：

由于只會在網絡不佳時出現，所以默認圖是容易被忽略的一個點，但不作處理在深色模式下就會顯得非常突兀，淺色模式即刻選擇了背景色作為默認圖，深色模式也一樣處理。

空狀態(tài)：

由于很多空狀態(tài)的插圖是沒有考慮到深色背景的情況，在顏色上沒辦法很好融合，所以可能要重新繪制兩套圖來適配兩個模式。

啟動頁：

當系統界面和APP界面都是深色時，一個白色啟動頁的出現就像被燈泡晃到眼睛一樣難受，所以深色模式時啟動頁也需要做一下適配來避免這種情況發(fā)生。

2. 易于開發(fā)者實現

深色模式的適配是一個長期持續(xù)的工作，尤其是對體量龐大的APP需要投入更多精力，所以對設計和開發(fā)來說，一個易實現的迭代和交付方案對效率提升有著重要作用。

顏色

因為有了深色模式，所以界面中同一位置的顏色變成兩種，在iOS13官方文檔中將顏色的變化稱之為動態(tài)顏色，并且通過語義命名的方式來代表深淺兩種顏色，即使用語義（systemBlue）表示系統淺色模式藍（#007AFF），系統深色模式藍（#0A84FF）兩種顏色，這樣的命名方式更便于管理和記憶，也更符合開發(fā)者思維。

使用同樣的方法，將顏色使用語義命名，這里我參考了釘釘設計團隊的顏色命名系統避免一些坑，例如：即刻的品牌黃色：淺色（#FFE40F）深色（#FFEE6F）就可以用語義命名：（common_顏色_color），就可以使用。需要注意的是，在實際項目中的命名過程需要和開發(fā)共同進行，定義出一套彼此都容易理解的命名方案。

將即刻中的顏色分為基礎元素色、通用組件色、彩色三種。

• 基礎元素色：文字色、背景色、分割線色，這里根據規(guī)范定義了3種文字色、4種背景色和1種分割線色。
• 特殊通用組件色：將可點擊功能圖標色、文字鏈接色定義為特殊通用組件色。
• 彩色：將界面中運用在各處的品牌色、輔助色、黑白灰等每個動態(tài)色用顏色命名，方便靈活運用。

需要注意的是有些顏色不需要變化的組件，如在標簽中的文字、按鈕中的文字是不隨模式變化的，這時就不能選擇基礎元素的文字色了，而是要選擇彩色中對應的顏色。

圖片

深色模式的圖片比淺色模式更暗一些，開發(fā)者可以選擇疊加濾鏡的方式，也可以選擇降低透明度的方式，我在本次適配中選擇了疊加深色濾鏡，感覺在復雜界面下會比降低透明度更保險一些。

圖標

深色模式的圖標相比都改變了顏色，所以得選擇重新繪制一套深色圖標替換，不過單色的SVG格式功能圖標可以直接修改來適配不需要單獨繪制，但PNG圖片就不可以了。

五、總結

1. 本次深色模式適配思路

• 在前期參考足夠多的資料，了解使用深色模式的原因，官方的要求，避免踩坑。
• 根據前期資料與項目目的定義設計目標，圍繞設計目標將界面元素由整體到局部進行拆解，逐一嘗試深色模式方案。
• 測試深色模式方案在多種場景下的可行性，調整優(yōu)化，制定色彩規(guī)范。
• 與開發(fā)共同討論高效實現方法，并在后期持續(xù)走查發(fā)現未適配到的或效果不理想的位置。

2. 一些建議

基于深色模式適配的挑戰(zhàn)性，個人覺得不是所有產品都必須要適配，或要將適配項目提上排期，有幾種情況不是太建議馬上著手去做適配工作：

• 處于快速迭代，界面功能布局頻繁改動的產品，成本大，收益小。
• 在項目密集階段且人員不足時，設計開發(fā)測試在任務緊張的情況下，還要分很多精力在深色模式適配上，可能導致兩項工作都沒辦法專注，所以也不是很推薦。

本次以即刻為例的深色模式適配復盤就到這里了，如有不嚴謹的地方歡迎交流提出意見或建議，同時也為大家提供iOS+Android深色模式組件庫文件下載。

• 地址鏈接：https://pan.baidu.com/s/1_-qzv2FJtKI4kVjKJR6meg
• 提取碼：3pj4

（界面對比展示）

參考資料：

• iOS人機界面指南-Dark ModeMaterial Design-dark theme釘釘Dark Mode設計
• 優(yōu)酷暗黑模式設計指南
• Web內容可訪問性指南（WCAG）2.1
• 顯示比較：筆記本電腦上的OLED與IPS-功耗與效率

本文由 @奇怪的h 原創(chuàng)發(fā)布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。