深色模式不等於夜間模式!做一個讓用戶舒適的Dark Mode,到底有多難?

2020.03.30 by
愛范兒 ifanr
愛范兒 ifanr 查看更多文章

愛范兒連接全球創新者及消費者,跨界技術、文化、消費及創新,致力消費科技領域的產業評論、產品報導及社群連接,創造高品質的消費樂趣。

深色模式不等於夜間模式!做一個讓用戶舒適的Dark Mode,到底有多難?
愛范兒
什麼是深色模式?許多人會把夜間模式與深色模式劃上等號,但實際上這兩者完全不同,前者主要照顧的是暗光條件下的場景,而後者還需要兼顧亮光環境下的使用。

微信的「深色模式」正式上線了。

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

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

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

深色模式的黑,是什麼黑?

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

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

愛范兒

延伸閱讀:病毒能在手機上活9天,怎麼消毒才正確?蘋果、Google、三星官方建議作法

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內測深色模式,顏色的適配就是採用了「語義化顏色」的原理。

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

總而言之,給app適配深色模式的技術難度本身並不高,但要兼顧的細節卻非常多,如果碰上量級十分大的app,複雜程度就會超乎想像。

為什麼需要深色模式?

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

愛范兒

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

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

之前一篇文章中,我們科普了深色模式的用途。Android開發者網站的黑暗主題開發指導則介紹了深色模式的三大優勢:

  • 大幅減少電量的消耗
  • 為視力不佳的用戶與對強光敏感的用戶提供更好的可視性
  • 讓任何人都能在暗光環境中使用智慧手機

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

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

延伸閱讀:3天開發上線!唐鳳談口罩2.0方案四大特點

責任編輯:林芳如、蕭閔云

本文授權轉在自愛范兒

延伸閱讀

每日精選科技圈重要消息