即刻7.0：如何設計深色模式？（非官方）

編輯導讀：自從19年蘋果發佈會推出了深色模式後，越來越多的APP開始更新了深色模式。本文作者以社區產品即刻爲例，進行了一次深色模式的適配練習並覆盤整理，供大家一同參考和學習。

一、寫在前面

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

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

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

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

1. 節省電量

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

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

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

2. 專注內容

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

3. 保護視力

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

三、定義設計目標

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

保持視覺風格的一致
保持平臺的一致
保持信息層級的一致
保持操作規則的一致
易於開發者實現

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

保持與淺色模式下全局的一致性；
易於開發者實現。

四、執行設計策略

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

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

（1）信息層級的一致

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

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

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

iOS13：

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

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

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

Android P：

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

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

即刻的層級劃分

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

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

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

（2）視覺特徵的一致性

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

1）品牌色

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

2）文字

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

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

3）圖標

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

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

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

4）圖片

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

（首頁兩模式對比）

（WCAG色彩對比率測試）

5）其他元素

個性化圖片背景：

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

加載：

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

默認圖：

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

空狀態：

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

啓動頁：

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

2. 易於開發者實現

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

顏色

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

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

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