為何深色模式看起來不自然?

2021-12-14    ui設(shè)計分享達人

在過去的幾年中,深色模式一直是用戶最期待的一個功能。你可以自由切換你喜歡的模式來適應(yīng)當前的場景,iOS和Android也都在2019年布局了系統(tǒng)級的深色模式,深色模式可獲得出色的視覺體驗,尤其是在弱光環(huán)境中……有助于你專注地開展工作,因為內(nèi)容會較為顯眼,而顏色加深的控制項和窗口則會隱入背景之中。但真是這樣嗎,或者只是一種實際上弊大于利的操作? 


文章內(nèi)容:


1、什么是深色模式

2、從可用性角度看深色模式

3、為什么深色模式看起來不自然

4、從設(shè)計角度看深色模式

5、結(jié)論


什么是深色模式?


雖然各種軟件界面的色調(diào)和顏色會有所不同,但是對深色模式的處理方式都是在深色背景上顯示明亮文本和界面元素的配色方案。相比之下,在淺色背景上顯示深色文本和界面元素的配色方案,在這里我們稱之為淺色模式。


而事實上,深色模式比淺色模式早了幾十年。在其最初的階段,深色模式并不是一種有意的解決方案,而僅僅是當時計算顯示設(shè)備是陰極射線管(CRT),且只能顯示單色的顯示,屏幕看上去就是黑的,黑底白字或者黑底綠字就是計算機行業(yè)的早期狀態(tài)。直到1980年代彩色顯示器發(fā)明后,微軟視窗系統(tǒng)上線之后,黑底顯示才退出主流。蘋果在1984年推出“麥金塔”個人電腦,第一次發(fā)布采用圖形用戶界面,由此開啟了計算機屏幕白底顯示的主流之路。


           

          

 ibm 5151單色監(jiān)視器


淺色模式出現(xiàn)的確切時間很難確定,但可以追溯到施樂Parc圖形用戶界面,它也極大地影響了早期蘋果的“麥金塔”和其他操作系統(tǒng),該界面使用了以白色背景為主的深色文本和界面元素。它與顯示技術(shù)的進步和現(xiàn)代圖形用戶界面的出現(xiàn)密切相關(guān)。這種能夠顯示色彩的且更先進的RGB CRT顯示器拉開了淺色模式的序幕。


                      

1973年的施樂Alto是最早使用輕型接口模式的計算機之一


從可用性角度看深色模式


深色模式的實用性有多少,每個人看法也不一樣。盡管深色模式的界面可能不像淺色模式那樣觀感清晰,但深色模式的界面卻具有一定的魅力,可以讓你聯(lián)想到新穎,高端,精致,神秘,力量,奢華這些詞。但是,黑色也是一種會引起人們強烈的情感一個顏色,并且在過度使用時很容易使人無法承受。


2019年9月,蘋果公司上線深色模式(Dark Model)時,在官網(wǎng)上如是宣傳道。從iPhone到Mac,當庫克決定在蘋果公司幾乎所有產(chǎn)品上線深色模式、甚至要求所有在AppStore上架的應(yīng)用都必須兼容深色模式時,安卓陣營的谷歌、華為、三星等頭部公司也紛紛在其最新手機中推出了深色模式,相應(yīng)地從WhatsApp到微信等全球主流的應(yīng)用也都推出了深色模式。



            


但是,想要獲得良好的深色模式是相對比較難的。一方面,深色模式迫使放大瞳孔來捕獲必要的視覺信息,從而導(dǎo)致整體清晰度的降低。而同時界面中高亮的部分又迫使我們的瞳孔縮小去適應(yīng)亮度,以便提高清晰度。這也就能理解為什么白色背景上的黑色文本在你的眼睛中通常會顯得更清晰的原因。


             

擴大的瞳孔讓光線更多,但感覺到的銳度受到損害



行業(yè)對深色模式追逐的群羊效應(yīng),也進一步加劇、放大了一個見解:深色模式對眼睛更友好更健康!


但是,事實并非如此。對于一些有散光的人來說,在某種程度上深色模式對他們的眼睛來說更糟糕,深色模式比淺色模式更友好更健康的科學(xué)仍有待討論。斯坦?!ぐ轄査寡劭蒲芯克难劭茖<覍Υ吮硎荆骸拌b于文獻中的數(shù)據(jù),我認為深色模式對眼睛沒有任何的友好和健康?!?nbsp;這種深色模式對眼睛疲勞和潛在的眼睛健康的影響時,使用時間可能比設(shè)備的亮度或亮度更重要。


