黑暗模式大勢所趨,盤點常見APP黑暗模式設計

2020-12-21 人人都是產品經理

前段時候,一則「蘋果稱:微信若堅持不開發夜間模式,或面臨下架」的消息傳播網際網路,由於展開對黑暗模式的討論與探究不絕於耳,本文也以此為話題聊聊常見的APP黑暗模式設計。

「黑夜給了我黑色眼睛,我卻用它玩手機」

隨著蘋果對App Store商店的審核指南所做的更新,對黑暗模式的重視,可以看出黑暗模式原本類似於皮膚級的功能變成了系統級支持,為什麼它會火起來呢?

一些用戶認為,暗黑模式可以更好的保護視力減少用戶疲勞,同時也避免了不打擾到別人。

以下是文章主要框架:

01 黑暗模式真的護眼嗎?

實際上在我們的DNA中,人眼更習慣於在明亮的背景下對較暗的物體操作,並在白天亮光的情況下活躍,黑夜中安然入睡。

今年4月5日,微信團隊曾發微博:

但是,在當地時間6月3日,蘋果WWDC 2019宣布iOS13確定引入全局深色模式之後……

微信就把上面那條微博刪除了……

回歸正題,目前已經有大量的研究證明,黑暗模式與護眼與否並沒有直接的關係,根據美國驗光協會的數據,散光是一種非常普遍的現象。而散光患者閱讀」白板黑字「比閱讀」黑板白字「更難。

還記得嗎,從小為了避免近視都會被教導,最適合於學習的光線是在白天,那是因為熄燈後,周圍的光線黑暗,我們的視線被鎖在了幾寸的屏幕中。緊盯著屏幕,容易導致視網膜過度勞累。從而引起近視、散光、視力偏差等眼部問題。

另外,人正常情況下,每分鐘大約要眨動15次眼睛。專注於玩手機時,我們常常會無意識的忘記眨眼,淚液分泌也會相對減少。眼睛長期保持乾澀、疼痛,很容易發生乾眼症,引起重影、視力模糊等症狀。這不代表晚上不能玩手機,而是不要關燈玩手機!

發現了嗎,其實黑暗模式,就是把燈關上了,哪裡來的護眼一說。(想護眼咱就老老實實早睡早起放下手機,不行就開燈玩)

02 不護眼,為什麼DARK MODE 還會流行

1. 歷史原因

計算機誕生之初就是只有「黑暗模式」,在在 20 世紀 60-80 年代,當時計算顯示設備是陰極射線管(CRT),是單色顯示器。除了黑底白字外,黑底綠字是當時單色顯示器的常態。

2. 從用戶需求的角度考慮

許多人在睡前都會有在床上看手機的習慣。然而,在夜間使用手機,非常痛苦的一件事情就是刺眼的界面。雖然有許多 app 已經支持了夜間模式,但還遠遠不夠。在昏暗的情況下注視屏幕,如果屏幕過量和周圍的昏暗環境對比較大,人眼會隨著App之間的切換收到不同程度的刺激,大概就是這種感覺:

3. 從用戶體驗的角度考慮

黑暗模式更有利於進入沉浸式體驗沉浸式設計中,即要有吸引用戶的無縫連結的完整故事鏈條,還需要營造主題場景空間,通過場景延伸融合故事情節,適時製造有趣的互動體驗節點等等。從而使用戶沉浸其中,忘卻真實世界。

沉浸式設計的關鍵是吸引,用戶的視線首先被吸引過來,深色首先讓用戶感知到的是注意力迅速集中起來,不然總覺得看不清或者會錯過什麼?所以說深色更容易讓人進入沉浸式體驗模式, 在設計上被引用的很多

4. 從硬體角度考慮

黑暗模式 與OLED屏幕本身黑色不發光的特性相契合。目前越來越多的手機拋棄LCD屏幕用上了OLED屏幕,OLED顯示黑色的時候可以直接關閉黑色區域的像素點,來達到幾乎純黑的效果。

並且根據谷歌的研究,暗色主題能夠使 OLED 設備在同等亮度下的電量消耗減少 63%,這主要是由於LCD無論顯示什麼顏色都是背光全開,所以LCD註定耗電;OLED由於像素點獨立工作,該亮的亮,該暗的暗,該滅的滅,因此黑暗模式下,手機可以做到更加省電。

03 從常見APP的夜間模式梳理常見的設計方法

1. 頁面處於底層,頂部加一層黑色透明的蒙版,達到讓整個頁面變暗的效果

這種方法實現起來比較簡單,但是在體驗方面談不上優秀,黑色蒙版黑色的字體,這個頁面的層級一定程度上變得模糊許多,也有可能是今日頭條出於內容信息量過大的原因。很多人會想到那我把它變成黑底白字就完了唄。

