指南編輯：Dark Mode設(shè)計并不常見，很多產(chǎn)品也選擇適應(yīng)Dark Mode，但對很多產(chǎn)品的適應(yīng)工作仍需改進。(威廉莎士比亞，《北方專家》)。

那么，相較于Light Mode，Dark Mode發(fā)生了哪些變化？產(chǎn)品在適配這一模式的過程中，可以從哪些方面入手？本文作者就Dark Mode設(shè)計發(fā)表了他的看法，一起來看一下。

這篇文章最初來自于之前公司的一次設(shè)計分享，由于公司產(chǎn)品自 Dark Mode 上線以來，斷斷續(xù)續(xù)地發(fā)現(xiàn)了挺多影響體驗的小問題，因此團隊成員從各自熟悉的領(lǐng)域?qū)?Dark Mode 的成因、心理/生理影響、具體落地的注意事項等方面進行了相關(guān)的分析，以指導(dǎo)后續(xù)關(guān)于 Dark Mode 體驗視覺優(yōu)化的工作。

我負責(zé)關(guān)于具體頁面視覺表現(xiàn)層面的分析，在分享結(jié)束后，又對部分內(nèi)容進行了增刪修改。文章內(nèi)的部分觀點參考了網(wǎng)絡(luò)上的文章內(nèi)容，但由于網(wǎng)絡(luò)文章存在多篇文章觀點相同的問題，由于時間關(guān)系無法專門查找分析原作者，因此并未附上參考來源。若原作者看到，可聯(lián)系我對文章進行相關(guān)的說明，必要時可對文章做相應(yīng)的刪改。

以下為正文內(nèi)容。

一、Dark Mode 的八個設(shè)計準(zhǔn)則

8個設(shè)計準(zhǔn)則

1. 避免純黑純白的設(shè)計

純黑純白兩種顏色的對比度太高，即使在亮光環(huán)境下，也會極大地刺激人眼，產(chǎn)生視覺疲勞。

2. 避免使用高飽和度色彩

由于對比度原因，飽和度過高的色彩在深色背景下較難被識別，而使用飽和度較低的色彩則可以避免這個問題。

3. 保證文本內(nèi)容的可閱讀性

文本類內(nèi)容，必須保證第一時間能被用戶識別，WCAG 標(biāo)準(zhǔn)中規(guī)定，文本需要達到 15.8：1 的對比度。這意味著在設(shè)置階梯透明度的文字時，不能使透明度過低導(dǎo)致達不到對比度標(biāo)準(zhǔn)。

4. 分別在 Dark Mode 和 Light Mode 環(huán)境下測試

產(chǎn)品上線前，需要分別在 Dark Mode 和 Light Mode 下進行測試，檢查是否有沒適配到或者其他不合理的情況出現(xiàn)，并在必要的情況下，對某些元素或內(nèi)容進行單獨調(diào)整以提升整體的使用體驗。

5. 內(nèi)容層級清晰明了

Light Mode 下利用陰影或者淺色卡片體現(xiàn)頁面層級，但在 Dark Mode 下陰影無法清晰地體現(xiàn)內(nèi)容層級；因此采用不同亮度的白色疊加來實現(xiàn)清晰的層級效果，越亮則代表層級越高。

6. 讓用戶選擇切換模式

讓系統(tǒng)自動根據(jù)白天黑夜或者場景光線亮度來切換模式，看似提升了用戶體驗，減少了用戶操作步驟，但用戶可能會有非常強烈的失控感；產(chǎn)品需要做的是為用戶提供多一種選擇，而不是替用戶做出我們認為的好的選擇。

7. 考慮色彩情感因素

Dark Mode 和 Light Mode 代表了兩種不同的使用場景，兩種相反的背景色也對應(yīng)著截然不同的色彩情感，因此與其努力讓兩種模式傳達一樣的調(diào)性，不如順應(yīng)色彩本身的情感寓意，去打造更符合使用場景的視覺風(fēng)格。

8. 符合 WCAG 標(biāo)準(zhǔn)

在 Dark Mode 下，也要像 Light Mode 一樣，清晰地傳達頁面信息，除文本類內(nèi)容需要保持 15.8 : 1 以上的對比度外，其他元素或內(nèi)容至少要與背景保持 4.5 : 1 的對比度，以保證視障人群也能正常地使用產(chǎn)品。

二、Dark Mode 相對于 Light Mode 發(fā)生了哪些變化