根據(jù)美國驗光協(xié)會的說法稱,大多數(shù)人的眼睛在某種程度上都患有散光,但通常不會引起注意。據(jù)美國眼科學(xué)院統(tǒng)計,每三個美國人中就一個存在散光的情況,1.5億美國人需要佩戴眼鏡來矯正視力;香港理工大學(xué)針對2700多人的臨床檢測發(fā)現(xiàn),在21歲的30歲的香港人中,近40%以上患有100度以上散光。


一起看下面的說明性圖像。即使你有完美的視覺,你也很可能在黑色背景上看到白色文字周圍的光暈。



            

淺色模式與深色模式


如果增加文字并降低文字的大小,這種效果可能會更強:


             


右邊的圖像你應(yīng)該會看到更多的光暈,如果你有散光癥狀,深色模式可能會讓你看屏幕更費勁。在深色模式下,虹膜打開以接收更多的光,并且瞳孔的變形在眼睛上產(chǎn)生了更加模糊的焦點,因此,當你在深色屏幕上看到淺色文本時,其邊緣似乎滲入黑色背景,也就是所謂的“光暈效果”。雖然深色模式可能更適合夜晚等弱光環(huán)境下使用,但不一定能幫助更好地閱讀,對于散光患者來說,可能還會加劇視疲勞。


當然,從實用性上講,深色模式也有它的好處,深色模式利用OLED屏幕在純黑的背景下不發(fā)光的特性,確實能有效的省電,讓你的電子設(shè)備續(xù)航上提升很大,這也是很多人一直在追求深色模式的一個重要原因,只要手機續(xù)航強比啥都重要!這也可能是蘋果公司決定在幾乎所有產(chǎn)品上線深色模式的一個原因。


另外深色模式更有利于給用戶營造一種沉浸體驗,對于視覺娛樂應(yīng)用尤為如此。當你想突出顯示特定類型的內(nèi)容時,深色模式會特別有用。豆瓣、數(shù)字尾巴、網(wǎng)易云音樂是我常用的幾個軟件,它們都已經(jīng)適配了深色模式。在這種模式下你的目光會更加注意到電影的海報、數(shù)碼產(chǎn)品和充滿活力的音樂專輯上。



             

豆瓣、數(shù)字尾巴、網(wǎng)易云音樂的深色模式


為什么深色模式看起來不自然


一是由于我們?nèi)四X的組織結(jié)構(gòu)造成的,從多年來的多項科學(xué)研究和調(diào)查得出的結(jié)論是,從物種進化來看,人類99%的時間都是在白天中活動,人腦更傾向于在淺的背景上顯示深色的圖像。所以無論白天還是黑夜,淺色的背景都可以讓你更快地專注于顯示的元素,而深色的背景則使其難以辨別文字和視覺界面元素,從而影響你的閱讀效果并最終使你的眼睛疲勞。 其實從世界各地多個洞穴中發(fā)現(xiàn)的史前壁畫也能說明為什么我們傾向于喜歡淺色模式。



            

追逐獵物的獅子,法國Chauvet Cave,約公元前30,000-28,000


德國帕紹大學(xué)曾經(jīng)做過一次測試。在該研究要求參與者閱讀屏幕上的正極性(白色背景上的黑色文本)或負極性(黑色背景上的白色文本)的文本。隨后,參與測試的人員會執(zhí)行基本的校對任務(wù),例如查找拼寫或語法錯誤。研究人員還測量了每種模式下參與者的閱讀速度。結(jié)果是所有參與者在正極性條件下的表現(xiàn)都會更好,他們檢查出更多的錯誤以及閱讀的速度更快。


                       

可讀性差異


另一個學(xué)習(xí)發(fā)現(xiàn)正極性對于在顯示器上讀取小文本特別有利。人腦具有更快的可讀性,更喜歡在光線背景下顯示的深色文本和物體。


