從2019年下半年iOS 13的發布開始,「Dark Mode」越來越多地出現在大眾的視野中,近期更是隨著微信的適配再引熱議。那么這樣一個系統模式到底是從何而來,又對設計師的工作、生活帶來了哪些影響呢?今天就讓我們一起來探個究竟吧!

「Dark Mode」才是一切的起源

實際上,在計算機誕生的早期,這巴掌大的方寸之屏一直被「深色模式」占據著。

這是因為在20世紀60~80年代的計算機顯示屏使用的還是只能支持單色顯示的陰極射線管(CRT),黑底綠字的展示方式就成為了當時的常態。

「深色模式」的前世今生,都在這一篇里了

即使是80年代之后,彩色CRT顯示器逐漸流行普及,但當時主流的DOS并沒有什么「圖形界面」的概念,依然延續了先前黑底的習慣。直到1984年,蘋果發布了個人計算機Macintosh,普及了圖形用戶界面(Graphic User Interface)的概念,從而開啟了以白色為底色的圖形交互時代。

「深色模式」的前世今生,都在這一篇里了

沒想到吧,蘋果開創的歷史,現如今又被它自己改回去了。

但即便如此,程序員們還是對深色界面情有獨鐘。早在2005年就有為Textmate編輯器設計的深色主題存在了,甚至在10年前,他們就在Reddit上開啟了對于「深色界面」的討論:

「深色模式」的前世今生,都在這一篇里了

在他們看來,深色的背景界面能讓顏色顯得更亮,以及更好地被聚焦,但白色背景在陽光直射的場景下會有更好的表現。由此可見,對于「Dark Mode」的思考,從來不僅僅停留在「夜間模式」那么簡單。

「Dark Mode」是如何進入大眾視野的

我們可以先在Google Trends里看一下「Dark Mode」全球被搜索量的變化趨勢:

「深色模式」的前世今生,都在這一篇里了

可以看到2016年前「Dark Mode」幾乎無人問津,而最高的搜索峰值出現在2019年10月,正是iOS 13這一支持「深色模式」系統的發布時間。

再看看百度指數的記錄:

「深色模式」的前世今生,都在這一篇里了

關鍵詞「夜間模式」自2013年就已出現,并保持著較為平緩的熱度,直到微信適配「Dark Mode」后出現了峰值。關鍵詞「暗黑模式」相比之下熱度就較為慘淡了。奇怪的是Apple的官方翻譯「深色模式」以及「Dark Mode」并未被百度指數收錄,故圖中沒有相關的數據。

由此推測,「Dark Mode」的逐步流行,很大程度受到了主流的移動設備操作系統的影響,例如蘋果新系統的發布,以及微信這類主流應用對系統變化的響應。除此以外,2013年后中國移動互聯網的飛速發展,也產生了更多不同的手機/電腦使用場景。

從這份2018年的《移動互聯網行業分析報告》中我們可以看出,越來越多的人選擇在夜間/較為昏暗的場景下使用手機,短視頻的出現更是讓人們不舍得入睡:

「深色模式」的前世今生,都在這一篇里了

夜間使用場景的增加助長了大家對于深色模式的需求,畢竟誰也不想天天在被窩里被各種白色背景亮瞎雙眼。但正如前文所說,「Dark Mode」要做的,并不是簡單地滿足用戶在夜晚的使用需求,切換了深色模式后所帶來的視覺沉浸感,也是提升人們使用欲望的一大原因。

關于這一點,在去年的 WWDC 大會上,蘋果人機交互團隊的設計師 Raymond Sepulveda 也對 macOS 「深色模式」的使用場景做了進一步解釋:

他指出,只有閱讀瀏覽或是內容創作型 App 才需要長期啟用深色模式,比如文字或代碼編輯。它們會借助黑底白字的高對比度特性來讓用戶視線保持集中,這大概就是我們對深色模式感到「真香」的原因之一。

與此同時,越來越長的屏幕使用時間也提升了我們對于設備續航的要求,而「深色模式」在這一點上表現不俗。目前的中高端手機大多采用OLED屏幕,這一材質自發光的特性使得屏幕能夠獨立控制單個像素是否發光,根據谷歌官方數據來看,采用OLED屏幕的手機在「深色模式」下,耗電可下降達63%。

「深色模式」的前世今生,都在這一篇里了

除此之外,隨著移動設備在主流群體中逐漸飽和,邊緣的視障群體也隨之得到了更多的關注。雖然對于「深色模式」到底是否能夠起到「護眼」的作用,大家還各執一詞,但人們確實需要「深色模式」,也正因如此,它越來越多地出現在了人們的生活場景中;從此,白天也懂了夜的黑。

「Dark Mode」是如何被應用的

說道「深色模式」具體應當如何被應用,必然躲不開蘋果和谷歌這兩大主流操作系統下的規范。先來看看它們在各自的設計文檔中是如何描述這一模式的:

「深色模式」的前世今生,都在這一篇里了

Human Interface Guidelines描述道,「深色模式」應當隨著系統設置變化而變化,否則你的應用就會看起來像出了bug。由此我們可以看出蘋果對于整個操作場景系統統一性的高要求,但部分App將「深色模式」作為一種可選擇的皮膚存在,一定程度上也為用戶提供了更多的選擇。

此外,在光照充足的場景下保證「深色模式」的可用性與在夜晚一樣重要,在任何的場景以及任何的界面介質上(無論是扁平、擬物還是毛玻璃或者其它風格),都要保證內容的可讀性。落到具體的操作上,我們不僅要關注正常視力的人群,也要關注有視力損傷的群里。對于自定義的前景色與背景色,尤其是在使用較小字號文字的時候(根據個人經驗,大約以20號字為界)最好能維持7:1的對比度。

