盼望著，盼望著，微信的“深色模式”正式上線了。

“深色模式”是這兩年用戶呼聲最高的功能之一，不過(guò) iOS 和 Android 也是去年才開始適配深色模式，似乎越是大型的應(yīng)用和平臺(tái)，在推出“深色模式”這個(gè)問(wèn)題上就越是謹(jǐn)慎。

去年微信團(tuán)隊(duì)曾在微博以打趣的口吻回應(yīng)稱，“不忍心占用用戶珍貴的夜晚”。不打擾，一直是微信的溫柔。

可很多人不知道的是，要給用戶提供一個(gè)引起極度舒適的“深色模式”，其實(shí)并不是簡(jiǎn)單的從白變黑，尤其是對(duì)于一款國(guó)民級(jí)應(yīng)用來(lái)說(shuō)，當(dāng)中涉及的設(shè)計(jì)和開發(fā)量，甚至不比重新開發(fā)一遍少。

深色模式的黑，是什么黑

深色模式（Dark Mode）也被叫做暗黑模式，顧名思義，它給人最直觀的感受，就是黑。

但“深色模式”要實(shí)現(xiàn)理想的視覺(jué)體驗(yàn)，絕不是將底色變黑，將文字變白這么簡(jiǎn)單。Google 在 Material Design 中對(duì)于深色模式中列出的設(shè)計(jì)規(guī)范中，第一條就是“不要使用 100% 的純黑”。

UI 設(shè)計(jì)師 Ilke Verrelst 曾指出，不要在純白背景上顯示純黑文字，反之亦然，這是基本的設(shè)計(jì)規(guī)則。

為什么呢？因?yàn)榧儼咨珪?huì)反射所有波長(zhǎng)的光線，而純黑色會(huì)吸收所有光線，這是對(duì)比度最大的兩種顏色，白底黑字時(shí)，文字過(guò)于刺眼，而黑底白字時(shí)，文字又可能難以辨認(rèn)。

如果在同時(shí)一個(gè)頁(yè)面上大面積使用純白色或者純黑色，反而會(huì)在長(zhǎng)時(shí)間閱讀時(shí)讓眼睛感到疲勞。雖然有大量研究已經(jīng)證明深色模式并不護(hù)眼，但如果它讓用戶使用 app 時(shí)更加不適，那同樣與深色模式開發(fā)的初衷背道而馳。

此外純黑和純白的高對(duì)比度，會(huì)讓頁(yè)面無(wú)法通過(guò)陰影效果來(lái)構(gòu)建視覺(jué)層次。比如下圖中兩個(gè)方框中灰色方塊，在左側(cè)純黑的方框中，幾乎看不到灰色方塊的陰影。而右側(cè)深灰色方框中，陰影的變化則明顯得多。

其實(shí)“深灰色”也是很多應(yīng)用在深色模式中所使用的背景色，這次微信更新的深色模式里，聊天背景用的就是深灰色（#181818）。

文字顏色也是一樣，比如在亮色模式下偏暗色調(diào)的文字，在深色模式下會(huì)變得難以閱讀。因此也需要選擇合適的顏色，既能清晰顯示，也減輕用戶的視覺(jué)疲勞。

如果你覺(jué)得對(duì)比不夠明顯，不妨來(lái)看一下 Twitter 和 iOS 模式深色模式 。Twitter 提供了兩種深色模式，分別是“昏暗（Dim）”和“熄燈（Light out）”，前者背景色為深灰色，后者基本是純黑色。

從 Medium 上一位作者 Pudge 給出的對(duì)比圖來(lái)看，在 Twitter 純黑背景的深色模式下的界面下，通欄列表幾乎與背景融為一體了。而 iOS 在深色模式下的這些地方用了稍亮的灰色，感覺(jué)更加自然了。

打開微信的深色模式，你也能看到類似的設(shè)計(jì)。在“朋友圈”“視頻號(hào)”“掃一掃”等可交互的功能欄上，都采用比深灰色背景更亮的灰色。

由于深色模式下容易出現(xiàn)難以區(qū)分兩個(gè)元素的情況，這種方式能讓顏色在不同的外觀模式下都具備足夠的對(duì)比度。

不只是背景色，在低對(duì)比度的深色模式下之下，一般模式之下的各種色彩幾乎都要重新設(shè)計(jì)。

比如很多 app 的品牌色飽和度都比較高，然而高飽和色則是深色模式的大忌之一。正如前文所說(shuō)，這種對(duì)比度十分影響視覺(jué)體驗(yàn)，因此必須降低這些顏色的飽和度，比如 Google 的深色模式就會(huì)給“錯(cuò)誤提示”的紅色一層 40% 透明的白色圖層。

看起來(lái)容易非常容易對(duì)不對(duì)？

對(duì)于一些輕量級(jí) app 或許是的，但對(duì)于一些規(guī)模龐大，代碼結(jié)構(gòu)復(fù)雜的 app 來(lái)說(shuō)，要給各個(gè)頁(yè)面、每個(gè)圖標(biāo)和元素都重新調(diào)整配色，真的會(huì)讓程序員分分鐘吐血。

如果把深色模式看作給房子刷漆，給一間小房子刷漆的難度，和一個(gè)幾十棟樓的大型小區(qū)無(wú)法顯然無(wú)法相提并論。

