白底黑字or黑底白字,哪一種搭配的可讀性更高呢?

2018-11-21 10244 1

在人們的日常生活中,接觸最多的書本、網(wǎng)頁大部分都是白底黑字,這種方式已經(jīng)成為一種閱讀習(xí)慣。但是部分網(wǎng)站黑色背景淺色字體的搭配又讓人們覺得體驗(yàn)很好、極具吸引力。那么就會(huì)有一些疑問:我們的眼睛更喜歡白底黑字還是黑底白字呢?哪一種搭配的可讀性更高呢?

針對這個(gè)問題,可以從生理感知和心理感知兩個(gè)方面來探討

一、生理感知

從人類眼睛的生理機(jī)制來研究。人類視力是由光線進(jìn)入角膜,角膜屈光后進(jìn)入瞳孔,經(jīng)過瞳孔的調(diào)節(jié)之后進(jìn)入水晶體,然后集中在視網(wǎng)膜上再傳導(dǎo)至大腦,如此轉(zhuǎn)化為我們看到的影像。在這一過程中,有一些獨(dú)特的生理現(xiàn)象對我們的視覺造成微妙的影響。

1、側(cè)抑制

側(cè)抑制.jpg


 

(側(cè)抑制效應(yīng)圖:同樣的顏色但是左側(cè)方塊會(huì)看起來更深)

側(cè)抑制是指相鄰的感受器之間能夠互相抑制的現(xiàn)象,即在某個(gè)神經(jīng)元受到刺激而產(chǎn)生興奮時(shí),再刺激相近的神經(jīng)元,則后者所發(fā)生的興奮會(huì)對前者產(chǎn)生抑制作用。當(dāng)一個(gè)感受器受到刺激時(shí),由此產(chǎn)生的神經(jīng)沖動(dòng)將對鄰近部位的輸入信號(hào)產(chǎn)生抑制性的影響。

側(cè)抑制.jpg


 

(因?yàn)閭?cè)抑制現(xiàn)象,人們在明暗變化的邊界上,常常在亮區(qū)看到一條更亮的光帶,在暗區(qū)看到一條更暗的線條,這個(gè)更亮和更暗的區(qū)域就是馬赫帶效應(yīng))

總體來說,側(cè)抑制網(wǎng)絡(luò)在信息預(yù)處理中的主要功能有以下幾個(gè)方面:

 ① 可以突出邊緣,增加反差。

 ② 將很大的輸入變化范圍壓縮到網(wǎng)絡(luò)本身的動(dòng)態(tài)范圍之內(nèi),具有明顯的亮度適應(yīng)作用;

 ③ 可以對圖像的細(xì)微間斷處進(jìn)行擬合,具有明顯的聚類作用。

影響:在閱讀文字信息時(shí),盯住的字會(huì)最清楚,這個(gè)字周邊的其他字就會(huì)被視覺中樞弱化。側(cè)抑制也是造成人類多種視覺錯(cuò)覺的原因之一。

2、視覺適應(yīng)

視覺適應(yīng).jpg


 

(錐形細(xì)胞和桿狀感光細(xì)胞)

視覺適應(yīng)是視覺器官的感覺隨外界亮度的持續(xù)刺激而變化的過程。視網(wǎng)膜中包含錐狀細(xì)胞和桿狀感光細(xì)胞,錐狀細(xì)胞負(fù)責(zé)在光線之下使視力清晰,并且感知顏色;桿狀感光細(xì)胞讓我們能在黑暗的環(huán)境感知弱光。視覺適應(yīng)的機(jī)制就是這些細(xì)胞和神經(jīng)活動(dòng)的重新調(diào)整,可以分為暗適應(yīng)和明適應(yīng)。

 ① 暗適應(yīng):照明停止或者由明亮環(huán)境進(jìn)入黑暗環(huán)境的時(shí)候,眼睛會(huì)暫時(shí)看不見事物,這個(gè)時(shí)候桿狀感光細(xì)胞開始工作,提升對弱光的敏感度,使人類逐漸適應(yīng)黑暗環(huán)境。(桿狀感光細(xì)胞有障礙的人就是“夜盲癥”啦,并且桿狀感光細(xì)胞不能辨別顏色,所以黑暗中看什么都是一個(gè)顏色!)

 ② 明適應(yīng):照明開始或者由黑暗環(huán)境進(jìn)入明亮環(huán)境,人眼感受性下降,眼睛過渡到明視覺狀態(tài)。比如走出電影院,開始覺得陽光刺眼,但很快就能恢復(fù)正常狀態(tài)。

影響:暗適應(yīng)和明適應(yīng)是人類眼睛應(yīng)對環(huán)境光線刺激的反應(yīng)能力,但是頻繁的視覺適應(yīng)會(huì)導(dǎo)致視覺迅速疲勞。

3、視覺后像

視覺后像.jpg


 

(盯住白色區(qū)域看30秒,再看別處會(huì)看到白色區(qū)域的影像)