在當(dāng)今 Dark Mode 漸漸成為 C 端產(chǎn)品標(biāo)配的大環(huán)境下，許多產(chǎn)品都適配了 Dark Mode，但結(jié)果大多不盡人意，包括一些大廠出品的知名 APP，在 iOS 和 Android 兩端的同步工作都沒做好（沒錯，說的就是微信），Android 端的體驗與 iOS 端差別非常大。

來源：微信安卓版

下面我將從 Dark Mode 相對于 Light Mode 在頁面視覺上發(fā)生變化的幾個方面，分別討論在這幾個方面中，在具體的適配工作中需要注意的內(nèi)容。

Dark Mode 相對于 Light Mode 主要是以下四方面發(fā)生了變化：

1. 層級：即背景，承載內(nèi)容與元素的卡片、色塊等也歸為背景一類；
2. 文字：頁面內(nèi)所有表達內(nèi)容信息的中英文及數(shù)字；
3. 圖標(biāo)：包含標(biāo)簽欄、快速入口及功能圖標(biāo)等；
4. 圖片：底圖、商品圖、Banner、空狀態(tài)插畫、引導(dǎo)頁等。

1. 層級

Dark Mode 和 Light Mode 都采用不同灰度的背景來代表頁面的不同層級。

在 Light Mode 下，一般采用淺灰色背景上疊加白色卡片的形式或給白色背景上的元素增加陰影的方式表現(xiàn)層級；Dark Mode 下則采用深色背景上疊加比背景色灰度更淺的卡片來表現(xiàn)層級。

1）蘋果/谷歌各自表現(xiàn)頁面層級的方式

蘋果的設(shè)計規(guī)范中，Dark Mode 的背景色分為兩種類型 ：Baes/Elevated（上圖左側(cè)最下方兩行顏色），Baes 中除了使用較為廣泛的純黑背景外，還有兩種略帶藍色相的 B 值分別 12 及 18 的深灰色。

Elevated 里面則是三種略帶藍色相的 B 值分別為 12、18、24 的深灰色，且這三種顏色所帶的藍色相飽和度也與 Base 有一些微小的差異?？偣擦N不同的背景色搭配四種不同透明度的白色（上圖中間一列最下方一行顏色），在我自己測試的過程中，運用這些色彩搭配設(shè)置的背景，在多個場景下都能夠比較好的表現(xiàn)層級以及從屬關(guān)系。

與蘋果不同的是，谷歌采用了不帶色相的深灰色，并在其上疊加規(guī)律變化的不同透明度的白色來體現(xiàn)層級關(guān)系，而且谷歌在體現(xiàn)層級時還使用了陰影，這也是谷歌不用純黑背景的原因，因為陰影在純黑色背景上會完全融入背景（加了和沒加一樣，還白白消耗性能）。

2）蘋果/谷歌各自的處理方式的優(yōu)劣

蘋果采用純黑背景有兩個方面的理由，一是保證不管在白天黑夜，亮光及暗光環(huán)境下，頁面內(nèi)容都能有較高的對比度來保證識別性，而且蘋果還有夜間模式作為 Dark Mode 的補充，做到了全場景覆蓋。

二是純黑背景能與黑色的手機邊框完美的融合，在 Dark Mode 下手機正面像是一個整體，用戶完全不會像 Light Mode 一樣注意到邊框的存在，能更專注地聚焦于內(nèi)容。

而谷歌的處理方式相對蘋果而言，沒那么繁復(fù)，擁有較低的理解與使用成本，但也失去了蘋果擁有的較好的視覺觀感。并且陰影會和深色背景看起來融為一體（谷歌 Material Design 中使用了陰影，這是為了與 Light Mode 的設(shè)計理念與規(guī)范形成統(tǒng)一的整體，但沒有廣泛的被使用，從市場選擇也能看出，這并不是被主流所接受的做法），對于層級的劃分效果不如直接改變背景的顏色來的直接明顯。

3）建議

目前比較可行且廣泛適用的方法是在深色背景上，疊加不透明度的白色來實現(xiàn)層級的劃分，在屏幕 z 軸上，觀感上距離用戶越近的元素，白色不透明度越高，看起來也就越亮，代表這個元素或內(nèi)容的層級越高（給用戶心理暗示，海拔越高，則距離光源越近，也就越亮）。

之所以不用純黑背景，是因為純黑色與白色的文字對比度太高，在暗光環(huán)境下直觀的視覺效果比較刺眼。用深灰背景可以最大程度覆蓋各種場景的使用體驗。

