暗色模式(Dark Mode)的興起是一個逐漸發(fā)展的過程,它涉及到技術(shù)進(jìn)步、用戶體驗優(yōu)化以及設(shè)計趨勢的變化。
隨著iOS 13在2019年的發(fā)布,暗色模式開始成為用戶關(guān)注的焦點;在用戶體驗方面,設(shè)計者們考慮到了環(huán)境光線與屏幕亮度的匹配問題,暗色模式可以有效減少視覺疲勞;在實際使用中,用戶發(fā)現(xiàn)暗色模式在光線較暗的環(huán)境中更為舒適,這也促使了暗色模式的普及和發(fā)展。
暗色模式在UI設(shè)計中的重要性體現(xiàn)在改善視覺舒適度、節(jié)省電量以及提供個性化選擇上,其普及程度隨著用戶需求和技術(shù)發(fā)展不斷提升。
暗色模式是一種低光用戶界面(UI)設(shè)計,也稱為深色模式,是一種用戶界面設(shè)計選項,它使用較深的顏色方案和背景,通常為黑色或深灰色,以減少屏幕亮度并提供更舒適的視覺體驗。
iOS 13 亮色模式(左)與暗色模式(右)的對比
設(shè)計師需要為暗色模式創(chuàng)建一個新的調(diào)色板,這通常意味著降低顏色的飽和度,以適應(yīng)深色背景。同時,避免使用純黑作為主色調(diào)背景,而是選擇接近純黑的深灰色,以確保閱讀體驗的舒適性和可讀性。
亮色/暗色模式下主色需要進(jìn)行調(diào)整
暗色背景與文本顏色之間的對比度應(yīng)該控制在WCAG2.0AA級標(biāo)準(zhǔn)以上,以保證內(nèi)容的清晰度和易讀性。對于彩色元素,也需要適當(dāng)調(diào)整飽和度,確保整體色彩之間的對比度符合無障礙標(biāo)準(zhǔn)。
達(dá)到/未達(dá)到WCAG2.0AA標(biāo)準(zhǔn)的視覺效果對比
在暗色模式下,設(shè)計師需要特別注意視覺元素的區(qū)分,通過足夠的對比度來保證文字和圖形的清晰可見。這不僅僅是簡單的顏色反轉(zhuǎn),而是一種“弱光”主題的設(shè)計思考,旨在優(yōu)化用戶在低光環(huán)境下的視覺體驗。
在早期的計算機系統(tǒng)中,如DOS和Linux,終端通常使用暗色模式,這是因為早期的CRT顯示器存在閃爍問題,暗色背景能夠減少視覺疲勞,并提供較高的對比度。
隨著個人電腦的普及,圖形用戶界面(GUI)逐漸成為標(biāo)準(zhǔn),此時大多數(shù)操作系統(tǒng)和應(yīng)用程序采用了亮色模式,以模仿紙張的顏色并減少CRT顯示器的眩光。
智能手機和平板電腦的興起帶來了OLED等先進(jìn)顯示技術(shù),這些設(shè)備的小屏幕和高分辨率使得暗色模式再次變得實用和流行,特別是在節(jié)省電量和減少眼睛疲勞方面。
近年來,各大操作系統(tǒng)開始正式支持暗色模式。例如,Windows 10在2018年的更新中引入了暗色應(yīng)用模式,macOS和iOS隨后也推出了可以根據(jù)時間或環(huán)境自動切換的暗色模式。
暗色模式在當(dāng)前設(shè)計趨勢中占據(jù)重要地位,以其減輕眼睛疲勞、節(jié)省電量和聚焦內(nèi)容的優(yōu)勢受到青睞。它不僅適應(yīng)低光環(huán)境,還提供美學(xué)上的新探索,響應(yīng)了用戶對舒適性和個性化選擇的需求。隨著技術(shù)發(fā)展和設(shè)計創(chuàng)新,暗色模式已成為現(xiàn)代界面設(shè)計不可或缺的一部分。許多頂級品牌和應(yīng)用程序,如WhatsApp、Instagram、Google、Facebook等,都已經(jīng)引入暗色模式設(shè)計,這表明暗色模式已經(jīng)成為了一種廣泛接受的設(shè)計趨勢。
從左往右依次為:WhatsApp、Instagram、Google、Facebook
在相同的對比度條件下,淺背景上的黑字比深背景上的淺色字閱讀效果更好。這表明,優(yōu)化對比度是提高閱讀舒適度的關(guān)鍵因素之一。
一項針對用戶對暗色模式的使用體驗的調(diào)查顯示,與默認(rèn)的白底模式相比,用戶在使用暗色模式時報告了更低的視覺疲勞和更高的滿意度。斯?。⊿loan)的一項研究在1977年就報告說,如果更多的光線通過混濁的透鏡到達(dá)眼睛,則出現(xiàn)畸變的可能性更大,即暗模式對視力障礙者更好。
對于長時間從事屏幕工作的人來說,暗色模式對眼睛更加友好
暗色模式能減少屏幕發(fā)出的光線,這有利于減少眼睛疲勞和不適,特別是在低光環(huán)境下,人眼的虹膜會打開以接受更多光線,而暗色模式提高了減少的光源,減少了對眼睛的刺激。
人們通過長期研究發(fā)現(xiàn)短波可見光,即紫光和藍(lán)光對眼底視網(wǎng)膜有相當(dāng)程度的破壞作用, 而人們通常把這種可見光波長中高能量波段(400- 470nm)對視網(wǎng)膜的損壞現(xiàn)象稱為“藍(lán)光傷害現(xiàn)象”。 還有研究關(guān)注了暗色模式對藍(lán)光輻射的影響。由于暗色模式降低了屏幕的整體亮度,因此也減少了藍(lán)光的輻射。
在OLED屏幕上,每個像素都是獨立發(fā)光的,當(dāng)顯示黑色時,相關(guān)的像素點會關(guān)閉,從而不消耗能量。這意味著,顯示大面積黑色內(nèi)容的暗色模式能夠顯著減少屏幕的能量消耗。
以 Google 測試數(shù)據(jù)為例,OLED 屏幕的 Pixel 手機在時間段內(nèi)啟用深色模式并在使用地圖導(dǎo)航時保持屏幕最大亮度,手機的電量消耗下降了 63%。
對于晚上喜歡在床上閱讀或工作的用戶來說,暗色背景有助于降低屏幕亮度,減少對褪黑素分泌的干擾,也有助于減少藍(lán)光對睡眠周期的影響,從而幫助用戶更快入睡并提高睡眠質(zhì)量。
眩光是明亮的屏幕和低光環(huán)境之間惱人的對比現(xiàn)象,對眼睛具有一定的影響并造成眼部不適。暗色模式通過使用深色背景和亮色文字,整體降低了屏幕的亮度,這樣在光線較亮的環(huán)境中,屏幕的亮光與周圍暗環(huán)境的對比度降低,從而減少了屏幕反射光線對眼睛的刺激,降低不適。
暗色模式提高了一種無干擾的工作環(huán)境,有助于他們專注于手頭的任務(wù),特別是在進(jìn)行寫作、編碼或其他需要集中注意力的活動時,暗色模式能夠減少視覺干擾。
暗色模式為視覺設(shè)計提供了更大的對比度,使得界面元素更為突出。這種高對比度不僅有利于內(nèi)容的戰(zhàn)士,也增強了用戶的視覺聚焦,讓用戶更容易沉浸于應(yīng)用或游戲的環(huán)境中。特別是在觀看視頻或進(jìn)行游戲時,暗色背景能夠使色彩更為鮮明,提升用戶的視覺體驗。
編碼軟件一般默認(rèn)暗色界面,有利于專注工作
暗色模式為視覺設(shè)計提供了更大的對比度,使得界面元素更為突出。這種高對比度不僅有利于內(nèi)容的戰(zhàn)士,也增強了用戶的視覺聚焦,讓用戶更容易沉浸于應(yīng)用或游戲的環(huán)境中。特別是在觀看視頻或進(jìn)行游戲時,暗色背景能夠使色彩更為鮮明,提升用戶的視覺體驗。
作者:阿琳01
來源:站酷