如果讓你選擇,會覺得哪個更易用呢?

你是不是可能會選擇右邊?然而在用戶實際使用中,倘若夜間長時間觀看,左圖的組合會比右邊更舒服,夜間的對比度不需要太過明顯,需要柔和一些。因此可以看出夜間模式的設計需要均衡各方面來進行考慮而不是簡單的黑底白字就可以。

2. 改變背景色色值和文字色值

微信讀書

常見的還有:夸克瀏覽器、網易新聞、網易雲音樂、糗事百科、QQ等等。

這種方式一般是把頁面中最大的光源調整成為和環境接近的顏色,通過降低亮度差值的方式降低刺眼度。

這種設計方式成本更大,需要對顏色、字體、icon都進行調整,單獨定義夜間模式的UI界面。開發和適配的難度更大,實現成本高,並且後期迭代時都需要研發維護,對於小型的研發團隊來說負擔很重

這其中做的最為細緻的就是騰訊QQ除了背景色、文字顏色、圖片之外對底部的標籤欄也有夜間化設計,做了更加細節的場景化設計。

注意:簡潔模式下暫無黑暗模式場景化設計的改變

04 需要注意的設計細節

1. 文字顏色

在深色界面下,文字顏色儘量不要使用純白。對於黑底白字的形式,白色文字更加容易吸睛,視覺刺激更加強烈,但強烈的同時會帶來視覺疲勞,造成不適的閱讀體驗,甚至極端情況下的對比會使白色產生眩光,不利於文字的識別。

2. 段落間距行高

大多數研究表明,在可讀性方面深色界面相比淺色界面略差,所以適當的增加文字的段落間距,行高等,是在深色界面下增強文字可讀性的重要途徑。

3. 文字字體

在深色界面下,無襯線字體相比襯線字體可讀性更強,但是襯線字體相比無襯線字體在深色界面下更顯優雅,前提是字體需要放大,留足空白。

4. icon變化

仔細地觀察圖標,做出藝術性的反轉,例如QQ這方面就做的不錯,而不是只改變顏色,在深色背景下,同樣的icon的形狀感與體積感可能會發生變化。推薦的處理方式如下:

5. 色彩-色彩傾向與色彩感知

色彩傾向:在深色背景中加入有彩色點綴,可以是品牌色或者其他顏色,這會使設計顯得更加優雅、高級。

色彩感知:從色彩心理學上來說黑色會傳遞出高端、正式、名望、權力的感覺,這也是為什麼許多大品牌會圍繞黑色來做視覺設計,並且使用黑白來做主要的配色方案。

6. 黑色-沒那麼簡單

  • 不要使用 100% 黑色
  • 使用不同層級的黑色和陰影來體現層次感
  • 在黑暗模式下更換原先的顏色
  • 創建一個新的,黑暗模式下的調色板
  • 少量使用顏色避免花裡胡哨
  • 確保有足夠的對比度

自然界中沒有百分百的黑色,我們日常生活中看到黑色其實是深灰色,如果設計中使用了純黑色,會顯得不自然。因為純黑色可以壓倒一切,蓋過一切其他元素。

7. 視覺層次

在深色界面下面更應該注重視覺層次,每個版塊之間的對比要清晰明了,層次分明,否則用戶會很容易在布局間迷失,造成不好的體驗。

05 總結

設計黑暗模式下的界面時要注意把握好度,彌補深色界面的缺點,揚長避短,當然,在具體設計的時候同樣需要考慮你的產品是否需要夜間模式,需要到什麼程度?使用場景是否值得去添加夜間模式?添加後能為產品的什麼指標帶來增長?

寫在最後

我們來回顧一下整片文章框架吧:

本文參考

  • 蘋果新增審核條例,微信「黑暗模式」就快來了
  • 2019:深色模式盛行的一年
  • 黑暗模式背後,有這些你不知道的「黑歷史」
  • 暗色模式的 iOS 版微信終於要來了,但暗色模式不是「換個黑色界面」這麼簡單
  • QQ極簡與夜間模式設計

 

作者:米六,微信號:Evymmmm

本文由 @米六 原創發布於人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基於CC0協議