當(dāng)然也可以參照蘋果，深色與夜間各做一套，但這種方式實現(xiàn)成本高了很多，在國內(nèi)很多產(chǎn)品的 Dark Mode 只是加個黑色半透明蒙層的大環(huán)境下（比如某訊動漫的安卓版），這樣的做法成本高很多并且用戶不一定買賬，實在是有點得不償失。

2. 文字

UI 設(shè)計中的文字屬性主要為字族、字重、字色、字號以及其他屬性（字距、段距、行高、對齊方式），在適配 Dark Mode 時，文字內(nèi)容的適配工作主要集中在字色上，其他幾種屬性的影響可以忽略不計。

例如字重， Dark Mode 中由于背景色的影響，文本內(nèi)容會顯得比 Light Mode 稍微粗一點，但比例很小，一般的字體所包含的字重之間的粗細差異比由于深淺色背景影響所帶來的視覺上的字體粗細差異要大得多，除非像 SF 這種類型的包含二三十種字重的字體，能夠精準(zhǔn)地體現(xiàn)這些微小的差異，從而完美的進行適配，其他包含較少字重的字體無法使用這種方法來體現(xiàn)差異性。

并且做中文設(shè)計與外文設(shè)計也有很大不同，中文字重基本沒有超過十種的，主流的設(shè)計字體的字重基本都在 5~9 種，粗細差異都很明顯，也無法依靠調(diào)整字重來體現(xiàn)這些微小的差異。

考慮到用戶側(cè)的屏幕質(zhì)量參差不齊，再加上各種外接顯示器的強制放大縮小，很多時候即使花費了很大功夫進行細微調(diào)整，設(shè)計從業(yè)者都不一定看得出。

用戶由于對這些差異不敏感，以及設(shè)備造成的影響，完全感知不到調(diào)整了哪些地方，等于做無用功。

其他幾種文字屬性的調(diào)整也是同理。所以這里只討論文字顏色的適配方法。目前適配 Dark Mode 字色的方式有兩種：給固定顏色的文字設(shè)置階梯透明度以及設(shè)置不同灰度的不帶透明度的文字色。這兩種方式對應(yīng)了不同的設(shè)計思路。

給文字設(shè)置階梯透明度，可以最大程度地在不同灰度的背景上清晰地顯示文本內(nèi)容，文本內(nèi)容顯示出來的顏色是由背景色加上文字本身的不透明色疊加而得到的，加上文本類內(nèi)容本身與背景的對比度較高，因此不會出現(xiàn)文字與背景融為一體而導(dǎo)致無法識別的情況，保證了文本的可讀性。

所以一般的場景下（圖文疊加類除外）帶透明度的方式要優(yōu)于不帶透明度的方式。

而給文字設(shè)置不同灰度的不帶透明度的文字色，是一個相對比較穩(wěn)妥的做法。例如很多圖文視頻類產(chǎn)品中，都會在圖片上疊加一個半透明蒙層，蒙層上放置標(biāo)題類的文本（參考微信公眾號的樣式），如果使用帶透明度的文字，由于完全無法預(yù)判創(chuàng)作者上傳的圖片是什么內(nèi)容，導(dǎo)致文字與背景圖片的某些元素融在一起無法識別。

還有在某些 C 端的頁面中，經(jīng)常會出現(xiàn)文字放置在彩色背景的情況，帶透明度的文字h和彩色背景結(jié)合的顏色會偏離原來的色彩。因此為了避免這種情況出現(xiàn)，使用不帶透明度的文字，是一個相對更優(yōu)的選擇，例如微信在文字顏色的使用上，就采用了不帶透明度的方式。

在實際的項目中，可以結(jié)合上述兩種方法的優(yōu)點，在除了圖文疊加的場景下使用帶透明度的文字，在圖文疊加的場景中，使用不帶透明度的文字，兩種方式結(jié)合使用，提升文本類內(nèi)容的可讀性。

不過這種做法有個缺點：在很大比例的項目中，如果前期沒考慮到 Dark Mode 文字適配的情況下，前端不太可能會將文字與圖片是否疊加，作為寫兩種字體樣式的理由。如果要結(jié)合上述兩種方法的優(yōu)點，完美地適配文本類內(nèi)容，就需要前端去調(diào)整之前的代碼，一個個地改，前端同學(xué)可能會有比較大的抗性。

因此在實際項目中，需要因地制宜，采取最適合自家產(chǎn)品的策略。

ps：給文字加點色相可以直觀地提升閱讀體驗?zāi)壳笆忻嫔显S多產(chǎn)品都采用了這種方式，基本已經(jīng)成為了 UI 設(shè)計中的常規(guī)操作，包括最新的 iOS 15 設(shè)計規(guī)范，都為文字帶上了少許藍色相，而不是不帶色相的純灰色。