二是由于含有大量藍光的光源會使我們眼睛不舒服,當我們談?wù)撈聊粚ρ劬Φ臐撛谄茐男杂绊憰r,我們通常是在談?wù)摗八{光”,這是由短、高能量波長構(gòu)成的光譜的一部分。研究發(fā)現(xiàn)藍光可能是導(dǎo)致眼睛疲勞的一個因素,但指出長時間不眨眼的干眼也是導(dǎo)致眼睛疲勞的一個更嚴重的原因,當然也有是因為字體太小,以及散光這樣的原因。


當我們身處暗室或是在黃昏或夜晚時,眼睛會切換成不同的視覺模式;在弱光環(huán)境下,人眼會從對綠色敏感變成對高能量藍光敏感,這代表我們在大量的接收藍光,因此對刺眼強光的敏感度會增強。這類情形對駕駛?cè)硕圆⒉荒吧?,當他們被來車車頭燈的強光照射時,特別是使用現(xiàn)代化氙氣燈或LED頭燈的車輛,可能會暫時喪失視力。


           

平板電腦、智能手機和其他電子顯示屏,不僅改變了我們所接觸的光譜,也使我們的視覺行為發(fā)生轉(zhuǎn)變。我們必須意識到,我們現(xiàn)在用于“近距離”視物的時間比以往多得多,這通常是因為背景亮度太暗所致。


在德國光學(xué)公司蔡司官方網(wǎng)站上,對于藍光也作一分為二的評價:“好處是當外界環(huán)境變亮也就是藍光較多時,身體便釋放出血清素—它是其中一種快樂荷爾蒙以及皮質(zhì)醇—這是一種壓力荷爾蒙。這兩種荷爾蒙能讓我們保持清醒,富有活力,同時也應(yīng)用于冬季抑郁和失眠的治療中。但過多的紫外光和藍紫光可能會對肉眼造成損傷,除了可能導(dǎo)致令人難受的結(jié)膜和角膜發(fā)炎,也可能會破壞眼睛的晶狀體(例如白內(nèi)障),尤其是傷害我們的視網(wǎng)膜(黃斑病變)?!?


從設(shè)計角度看深色模式


在WWDC 2019大會上,蘋果宣布了iOS13的深色模式功能,在令人興奮之余,作為設(shè)計師和開發(fā)人員,我們應(yīng)該考慮的該如何去實現(xiàn)它。蘋果和安卓已經(jīng)發(fā)布了為應(yīng)用程序設(shè)計深色模式的設(shè)計指南。當然,沒有硬性規(guī)定要求遵循他們提供的設(shè)計指南,這些只是指導(dǎo)原則。


             

由于Material Design設(shè)計語言的原因,投影的占比是非常大的。在淺色模式下還好,但這不太適用于深色模式,因為深色背景上的黑色陰影在視覺上不容易察覺,為此安卓還提供了在深色模式下不同層級的卡片與投影上的參考。


            

根據(jù)設(shè)計文檔來看,iOS背景為純黑色,色值為#000000,Google 則更喜歡深灰色,色值為#121212。


            

通過提供的設(shè)計指南,我們可以輕易上手來設(shè)計和開發(fā)我們的軟件,但要注意的是深色模式并不是簡單的與淺色模式顏色對調(diào),必須為所有的元素進行單獨配色。


            

淺色模式下的白色不會在深色模式下轉(zhuǎn)換成純黑色


這樣也就能理解為什么很多軟件并沒有全部去適配新的深色模式,一方面使用場景決定的,另一方面就是深色模式并不是簡單地換個換個顏色就行,很多元素需要重新設(shè)計和開發(fā)。


結(jié)論:該選擇哪種模式


在去年的 WWDC 大會上,蘋果人機交互團隊的設(shè)計師曾對 macOS 的深色模式使用場景做了進一步的解釋。

他指出,只有閱讀瀏覽或是內(nèi)容創(chuàng)作型 App 才需要長期啟用深色模式,比如文字或代碼編輯。它們會借助黑底白字的高對比度特性來讓用戶視線保持集中,其它大部分軟件對于深色模式的需求反而并不強烈。


或則你可以通過使用場景去選擇,在明亮的環(huán)境中使用淺色模式,在昏暗的環(huán)境中使用深色模式。



            

但是在大多數(shù)情況下,真正幫助你避免眼睛疲勞的是不要整天盯著屏幕,而不是糾結(jié)到底用深色還是淺色模式。

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

文章來源:站酷 作者:羅小盒
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.bouu.cn

存檔