相關焦點

  • 這是Facebook App黑暗模式的外觀
    黑暗模式進入Facebook應用程式,但不會變黑如您所見,Facebook選擇了深灰色的深色主題,而不是黑色主題。考慮到Facebook Messenger和Instagram提供了深黑色主題的事實,這非常有趣。
  • 黑暗模式真的有利於護眼麼?
    前不久,微信剛剛升級了夜間操作模式:黑暗模式。很多小夥伴都紛紛嘗試一番,表示微信能夠晚上使用黑暗模式實在是眾望之舉。其實黑暗模式,或者又被稱之為夜間模式或深色模式,早有由來,繼IOS黑暗模式上線後,各大知名閱讀軟體就不用說了,比如掌閱,QQ閱讀,長佩閱讀等,QQ, 百度等APP也配備了黑暗模式。作為一種高對比度,或者反色模式的顯示模式,與傳統的白底黑字相比,這種黑底白字的模式通常被認為可以緩解眼疲勞,更易於閱讀。
  • 護眼模式、黑暗模式真的能保護視力嗎?別再拿眼睛做實驗
    為了保護自己的眼睛大家想了很多辦法,最常用的應該就是各個作業系統自帶的「護眼模式」和「黑暗模式」了。那麼「護眼模式」和「黑夜模式」真的對我們的眼睛有幫助嗎?護眼模式也叫「濾藍光模式」,顧名思義就是減少屏幕發出的藍光。
  • Facebook在黑暗模式下展示了更簡單的Messenger重新設計
    流行消息應用程式Facebook Messenger的重新設計版本於5月在F8開發者大會上首次宣布。Messenger從未對RAM或電池友好,這已不是什麼秘密。這是許多人開始使用第三方包裝程序和其他替代方法的更大原因之一。Facebook向我們保證,他們將解決問題,並最終實現了交付。Messenger的重新設計現已推出。
  • 手機黑暗模式與日間模式耗電對比:既在意料之中,又在意料之外
    曾經有一段時間,智慧型手機上的黑暗模式功能備受大家關注,手機廠商也是紛紛適配在自家手機上。而關於黑暗模式的好處,大家共同認可的無非兩點:一是在黑暗環境中使用手機的時候對眼睛更友好,二是能夠更省電,從而延長手機續航時間。對於第一種,想必大家已經有了直觀的感受。
  • 微軟宣布在OneDrive網頁添加黑暗模式
    12月10日外媒 onMSFT 報導,今年 7 月,微軟宣布將在 OneDrive Web 網頁上添加一個黑暗模式,但尚不清楚該功能何時向用戶開放。本周,微軟通過Microsoft 365 管理中心宣布,將於2021年1月上旬推出單一鉚釘網 OneDrive Web 黑暗模式。獲悉,微軟去年開始在其Android版OneDrive中測試黑暗模式,並在2020年2月廣泛推出。該公司現在計劃在下個月向所有網絡用戶發布該功能,包括個人和商業帳戶。
  • 谷歌地球終於迎來專屬黑暗模式
    過去幾個月,作為 Android 10+ 行動作業系統的一個基本組成部分,許多 Android 應用程式都已經引入了對黑暗模式的支持。最新消息是,谷歌地球(Google Earth)也終於迎來了專屬的黑暗模式。
  • 實用帖|Windows 10中設置「黑暗模式」的方法
    在Windows10中,你也可以打開「黑暗模式」。幾年前,MacOS在Mojave中採用了暗模式,允許Mac用戶在應用程式中應用「暗黑」主題。Android 10去年設置了一個全系統的黑暗模式,使得在最新版本的Google行動作業系統中設置「暗黑」主題很容易。
  • 谷歌搜索網頁版正在測試黑暗模式!
    [PConline資訊]12月14日消息 據報導,谷歌正在為其桌面網頁搜索網站測試黑暗模式,此前谷歌已在其移動應用中引入黑暗模式的用戶界面。  谷歌已經在其Gmail和搜索應用中加入了遲來的對黑暗模式的支持,看起來桌面網頁的黑暗模式也可能在路上了。
  • 谷歌搜索網頁版正測試黑暗模式
    IT之家 12 月 14 日消息 據報導,谷歌正在為其桌面網頁搜索網站測試黑暗模式,此前谷歌已在其移動應用中引入黑暗模式的用戶界面。谷歌已經在其 Gmail 和搜索應用中加入了遲來的對黑暗模式的支持,看起來桌面網頁的黑暗模式也可能在路上了。
  • 微軟OneDrive 網頁版即將加入黑暗模式
    IT之家12月10日消息 外媒 onMSFT 報導,今年 7 月,微軟宣布將在 OneDrive Web 網頁中加入黑暗模式,但並不清楚該功能具體何時能提供給用戶。本周,微軟通過 Microsoft 365 管理中心宣布,將於 2021 年 1 月初開始推出 OneDrive Web 黑暗模式。IT之家獲悉,微軟從去年開始在其 Android 版 OneDrive 中測試黑暗模式,並在 2020 年 2 月使其普遍可用。該公司現在計劃在下個月向所有網頁用戶(包括個人和商業帳戶)發布這一功能。
  • 微軟OneDrive網頁版即將加入黑暗模式
    來源:IT之家外媒 onMSFT 報導,今年 7 月,微軟宣布將在 OneDrive Web 網頁中加入黑暗模式,但並不清楚該功能具體何時能提供給用戶。本周,微軟通過 Microsoft 365 管理中心宣布,將於 2021 年 1 月初開始推出 OneDrive Web 黑暗模式。IT之家獲悉,微軟從去年開始在其 Android 版 OneDrive 中測試黑暗模式,並在 2020 年 2 月使其普遍可用。該公司現在計劃在下個月向所有網頁用戶(包括個人和商業帳戶)發布這一功能。
  • 谷歌:黑暗模式已開放,所有安卓用戶可用
    2月18日消息,據phoneArena報導,谷歌方面於今日表示,谷歌應用程式Google App Beta版中的黑暗模式將全面開放,所有安卓用戶均可使用。此前,該模式僅有谷歌旗下運行Android 10系統的Pixel機型可以使用。
  • 教你巧用UI設計中的暗黑模式——Dark Mode
    編輯導語:我們每天都會看一寫APP,有時候你會覺得一些軟體界面的白色很刺眼,尤其是晚上的時候;這就是為什麼越來越多的設計師開始注重創作兩種主題模式——明亮和黑暗;本文作者教你如何用UI設計中的暗黑模式。黑暗模式有一些我們應當遵守的特定規範,使其對用戶使用來說會更加合理。
  • 黑暗模式馬上就來,安卓蘋果全都有
    至於第二個功能嘛,那當然是護眼又省電,熬夜修仙黨專用的「黑暗模式」。其實黑暗模式,早有小夥伴享受到了。上一年12月的時候,安卓版微信對黑暗模式進行灰度測試,挑選一小部分幸運用戶開放該功能。現在好消息來了,經過幾百萬果粉的艾特和挖苦後,昨晚微信官宣:黑暗模式功能已完成開發,有望在下一個新版本中上線。赤裸裸的明示,下一次的微信更新,就是黑暗模式上線之時。iOS的小夥伴再不用呆呆地在一旁光羨慕了。
  • 使用MIUI11在小米手機上掌握黑暗模式
    小米公司還考慮了我們的眼睛,因為在夜間,黑暗模式的實用性通過向我們的眼睛發出更少的藍光而繼續增長。我們也可以在EMUI 10上激活它並在華為手機上配置暗模式,獲得類似的結果。在MIUI 11中激活黑暗模式的步驟要進行暗模式的配置,我們必須輸入小米手機的設置,然後在頂部查看是否有可用的最新MIUI 11版本,我們可以按照以下步驟激活暗模式。確認後,我們點擊「屏幕」部分,然後點擊「暗模式」。它將帶我們到一個新頁面,在該頁面中,我們只需單擊按鈕即可激活它,它將自動應用於整個系統和兼容的應用程式。
  • 微信黑暗模式,iOS版不更新也能用?
    最近這些日子,機哥發現微信團隊很拼,黑暗模式、朋友圈評論表情包、掃一掃識物……一大波新功能上線。只是那個,備受期待的黑暗模式,目前還停留在安卓內測版。機哥隔著屏幕,都能感覺到 iOS 用戶的失落。明明,微信黑暗模式的第一次露臉,是在6月份的蘋果發布會上。(截圖來自2019年6月蘋果WWDC)結果大半年過去,毛線都沒有。它隔壁的兄弟,像 QQ、郵箱、微信閱讀這些,早就適配了。。微信團隊,是不想要年末加雞腿嗎?
  • 為什麼說並非所有人都適合使用黑暗模式?
    黑暗模式可能是現代用戶界面中最受歡迎的功能之一。從應用到作業系統,從蘋果到谷歌,從智慧型手機到筆記本電腦,我們今天使用的許多產品都在用戶界面中集成了某種類型的黑暗模式。但你知道黑暗模式並非適用於所有人嗎?
  • Google正測試瀏覽器黑暗模式下呈現搜索結果
    谷歌搜索的用戶可能很快就會看到它的新面貌,這家搜索巨頭終於測試出在其搜索結果中加入一個黑暗模式,這個模式有可能與Mac或iPhone的界面相匹配。自從在macOS Mojave和iOS 13中引入黑暗模式以來,黑暗模式一直是iPhone和Mac的賣點,開發者們迅速為他們的應用程式添加對黑暗用戶界面的支持。雖然目前仍有一些應用尚未啟用這種支持,但似乎谷歌在瀏覽器中的搜索結果未來可能會到來。谷歌的搜索結果頁面默認為白色,不過可以通過各種瀏覽器擴展來改變,以實現黑暗模式的兼容。
  • 升級安卓 11 Beta,一加 8/Pro 新增一鍵切換黑暗模式
    6月14日消息 外媒9to5 Google 報導,在升級安裝 Android 11 Beta 後,一加8和一加8 Pro 手機啟用了專用的一鍵切換黑暗模式功能。在此之前,一加承諾在 OxygenOS 更新中提供專用的黑暗模式切換功能。