做一個引起極度舒適的「深色模式」，到底有多難？

　　編者薦語：

　　其實並不是簡單的從白變黑，尤其是對於國民級應用微信來説，當中涉及的設計和開發量，甚至不比重新開發一遍少。

　　以下文章來源於愛範兒 ，作者李超凡

　　 作者 | 李超凡

　　來源 | 愛範兒（ID：ifanr）

　　盼望着，盼望着，微信的「深色模式」正式上線了。

　　「深色模式」是這兩年用户呼聲最高的功能之一，不過 iOS 和 Android 也是去年才開始適配深色模式，似乎越是大型的應用和平台，在推出「深色模式」這個問題上就越是謹慎。

　　去年微信團隊曾在微博以打趣的口吻回應稱，「不忍心佔用用户珍貴的夜晚」。不打擾，一直是微信的温柔。

　　可很多人不知道的是，要給用户提供一個引起極度舒適的「深色模式」，其實並不是簡單的從白變黑，尤其是對於一款國民級應用來説，當中涉及的設計和開發量，甚至不比重新開發一遍少。

　　深色模式的黑，是什麼黑

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

　　但「深色模式」要實現理想的視覺體驗，絕不是將底色變黑，將文字變白這麼簡單。Google 在 Material Design 中對於深色模式中列出的設計規範中，第一條就是「不要使用 100% 的純黑」。

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

　　為什麼呢？因為純白色會反射所有波長的光線，而純黑色會吸收所有光線，這是對比度最大的兩種顏色，白底黑字時，文字過於刺眼，而黑底白字時，文字又可能難以辨認。

　　如果在同時一個頁面上大面積使用純白色或者純黑色，反而會在長時間閲讀時讓眼睛感到疲勞。雖然有大量研究已經證明深色模式並不護眼，但如果它讓用户使用 app 時更加不適，那同樣與深色模式開發的初衷背道而馳。

　　此外純黑和純白的高對比度，會讓頁面無法通過陰影效果來構建視覺層次。比如下圖中兩個方框中灰色方塊，在左側純黑的方框中，幾乎看不到灰色方塊的陰影。而右側深灰色方框中，陰影的變化則明顯得多。

　　其實「深灰色」也是很多應用在深色模式中所使用的背景色，這次微信更新的深色模式裏，聊天背景用的就是深灰色（#181818）。

　　文字顏色也是一樣，比如在亮色模式下偏暗色調的文字，在深色模式下會變得難以閲讀。因此也需要選擇合適的顏色，既能清晰顯示，也減輕用户的視覺疲勞。

　　如果你覺得對比不夠明顯，不妨來看一下 Twitter 和 iOS 模式深色模式 。Twitter 提供了兩種深色模式，分別是「昏暗（Dim）」和「熄燈（Light out）」，前者背景色為深灰色，後者基本是純黑色。

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

　　打開微信的深色模式，你也能看到類似的設計。在「朋友圈」、「視頻號」、「掃一掃」等可交互的功能欄上，都採用比深灰色背景更亮的灰色。

　　由於深色模式下容易出現難以區分兩個元素的情況，這種方式能讓顏色在不同的外觀模式下都具備足夠的對比度。

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

　　比如很多 app 的品牌色飽和度都比較高，然而高飽和色則是深色模式的大忌之一。正如前文所説，這種對比度十分影響視覺體驗，因此必須降低這些顏色的飽和度，比如 Google 的深色模式就會給「錯誤提示」的紅色一層 40% 透明的白色圖層。

　　看起來容易非常容易對不對？

　　對於一些輕量級 app 或許是的，但對於一些規模龐大。代碼結構複雜的 app 來説，要給各個頁面、每個圖標和元素都重新調整配色，真的會讓程序員分分鐘吐血。

　　如果把深色模式看作給房子刷漆，給一間小房子刷漆的難度，和一個幾十棟樓的大型小區無法顯然無法相提並論。

　　對於月活超過 11 億的微信來説，這顯然不是一件一蹴而就的事情。

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

　　的確，在微信上線深色模式之前，就有一些 app 就推出了深色模式，比如知乎，但這些應用的深色基本沿用了原來的「夜間模式」，體驗一言難盡，可以參考下面這些知乎用户的評論。

　　很多人會把深色模式與夜間模式劃上等號，但實際上兩者並非完全是一回事。夜間模式主要照顧是暗光條件下的場景，而深色模式還需要兼顧亮光環境下的使用。

　　設計網站 UX Planet 主編 Nick Babich 列出的「暗黑模式 8 個設計準則」就有這麼一條，「要分別在燈光和黑暗條件進行測試」。縱觀現在推出深色模式的 app，能讓人在亮光環境下依然願意使用的並不多。

　　除此之外，在一些應用上的部分功能模塊，往往還不能直接變為深色。尤其是在一些文字編輯的界面，白色或者淺色背景才能讓人產生「在紙張上書寫」的感覺。

　　俄羅斯最大的搜索引擎 Yandex 在設計郵箱客户端時就遇到了類似的問題，後來他們通過一種基於 CSS 變量的方法解決，讓深色模式在保持一定對比度和亮度自適應地調整。

　　這樣的問題在很多電商 app 上更顯明顯，因為大量商品的圖片和視頻都是以淺色背景為主。如果要只把背景變深色，就會顯得十分刺眼。但如果要調整海量的商品圖片底色，工作量則十分巨大。

　　針對這個問題，蘋果給出的建議是採用「語義化顏色」（Semantic Colors）進行適配。所謂語義化顏色，就是不再通過某一色值來描述顏色，而是根據用途來描述，讓界面元素可以自動適配當前的外觀模式。

　　去年被淘寶稱為「史上難度最大適配」的 iOS 內測深色模式，顏色的適配就是採用了「語義化顏色」的原理。

圖片來自：阿里巴巴國際UED

　　按照淘寶的介紹，這種方案大大降低了對所有頁面進行進行顏色語義化設置的難度，讓絕大多數場景無需修改代碼就可以自動適配深色模式，可以在短時間內快速、高質量適配深色模式。

　　總的來説，給應用適配深色模式的技術難度本身並不高。但要兼顧的細節卻非常多，如果碰上量級十分大的應用，複雜程度就會超乎想象。

　　為什麼需要深色模式？

　　深色模式的作用過去常常被誇大。其實深色模式不僅不護眼，在很多場景其實反而會降低閲讀效率。有研究視覺研究表明，人眼天生就是更喜歡前暗後亮（dark-on-light）。

　　既然如此，花費這麼多資源適配深色模式到底有沒有必要呢?

　　談論一款產品或一項功能的可用性，不能脱離用户的使用場景。深色模式未必所有產品的設計趨勢，但好的深色模式卻讓不少必要的場景體驗更加人性化。

　　愛範兒在之前一篇文章中，科普了深色模式的用途。Android 開發者網站的黑暗主題開發指導則介紹了深色模式的三大優勢：

　　大幅減少電量的消耗

　　為視力不佳的用户與對強光敏感的用户提供更好的可視性

　　讓任何人都能在暗光環境中使用智能手機

　　不久前《財富》雜誌發佈了全球 100 個最偉大的現代設計，同時指出了好設計的標準，已經從一種純粹的產品美學，變為了一個產品或服務能否更好地去實現特定目的、功能，以及能否為社會帶來持續的影響。

　　對於 iPhone 、微信這些產品來説，深色模式可以説是延續這種設計理念的一部分。

　　題圖來自：Medium