之所以帶色相，是因為相對于純灰的文字，帶有藍色相的文字比純灰色視覺觀感要好，顯得更有活力，不會像純灰色一樣灰撲撲的，視覺觀感比較死板。下方的兩張圖可以直觀地感受出文字是否帶色相之間的差異。

從圖片中可以看出，上方帶有色相的文字比下方不帶色相的文字，在深淺色背景下的直接閱讀體驗都要好，在文字本身顏色的明度不變的情況下，根據(jù)文字在頁面中的權(quán)重劃分，帶上不同數(shù)值的藍色飽和度，是在適配 Dark Mode 的過程中，低成本的直觀提升體驗的好辦法。

3. 圖標(biāo)

因此在實際的 Dark Mode 適配過程中，為本身字色為中性色的文字帶有一點藍色相，是一個低成本的直觀提升體驗的好辦法。

下面這張圖可以明顯的看出，頁面中間的八個圖標(biāo)在 Light Mode 中表現(xiàn)較好，線性圖標(biāo)較好地描繪了所表達的圖形輪廓，與頁面融合的較為和諧，但在 Dark Mode 中圖標(biāo)比較顯眼，線條感比較足，有一種鏤空感，而不是像 Light Mode 一樣表現(xiàn)的像是一種形狀。

造成這種感覺的原因是人眼在在黑白背景下成像的邏輯不同。

人眼大部分時間下都處于亮光狀態(tài)下，對于形狀的辨識取決于物體的大概輪廓，然后再去查看細節(jié)。對于一些帶有明顯輪廓的物體，在亮光環(huán)境下，人腦會自動將輪廓線條之內(nèi)的空間進行填充，我們在查看頁面內(nèi)的線性圖標(biāo)時，會默認圖標(biāo)內(nèi)部空白的區(qū)域是被填充的狀態(tài)。在暗光環(huán)境下，圖標(biāo)輪廓內(nèi)的空白區(qū)域要明顯暗于圖標(biāo)輪廓本身，人腦會默認暗色的空白區(qū)域是鏤空的。

所以對于線性圖標(biāo)而言，淺色背景下我們默認是填充的，而深色背景下默認是鏤空的，再加上目前市面上多數(shù)產(chǎn)品對于深色背景與文字的對比度把控的不夠好的原因，使得淺色背景上線性圖標(biāo)的觀感遠遠好于深色背景。

下方這張圖可以明顯的看出人眼在黑白環(huán)境下成像的差異。左側(cè) Light Mode 下的圖標(biāo)，用線條勾勒出笑臉的形狀，我們默認黑色圓圈內(nèi)的空白區(qū)域是臉，是有內(nèi)容填充的，而黑色的眼睛和嘴巴才是鏤空的。

將圖標(biāo)由 Light Mode 轉(zhuǎn)到 Dark Mode，僅做反色處理，下圖中間的笑臉會明顯給人感覺很怪異，嘴巴像是唐老鴨的感覺，是有填充的，眼睛也是有填充的，空白區(qū)域的臉部才像是鏤空的。

原理就是上面提到的，在暗光環(huán)境下，人眼會默認更亮的區(qū)域被填充，而較暗的區(qū)域是鏤空的。如果將深色背景中的圖標(biāo)轉(zhuǎn)換為面性圖標(biāo)，例如下圖中右側(cè)的圖標(biāo)，觀感與第一個圖標(biāo)是統(tǒng)一的，都是眼睛與嘴巴鏤空，而臉部被填充。這樣的展示方式最符合人的直覺，也是 Dark Mode 下圖標(biāo)設(shè)計需要格外注意的一點。

最近新出的 iOS 15 也體現(xiàn)了這種思路，將之前 Dark Mode 中的線性圖標(biāo)基本都替換為了面性圖標(biāo)。其中未使用面性的幾個圖標(biāo)，原因應(yīng)該是表意足夠明確，并且略微復(fù)雜，不適合用面性表現(xiàn)，如果使用簡單的別的面性形狀表現(xiàn)，則改變了用戶以往對這個圖標(biāo)所代表的功能的認知，所以沒有做替換。

在 Dark Mode 中的面性圖標(biāo)，除中性色圖標(biāo)外，還有各存在于不同場景中的不同類型與規(guī)格的彩色圖標(biāo)。