「深色模式」的前世今生,都在這一篇里了

除此之外,蘋果還提出了「Dynamic System」的概念,國內大多翻譯為「語義化顏色」,即不設定固定的色值,而是用其所使用的場景來對顏色進行描述:

「深色模式」的前世今生,都在這一篇里了

舉個例子,同樣是系統背景色(System Background)這一定義,在「淺色模式」下指的是#000000,在「深色模式」下則指的是#FFFFFF,這樣一來,顏色就能更好地適用于所存在的場景,根據它對設計目標的優先級來進行動態的調整。

再來看看Material Design對「深色模式」的優點描述:

「深色模式」的前世今生,都在這一篇里了

減少屏幕明度、減輕眼睛負擔、提升視覺效率、節省電量,如第二段中提到的,這些都是我們選擇「深色模式」的理由。那么在具體的應用中我們又該怎么做呢?

和蘋果的設計風格不同,Material Design引入了Z軸的概念,于是在界面層級的深度上就需要更為靈活的展示范圍。與蘋果設定的純黑背景不同,Material Design選擇了深灰色作為展示大范圍區域的主色,同時有節制地選用能夠適配于「深色模式」的強調色,并通過滿足對比度的要求提升頁面的可用性。此外,對于需要更高效利用能源的產品(如OLED屏幕),它鼓勵使用「深色模式」來延長電池的續航時間。

「深色模式」的前世今生,都在這一篇里了

Material Design下的「深色模式」主題,需要滿足以下幾個屬性:

「深色模式」的前世今生,都在這一篇里了

  • 對比度:深色區域與純白字體的對比度至少要達到15.8:1;
  • 層級深度:使用更淺的表層顏色來表示具有更高層級位置的元素;
  • 去飽和度:主色調需要降低飽和度,以讓正文本的對比度達到4.5:1的Web Content Accessibility Guidelines(WCAG)AA標準。
  • 用色節制:在大面積使用深色背景的時候,有節制地使用提亮色(如淺色,低飽和色、明亮色,或高飽和色)這是因為高飽和度的顏色往往容易在深色背景上產生眩光,降低頁面的可用性。

了解了主流系統對于「深色模式」的規范后,我們可以再來看看以iOS為例,有哪些App已經適配了暗黑模式:

「深色模式」的前世今生,都在這一篇里了

大致看來,深色模式的趨勢大多是先從生產力工具(自己單獨用)、到群體類工具(和有社交關系的人一起用)、到富內容的大眾型平臺(和千萬人一起用)推廣開的,而在這些app中,近期最具有討論熱度的莫過于微信了。

作為一個富內容的社交工具,「深色模式」首先影響的就是其多樣的內容生態。例如公眾號的深色配圖文案「蜜汁消失」,表情包也變成了「視力測驗」:

「深色模式」的前世今生,都在這一篇里了

所以像這類富內容的應用平臺,出去那些已經被前輩大牛們分析得十分透徹的顏色、對比度問題,如何針對不同場景下的內容展示,例如圖片豐富的場景,如何考慮顏色的極限顯示,是在發布時進行限定,還是由平臺進行統一的后期調整,都是需要設計師去重點考慮的。

除了微信之外,相信有些朋友已經注意到了,淘寶和京東近期也進行了深色模式的適配,那么當電商平臺遇上深色模式,會擦出什么樣的火花呢?

「深色模式」的前世今生,都在這一篇里了

由這兩張截圖我們可以看到電商界面的特點:

  • 商品圖居多,且大部分為了保證日間模式下的界面清爽程度,都會選用白底商品圖為主;
  • 有很多飽和度較高、動態效果豐富的氛圍圖存在;

此外,在實際的頁面鏈路中,往往會涉及到多種不同類型頁面的跳轉,例如從首頁進入商詳頁、店鋪頁、搜索集合頁等等,更不必說每年豐富多樣的大促活動,這些頁面的內容類型和展示信息偏好都各有不同,也就給電商應用的深色模式適配帶來了極大的挑戰。

此外,從色彩心理學的角度上來說,雖然深色背景能夠為用戶帶來更強的瀏覽沉浸感,但在大部分現實中的購物中心還是更偏好于使用明度更高的顏色作為商場的主色,這一方面是出于與不同受眾的店鋪、品牌主色、燈光顏色進行搭配,空間感知上也更具有膨脹感;另一方面明亮的顏色和場景也能更好地吸引用戶的注意力,調動用戶購物的積極性。

但在移動設備的場景中,涉及到電子屏幕光的反射,明度過高的顏色就很容易引起用戶的視覺疲勞感。針對如此復雜且大量的色彩轉換需求,淘寶和京東都針對自身平臺的品牌特質,進行了對應的調整:

「深色模式」的前世今生,都在這一篇里了

「深色模式」的前世今生,都在這一篇里了

除了基本的組件顏色變化,在未來的迭代中,是否可以根據深色模式進行智能的商品圖適配(例如使用較少白底的,更具有氛圍感的單品圖),都是我們可以考慮的方向。但回歸到最原本的出發點,暗黑模式在電商購物場景下是否能為用戶帶來更好的體驗,還是讓數據來檢驗吧。

參考資料:

歡迎關注「京東設計中心JDC」的微信公眾號:

「深色模式」的前世今生,都在這一篇里了

點贊 3
收藏 27
繼續閱讀相關文章

發表評論 已發布 2

還可以輸入 800 個字
 
 
載入中....
2 收藏