對(duì)于月活超過(guò) 11 億的微信來(lái)說(shuō)，這顯然不是一件一蹴而就的事情。

很多 app 都做了深色模式，真的有那么難嗎？

的確，在微信上線深色模式之前，就有一些 app 就推出了深色模式，比如知乎，但這些應(yīng)用的深色基本沿用了原來(lái)的“夜間模式”，體驗(yàn)一言難盡，可以參考下面這些用戶的評(píng)論。

很多人會(huì)把深色模式與夜間模式劃上等號(hào)，但實(shí)際上兩者并非完全是一回事。夜間模式主要照顧是暗光條件下的場(chǎng)景，而深色模式還需要兼顧亮光環(huán)境下的使用。

設(shè)計(jì)網(wǎng)站 UX Planet 主編 Nick Babich 列出的“暗黑模式 8 個(gè)設(shè)計(jì)準(zhǔn)則”就有這么一條，“要分別在燈光和黑暗條件進(jìn)行測(cè)試”?？v觀現(xiàn)在推出深色模式的 app，能讓人在亮光環(huán)境下依然愿意使用的并不多。

除此之外，在一些應(yīng)用上的部分功能模塊，往往還不能直接變?yōu)樯钌?。尤其是在一些文字編輯的界面，白色或者淺色背景才能讓人產(chǎn)生“在紙張上書寫”的感覺(jué)。

俄羅斯最大的搜索引擎 Yandex 在設(shè)計(jì)郵箱客戶端時(shí)就遇到了類似的問(wèn)題，后來(lái)他們通過(guò)一種基于 CSS 變量的方法解決，讓深色模式在保持一定對(duì)比度和亮度自適應(yīng)地調(diào)整。

這樣的問(wèn)題在很多電商 app 上更顯明顯，因?yàn)榇罅可唐返膱D片和視頻都是以淺色背景為主。如果要只把背景變深色，就會(huì)顯得十分刺眼。但如果要調(diào)整海量的商品圖片底色，工作量則十分巨大。

針對(duì)這個(gè)問(wèn)題，蘋果給出的建議是采用“語(yǔ)義化顏色”（Semantic Colors）進(jìn)行適配。所謂語(yǔ)義化顏色，就是不再通過(guò)某一色值來(lái)描述顏色，而是根據(jù)用途來(lái)描述，讓界面元素可以自動(dòng)適配當(dāng)前的外觀模式。

去年被淘寶稱為“史上難度最大適配”的 iOS 內(nèi)測(cè)深色模式，顏色的適配就是采用了“語(yǔ)義化顏色”的原理。

圖片來(lái)自：阿里巴巴國(guó)際UED

按照淘寶的介紹，這種方案大大降低了對(duì)所有頁(yè)面進(jìn)行進(jìn)行顏色語(yǔ)義化設(shè)置的難度，讓絕大多數(shù)場(chǎng)景無(wú)需修改代碼就可以自動(dòng)適配深色模式，可以在短時(shí)間內(nèi)快速、高質(zhì)量適配深色模式。

總的來(lái)說(shuō)，給應(yīng)用適配深色模式的技術(shù)難度本身并不高。但要兼顧的細(xì)節(jié)卻非常多，如果碰上量級(jí)十分大的應(yīng)用，復(fù)雜程度就會(huì)超乎想象。

為什么需要深色模式？

深色模式的作用過(guò)去常常被夸大。其實(shí)深色模式不僅不護(hù)眼，在很多場(chǎng)景其實(shí)反而會(huì)降低閱讀效率。有研究視覺(jué)研究表明，人眼天生就是更喜歡前暗后亮（dark-on-light）。

既然如此，花費(fèi)這么多資源適配深色模式到底有沒(méi)有必要呢?

談?wù)撘豢町a(chǎn)品或一項(xiàng)功能的可用性，不能脫離用戶的使用場(chǎng)景。深色模式未必所有產(chǎn)品的設(shè)計(jì)趨勢(shì)，但好的深色模式卻讓不少必要的場(chǎng)景體驗(yàn)更加人性化。

愛(ài)范兒在之前一篇文章中，科普了深色模式的用途。Android 開發(fā)者網(wǎng)站的黑暗主題開發(fā)指導(dǎo)則介紹了深色模式的三大優(yōu)勢(shì)：

• 大幅減少電量的消耗
• 為視力不佳的用戶與對(duì)強(qiáng)光敏感的用戶提供更好的可視性
• 讓任何人都能在暗光環(huán)境中使用智能手機(jī)

不久前《財(cái)富》雜志發(fā)布了全球 100 個(gè)最偉大的現(xiàn)代設(shè)計(jì)，同時(shí)指出了好設(shè)計(jì)的標(biāo)準(zhǔn)，已經(jīng)從一種純粹的產(chǎn)品美學(xué)，變?yōu)榱艘粋€(gè)產(chǎn)品或服務(wù)能否更好地去實(shí)現(xiàn)特定目的、功能，以及能否為社會(huì)帶來(lái)持續(xù)的影響。

對(duì)于 iPhone 、微信這些產(chǎn)品來(lái)說(shuō)，深色模式可以說(shuō)是延續(xù)這種設(shè)計(jì)理念的一部分。

本文來(lái)自微信公眾號(hào)：愛(ài)范兒（ID：ifanr），作者：李超凡