淺色背景中的彩色面性圖標(biāo)，一般情況下多用于快速入口、標(biāo)簽欄以及 CTA 按鈕等，用色一般都比較鮮艷，飽和度較高，與淺色背景的對比度較高，以此來吸引用戶的注意力。

但在深色背景中，飽和度較高的彩色與深色背景的對比度較低，導(dǎo)致識別性較差，這也是 Dark Mode 的八個設(shè)計準(zhǔn)則中提到的不建議用高飽和度色彩的原因。

彩色面性圖標(biāo)在深色背景上想要有較好的視覺觀感，可行的辦法是降低色彩飽和度，明度適當(dāng)降低，色相不做改變，能夠很大程度上的保證顯示效果。

例如下圖 QQ 的列表頁，在 Dark Mode 中降低了彩色面性圖標(biāo)的飽和度及明度，保持了一定的對比度的同時，整體的觀感比較和諧，并且識別性也比較高。

4. 圖片

關(guān)于 Dark Mode 中圖片適配的做法，我們先來看一個反面案例。

下圖 Light Mode 中，淺色背景與淺色圖片能夠較好地融合，不會顯得特別突兀，并且中間有播放按鈕，用戶能清晰地明白當(dāng)前場景下，元素所表達的含義，頁面看起來比較和諧。

切換為 Dark Mode 之后，白色圖片變成了整個頁面中最吸引視線的內(nèi)容，其他的內(nèi)容在頁面中的權(quán)重，相當(dāng)于被弱化掉了，這并不是我們想要的結(jié)果，如果一張一張的去重新做圖片，對于一些以圖文為主的產(chǎn)品來說成本實在是太高了，如果不換圖片，所有包含圖片、視頻以及 banner 的頁面，視覺效果都會大打折扣，這也是 Dark Mode 適配的另一個難點。

目前在 Dark Mode 的適配中，處理圖片類內(nèi)容的方法有三種。

一是圖片重做一遍，效果最好但也最費事費力，除非是有錢有閑的大公司，不然基本沒人考慮用這種方式。

二是使用工具對圖片進行批量化的智能處理，阿里做 Dark Mode 的適配時，由于是電商產(chǎn)品，商品圖非常多，所以開發(fā)了一款產(chǎn)品叫 ”頑兔“ （下圖），利用智能算法摳圖，把商品圖摳出來，然后略微加一點黑色遮罩，以實現(xiàn) Dark Mode 的適配，不過這種方式適用范圍不廣，對于一些banner圖、復(fù)雜的商品圖以及視頻入口的圖片，這種方式基本是沒辦法解決的。

三是直接在原來的圖片上加一層黑色遮罩，降低圖片的亮度，相對于前兩種方式，這種方式對于設(shè)計與開發(fā)來說基本等于沒有工作量，但缺點也比較明顯，直接加遮罩會顯著降低圖片的視覺觀感，拉低圖片質(zhì)量。

在實際項目中，需要根據(jù)產(chǎn)品本身的特性，選擇最適合當(dāng)前產(chǎn)品的適配策略，并且需要在進入設(shè)計開發(fā)前，就做好對應(yīng)的調(diào)研分析，采取投入產(chǎn)出比最大的方式來進行落地。

三、其他問題

適配 Dark Mode 的過程中，開發(fā)的做法是根據(jù)元素的屬性，統(tǒng)一進行變換。相同屬性的元素，可能會在不同的頁面中出現(xiàn)，開發(fā)只需要為原來的樣式，另外定義一個色值，就能實現(xiàn)深淺色模式的轉(zhuǎn)換。而不是我們憑直覺的以為開發(fā)也要一個頁面一個頁面的去改樣式。

所以在整體進行適配的過程中肯定會有一些細節(jié)的頁面或者元素，可能由于種種原因并沒有使用定義好的樣式，而是使用了獨立于定義好的樣式之外的樣式，這種頁面或元素，在適配的時候就會被忽略掉。因此我們需要在適配前就統(tǒng)計好頁面數(shù)量，并在開發(fā)完成后根據(jù)統(tǒng)計好的頁面一一查驗，保證不會出現(xiàn)遺漏。

不然就會出現(xiàn)下面這種情況。

四、可參考的競品

在實際項目中進行適配的時候，除了事先了解各類注意事項以外，這里提供幾個Dark Mode做的比較好的 C 端產(chǎn)品供大家參考：

優(yōu)酷、愛奇藝、抖音、釘釘、Facebook、奈飛、ins。

最后，希望大家在做Dark Mode相關(guān)工作的時候都能有個好心情[微笑]。

本文由@青色 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議