為什么「暗色模式」不應(yīng)采用純黑背景?這是谷歌的理由
iOS 13 轉(zhuǎn)眼已經(jīng)到了 Beta 8,Android 10 的正式版發(fā)布也近在眼前?,F(xiàn)如今在 Apple、Google 的自家應(yīng)用中稍加挖掘就不難發(fā)現(xiàn),很多應(yīng)用都趕在正式版系統(tǒng)更新發(fā)布之前適配了暗色主題或暗色主題,它們的具體實(shí)現(xiàn)效果略有差異:有像 Twitter 這樣采用深藍(lán)背景的,也有像 Google 在自家應(yīng)用中廣泛采用的深灰,一些應(yīng)用甚至還內(nèi)置了專門針對 OLED 設(shè)備的純黑主題……
作為系統(tǒng)級功能從 macOS、Windows 向 iOS、Android 全面推進(jìn)的暗色主題,似乎迎來了一個(gè)屬于自己的「元年」。
暗色主題的必要性
不管自身擁有多么強(qiáng)大的主題引擎,是否擁有暗色主題已經(jīng)成為了很多人評價(jià)一款應(yīng)用外觀設(shè)計(jì)時(shí)的「必考題」。
為什么暗色主題是必要的?我們可以從兩個(gè)方面來回答這個(gè)問題。
首先自然是出于健康角度的考量。幾乎所有的智能手機(jī)都配備了自動調(diào)節(jié)屏幕亮度的功能,這個(gè)功能存在的意義,即是當(dāng)我們所處環(huán)境的光線亮度發(fā)生變化時(shí),讓手機(jī)屏幕處于一個(gè)合理的顯示亮度上——既不會因?yàn)檫^暗導(dǎo)致屏幕內(nèi)容難以辨識,也不會因?yàn)檫^亮讓人感到刺眼。
環(huán)境光與屏幕亮度的明暗差距在夜間會被放大 | 圖:Pixabay
如果我們身處黑夜,這種環(huán)境與手機(jī)屏幕亮度的明暗差距被進(jìn)一步放大,亮度對比帶來視覺刺激也更加明顯。一個(gè)略為極端但卻十分常見的例子是,如果我們在黑暗環(huán)境中長時(shí)間注視高亮光源,這個(gè)高亮光源熄滅的瞬間,原本憑肉眼能夠勉強(qiáng)看清輪廓的周遭環(huán)境,此時(shí)對我們來說會變得一片漆黑(過一段時(shí)間會恢復(fù),這與 視桿細(xì)胞 有關(guān))。
因此盡可能降低屏幕亮度,縮小屏幕顯示內(nèi)容與環(huán)境光強(qiáng)度的差距,是保證我們夜間舒適玩機(jī)的重要前提,OLED 屏幕廣泛應(yīng)用后,其顯示黑色不發(fā)光的特性也讓進(jìn)一步降低屏幕亮度成為了可能。
不過對于 OLED 屏幕而言,使用暗色主題對設(shè)備續(xù)航帶來的積極影響也是人們熱衷于暗色主題的原因之一。
在去年年底舉行的 2018 Android 開發(fā)者峰會上,Google 首次就 OLED、暗色主題和手機(jī)續(xù)航三者之間的關(guān)系公布了自己的研究結(jié)果:暗色主題能夠使 OLED 設(shè)備在同等亮度下的電量消耗減少 63%;在以最高亮度展示單色靜態(tài)圖片的情況下,耗電由少到多依次為黑色、紅色、綠色、藍(lán)色和白色。
因此我們不難預(yù)測,就和今年各大廠商都或多或少在自家生態(tài)體驗(yàn)內(nèi)搭建起了形態(tài)各異的「數(shù)字健康」功能一樣,暗色主題在未來兩年時(shí)間里也會成為移動操作系統(tǒng)平臺上的一大潮流。
「純黑」只是可選項(xiàng)
不過就在一部分用戶翹首以盼期待「暗色主題時(shí)代」全面降臨的同時(shí),也有另一種聲音認(rèn)為暗色主題的實(shí)際效果并不怎么「護(hù)眼」。
問題出在 OLED 和純黑主題上。
如果我們以上方 Google 公布的研究結(jié)果為基礎(chǔ),自然就會得出「理想狀態(tài)下在 OLED 設(shè)備上使用純黑主題是最省電的」這一結(jié)論。這也是為什么不少應(yīng)用會將純黑(true black)主題作為額外的夜間模式選項(xiàng)提供給用戶的原因。
但這些看上去十分「良心」的 OLED 主題,從設(shè)計(jì)規(guī)范和實(shí)際觀感的角度出發(fā)卻不是都算不上完美。
以 Google 為例,Google 在最新的 Material Design 設(shè)計(jì)指南中將暗色主題描述為「默認(rèn)主題或亮色主題的必要補(bǔ)充」,這種必要性有一個(gè)不容忽視的條件——除了能夠盡可能降低屏幕亮度,優(yōu)秀的暗色主題設(shè)計(jì)還應(yīng)滿足最低色彩對比度要求。
所以 Google 不推薦盲目為暗色主題搭配純黑背景的第一個(gè)原因,其實(shí)是出于無障礙設(shè)計(jì)角度的考量。
這種色彩對比度要求在 Android 10 中其實(shí)已有體現(xiàn):在最初的 Beta 1 測試版本中,我們能夠在 Pixel Launcher 中看到不少純黑色調(diào)的暗色 UI,包括長按桌面的彈出菜單、應(yīng)用快捷方式列表等等;而同樣的 UI 到了后來的 Beta 4 中已經(jīng)換成了灰色,一種基礎(chǔ)色為 #121212、在不同界面中略有明暗差異的灰。
使用灰色而不是純黑作為暗色主題主色調(diào)的主要原因就是對比度,具體而言,Google 在 Material Design 暗色主題的設(shè)計(jì)規(guī)范中規(guī)定了這樣幾條原則:
- 對比度:暗色界面與主體純白色文本的對比度級別至少為 15.8:1
- 層級:在具有高度的界面元素上,使用更為明亮的色彩來體現(xiàn)層次感
- 去飽和:對原色進(jìn)行去飽和處理,保證它們在所有界面層次中都滿足《Web 內(nèi)容可訪問性指南》所規(guī)定的 4.5:1 標(biāo)準(zhǔn)
- 有限色彩:主要界面應(yīng)采用暗色設(shè)計(jì),少部分區(qū)域使用適當(dāng)強(qiáng)調(diào)色(亮色、去飽和色或明亮的飽和色)
和純粹的黑底白字相比,灰底能夠在保證足夠文本可讀性的前提下營造出更為舒適的對比度體驗(yàn),真正做到減輕用戶視覺疲勞的效果。
不過 Google 建議采用深灰而不是黑色作為暗色主題的主色調(diào),另一層原因來自 Material Design 本身。
Material Design 誕生以來經(jīng)歷過數(shù)次更新和變革,最初 Google 在這個(gè)設(shè)計(jì)語言上所堅(jiān)持的東西到頭來有自我否定、朝令夕改的,也有自始自終都沒有發(fā)生過變化的——陰影和層級正屬于后者。
光影的變化往往也伴隨著明暗的更替,但在純黑的背景之上,所有投影都將失去意義。換句話說,純黑背景在解決夜間使用太亮這一問題的同時(shí),也抹除了 Material Design 的基本特質(zhì)。
但深灰色卻能很好地讓不同界面元素在暗色主題下保留清晰而直觀的層次關(guān)系,讓 Material Design 的核心特質(zhì)不被破壞。在這里 Google 引入了「表面光源」這個(gè)理念。
舉個(gè)例子:當(dāng)一個(gè)深灰色組件的 Z 軸高度較低(距離用戶較遠(yuǎn))時(shí),表面光相對較暗,而當(dāng)這個(gè)組件的 Z 軸高度向上抬升(距離用戶越來越近),投射在這個(gè)組件上的光線強(qiáng)度增加,組件表面的亮度越來越高,深灰變成了淺灰。
亮色主題使用陰影來體現(xiàn)層次,暗色主題用的則是高光
小結(jié)
縱觀 iOS 和 Android 的官方暗色主題設(shè)計(jì)規(guī)范,我們不難發(fā)現(xiàn)二者具有許多相似點(diǎn):滿足最低 4.5:1 的色彩對比度、注重對無障礙模式的全面適配、與淺色模式觀感相近……對 OLED 設(shè)備而言,純黑背景固然能夠達(dá)到最佳的省電效果,但無障礙設(shè)計(jì)自始自終都是移動操作系統(tǒng)交互設(shè)計(jì)中至關(guān)重要的一環(huán),在適配暗色主題的過程中,因噎廢食直接舍棄 Material Design 核心特色的做法也并不可取。
所以適配暗色主題并不是「換個(gè)純黑色的背景」那么簡單,我們也期待更多國產(chǎn)應(yīng)用能夠盡快根據(jù)平臺設(shè)計(jì)規(guī)范適配出更加舒適的暗色主題解決方案。