光刺激對視覺器官的作用停止后,細(xì)胞的興奮并不隨著刺激的終止而停止,感覺現(xiàn)象能保留一個(gè)短暫的時(shí)間,這種現(xiàn)象叫做視覺后像。比如盯著燈泡看數(shù)秒,再看別處,會(huì)看到發(fā)光燈泡的影像。

影響:強(qiáng)烈刺激會(huì)引起視覺器官興奮,產(chǎn)生視覺后像,同時(shí)會(huì)加速視覺疲勞。

根據(jù)上面的幾個(gè)視覺現(xiàn)象,可以得出這樣的結(jié)論:

 ① 因?yàn)閭?cè)抑制的視覺現(xiàn)象,不論是白底黑字還是黑底白字,人類的眼睛都可以增加反差,讓黑色字體更黑,白色字體更亮,從而清晰的識(shí)別文字。

 ② 因?yàn)橐曈X適應(yīng)的原理,我們在光線充足的時(shí)候閱讀黑底白字的信息,視覺聚焦于白色文字,黑色背景也會(huì)更暗,眼睛需要進(jìn)行暗適應(yīng),所以會(huì)加速視覺疲勞。而在夜晚則相反,眼睛已經(jīng)是暗適應(yīng)的狀態(tài),閱讀黑底白字的信息,不需要進(jìn)行視覺適應(yīng),疲勞感不會(huì)增加。所以在晚上使用深色底淺色字的夜間模式會(huì)減少刺激,使眼睛更舒服。

 ③ 閱讀黑底白字的信息時(shí),因?yàn)閭?cè)抑制會(huì)使白色字體更加炫目,黑色背景更加沉重,長時(shí)間瀏覽白色字體,會(huì)產(chǎn)生強(qiáng)烈的光刺激從而產(chǎn)生視覺后像,造成視覺疲勞。所以即便在使用黑底白字的時(shí)候,也要通過降低對比度的方式,減弱這種光刺激,從而減輕視覺的疲勞感。而閱讀白底黑字的信息時(shí),聚焦的文字為黑色,不會(huì)產(chǎn)生光刺激,視覺后像的情況基本不會(huì)出現(xiàn)。

二、心理感知

1、背景顏色屬性

背景顏色屬性.jpg


 

(圖為#000000黑色和#FFFFFF白色)

 ① 黑色:黑色可以定義為沒有任何可見光進(jìn)入視覺范圍(顯示屏是主動(dòng)發(fā)光,不發(fā)光即為黑色),黑色可以讓其他顏色變得更亮,從而凸顯出來。從色彩心理學(xué)上來看,黑色傳遞出高雅、正式、名望、權(quán)力的感覺,大面積的純黑會(huì)給人一種嚴(yán)肅和壓抑的感覺。

 ② 白色:一種包含光譜中所有顏色光的顏色,通常被認(rèn)為是“無色”的,且明度最高,無色相(顯示屏中把三原色組合在一起就發(fā)出白色光)。白色是一個(gè)中立的顏色,常常被用作頁面的背景色,大多數(shù)的印象就是干凈和簡潔,大面積的白色會(huì)有一種舒張、放松的感覺。

2、搭配效果

搭配效果.jpg


 

(單行字體效果對比)

 ① 白底黑字:傳統(tǒng)的白底黑字整體效果比較干凈清爽,閱讀時(shí)焦點(diǎn)不會(huì)第一時(shí)間落在文字上,由于周圍白色區(qū)域反光,讀者的注意力會(huì)不時(shí)發(fā)生游離。但是因?yàn)閭?cè)抑制的現(xiàn)象,聚焦不反射光的黑色字體時(shí),視覺刺激并不強(qiáng)烈,所以長時(shí)間閱讀造成的視覺疲勞感較弱。

 ② 黑底白字:對于黑底白字的形式,側(cè)抑制的現(xiàn)象會(huì)使聚焦的白色字體變得更加炫目,視覺刺激強(qiáng)烈,能夠迅速抓取讀者的注意力,但是同樣因?yàn)閺?qiáng)烈的視覺刺激,會(huì)產(chǎn)生視覺疲勞感,不適合長時(shí)間閱讀。

3、閱讀習(xí)慣

閱讀習(xí)慣.jpg


 

(傳統(tǒng)紙張書籍)

用戶普遍的文字閱讀習(xí)慣源于白紙黑字的書籍,這種閱讀習(xí)慣是悠久的歷史延續(xù)下來的。因?yàn)樽钤缙谟脕碛涗浶畔⒌墓ぞ弑热缒咎?、墨水等多為深色,用于承載文字的動(dòng)物皮、竹簡等多為淺色。后來早期造紙術(shù)使用植物纖維本身也是淺色,所以白紙黑字已經(jīng)成為人類歷史多年積累的閱讀習(xí)慣,再者目前市場制造的方面來說,紙張即便需要漂白,在成本上都比均勻染色要低的多。

