編輯導(dǎo)語(yǔ)：Dark Mode設(shè)計(jì)并不少見(jiàn)，許多產(chǎn)品也選擇適配Dark Mode，但是不少產(chǎn)品的適配工作仍有待繼續(xù)完善。那么，相較于Light Mode，Dark Mode發(fā)生了哪些變化？產(chǎn)品在適配這一模式的過(guò)程中，可以從哪些方面入手？本文作者就Dark Mode設(shè)計(jì)發(fā)表了他的看法，一起來(lái)看一下。

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

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

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

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

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

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

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

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

由于對(duì)比度原因，飽和度過(guò)高的色彩在深色背景下較難被識(shí)別，而使用飽和度較低的色彩則可以避免這個(gè)問(wèn)題。

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

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

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

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

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

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

6. 讓用戶選擇切換模式

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

7. 考慮色彩情感因素

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

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

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

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

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

來(lái)源：微信安卓版

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

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

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

1. 層級(jí)

Dark Mode 和 Light Mode 都采用不同灰度的背景來(lái)代表頁(yè)面的不同層級(jí)。

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

1）蘋(píng)果/谷歌各自表現(xiàn)頁(yè)面層級(jí)的方式

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

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

與蘋(píng)果不同的是，谷歌采用了不帶色相的深灰色，并在其上疊加規(guī)律變化的不同透明度的白色來(lái)體現(xiàn)層級(jí)關(guān)系，而且谷歌在體現(xiàn)層級(jí)時(shí)還使用了陰影，這也是谷歌不用純黑背景的原因，因?yàn)殛幱霸诩兒谏尘吧蠒?huì)完全融入背景（加了和沒(méi)加一樣，還白白消耗性能）。

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

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

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

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

3）建議

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

之所以不用純黑背景，是因?yàn)榧兒谏c白色的文字對(duì)比度太高，在暗光環(huán)境下直觀的視覺(jué)效果比較刺眼。用深灰背景可以最大程度覆蓋各種場(chǎng)景的使用體驗(yàn)。

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

2. 文字

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

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

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

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

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

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

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

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

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

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

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

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

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

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

之所以帶色相，是因?yàn)橄鄬?duì)于純灰的文字，帶有藍(lán)色相的文字比純灰色視覺(jué)觀感要好，顯得更有活力，不會(huì)像純灰色一樣灰撲撲的，視覺(jué)觀感比較死板。下方的兩張圖可以直觀地感受出文字是否帶色相之間的差異。

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

3. 圖標(biāo)

因此在實(shí)際的 Dark Mode 適配過(guò)程中，為本身字色為中性色的文字帶有一點(diǎn)藍(lán)色相，是一個(gè)低成本的直觀提升體驗(yàn)的好辦法。

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

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

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

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

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

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

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

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

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

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

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

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

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

4. 圖片

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

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

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

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

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

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

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

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

三、其他問(wèn)題

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

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

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

四、可參考的競(jìng)品

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

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

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

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

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