4、文字可讀性

文字可讀性.jpg


 

(較長的信息文本)

用戶體驗(yàn)領(lǐng)域著名的先驅(qū) Jacob Nielsen 經(jīng)研究得出:“文字和背景應(yīng)當(dāng)使用高對比度的配色。白底黑字能將可讀性提升到最高,而黑底白字在可讀性上的效果幾乎是一樣的。雖然兩種配色方式對比度是相同的,但是后者還是會(huì)讓用戶對文字的識(shí)別稍慢一些。受限于配色方案,白色的文本內(nèi)容相比于白底黑字的情況,會(huì)顯得更加纖細(xì)、模糊,整體的清晰度其實(shí)是不如常見的黑字。這種情況在純黑背景和純白字體的搭配下,最為明顯。”

根據(jù)上面幾個(gè)方面,可以得出如下結(jié)論

 ① 白底黑字是人類長期以來的閱讀習(xí)慣,可讀性略高于黑底白字,聚焦時(shí)視覺刺激較弱,產(chǎn)生的疲勞感較少,比較適合多文本的長時(shí)間閱讀。

 ② 黑底白字在閱讀的時(shí)候,聚焦于白色字體,視覺刺激強(qiáng),能夠迅速的吸引注意力,但是同時(shí)因?yàn)橐曈X興奮而易于產(chǎn)生疲勞感。比較適合需要突出重點(diǎn),吸引讀者注意力的場景。

三、總結(jié)

通過生理感知和心理感知兩個(gè)層面進(jìn)行分析,可以發(fā)現(xiàn)黑底白字和白底黑字的使用不是一個(gè)相對孤立的問題。人類的視覺生理機(jī)能很強(qiáng)大,可以通過側(cè)抑制來強(qiáng)化自己需要閱讀的部分,也可以通過視覺適應(yīng)來應(yīng)對不同強(qiáng)度光的環(huán)境。但是強(qiáng)大的視覺機(jī)能也對應(yīng)著相應(yīng)的視覺負(fù)擔(dān),所以黑底白字和白底黑字的使用可以根據(jù)以下幾個(gè)方面來考慮

1、根據(jù)產(chǎn)品所要展示的內(nèi)容類型

白底黑字可讀性更高,適合長時(shí)間閱讀;黑底白字視覺刺激性強(qiáng),能夠吸引視線,不同的產(chǎn)品希望達(dá)到的目的不盡相同,所以要根據(jù)產(chǎn)品需求來進(jìn)行設(shè)計(jì)。

根據(jù)產(chǎn)品所要展示的內(nèi)容類型.jpg


 

(注重文字閱讀的blog網(wǎng)站-此圖來自behance)

根據(jù)產(chǎn)品所要展示的內(nèi)容類型.jpg


 

(注重視覺沖擊力的摩托車主題站-此圖來自behance)

又或者一個(gè)希望打造氛圍,極具視覺吸引力的風(fēng)格化網(wǎng)站,就可以使用黑色背景白色大標(biāo)題的方式來強(qiáng)化信息,增加文字的視覺刺激,從而吸引用戶的眼球。

2、文字和背景的對比度

文字和背景的對比度.jpg


 

(黑白底色上不同對比度文字的顯示效果)

背景和內(nèi)容兩者之間的對比度和可讀性是成正比的,對比度越大,信息的可讀性就越高。但是視覺刺激也會(huì)越大,所以控制合適的對比度,在視覺刺激和可讀性中找到一個(gè)平衡點(diǎn)可以讓讀者閱讀的更加舒服。比如即便是白底黑字也很少用純黑純白,多數(shù)使用淺色搭配深色的方式,黑底白字也是一樣。

3、使用產(chǎn)品時(shí)的環(huán)境因素

書籍的閱讀基本都是有亮光的環(huán)境,因?yàn)榧堎|(zhì)書籍是反射光,沒有光就無法看清,白底黑字看著也最適合。電子產(chǎn)品(PC、手機(jī))雖然都是屏幕自發(fā)光,但是同樣要考慮環(huán)境光對于屏幕發(fā)光的影響。

使用產(chǎn)品時(shí)的環(huán)境因素.jpg


 

(知乎的正常模式和夜間模式)

比如一些軟件的夜間模式,就可以使用黑底白字來避免用戶的眼睛從暗適應(yīng)到明適應(yīng)頻繁轉(zhuǎn)換,從而達(dá)到減弱刺激,降低疲勞感的目的。

最后,對于黑底白字和白底黑字的選擇,需要結(jié)合明確的產(chǎn)品目的,配合恰當(dāng)?shù)膶Ρ榷纫约百N切的使用場景。正確的選擇能在保證視覺生理舒適的情況下獲得清晰的閱讀體驗(yàn),這樣才會(huì)得到我們眼睛的喜愛!


 

-end-


19
評論區(qū)(0)
正在加載評論...