白底黑字和黑底白字分别适合哪些设计环境?
版权申明:本文原创作者“JustForTea”,感谢“JustForTea”的原创经验分享!
在人们的日常生活中,接触最多的书本、网页大部分都是白底黑字,这种方式已经成为一种阅读习惯。但是部分网站黑色背景浅色字体的搭配又让人们觉得体验很好、极具吸引力。那么就会有一些疑问:我们的眼睛更喜欢白底黑字还是黑底白字呢?哪一种搭配的可读性更高呢?
针对这个问题,可以从生理感知和心理感知两个方面来探讨
一、生理感知
从人类眼睛的生理机制来研究。人类视力是由光线进入角膜,角膜屈光后进入瞳孔,经过瞳孔的调节之后进入水晶体,然后集中在视网膜上再传导至大脑,如此转化为我们看到的影像。在这一过程中,有一些独特的生理现象对我们的视觉造成微妙的影响。
1、侧抑制
(侧抑制效应图:同样的颜色但是左侧方块会看起来更深)
侧抑制是指相邻的感受器之间能够互相抑制的现象,即在某个神经元受到刺激而产生兴奋时,再刺激相近的神经元,则后者所发生的兴奋会对前者产生抑制作用。当一个感受器受到刺激时,由此产生的神经冲动将对邻近部位的输入信号产生抑制性的影响。
(因为侧抑制现象,人们在明暗变化的边界上,常常在亮区看到一条更亮的光带,在暗区看到一条更暗的线条,这个更亮和更暗的区域就是马赫带效应)
总体来说,侧抑制网络在信息预处理中的主要功能有以下几个方面:
① 可以突出边缘,增加反差。
② 将很大的输入变化范围压缩到网络本身的动态范围之内,具有明显的亮度适应作用;
③ 可以对图像的细微间断处进行拟合,具有明显的聚类作用。
影响:在阅读文字信息时,盯住的字会最清楚,这个字周边的其他字就会被视觉中枢弱化。侧抑制也是造成人类多种视觉错觉的原因之一。
2、视觉适应
(锥形细胞和杆状感光细胞)
视觉适应是视觉器官的感觉随外界亮度的持续刺激而变化的过程。视网膜中包含锥状细胞和杆状感光细胞,锥状细胞负责在光线之下使视力清晰,并且感知颜色;杆状感光细胞让我们能在黑暗的环境感知弱光。视觉适应的机制就是这些细胞和神经活动的重新调整,可以分为暗适应和明适应。
① 暗适应:照明停止或者由明亮环境进入黑暗环境的时候,眼睛会暂时看不见事物,这个时候杆状感光细胞开始工作,提升对弱光的敏感度,使人类逐渐适应黑暗环境。(杆状感光细胞有障碍的人就是"夜盲症"啦,并且杆状感光细胞不能辨别颜色,所以黑暗中看什么都是一个颜色!)
② 明适应:照明开始或者由黑暗环境进入明亮环境,人眼感受性下降,眼睛过渡到明视觉状态。比如走出电影院,开始觉得阳光刺眼,但很快就能恢复正常状态。
影响:暗适应和明适应是人类眼睛应对环境光线刺激的反应能力,但是频繁的视觉适应会导致视觉迅速疲劳。
3、视觉后像
(盯住白色区域看30秒,再看别处会看到白色区域的影像)
光刺激对视觉器官的作用停止后,细胞的兴奋并不随着刺激的终止而停止,感觉现象能保留一个短暂的时间,这种现象叫做视觉后像。比如盯着灯泡看数秒,再看别处,会看到发光灯泡的影像。
影响:强烈刺激会引起视觉器官兴奋,产生视觉后像,同时会加速视觉疲劳。
根据上面的几个视觉现象,可以得出这样的结论:
① 因为侧抑制的视觉现象,不论是白底黑字还是黑底白字,人类的眼睛都可以增加反差,让黑色字体更黑,白色字体更亮,从而清晰的识别文字。
② 因为视觉适应的原理,我们在光线充足的时候阅读黑底白字的信息,视觉聚焦于白色文字,黑色背景也会更暗,眼睛需要进行暗适应,所以会加速视觉疲劳。而在夜晚则相反,眼睛已经是暗适应的状态,阅读黑底白字的信息,不需要进行视觉适应,疲劳感不会增加。所以在晚上使用深色底浅色字的夜间模式会减少刺激,使眼睛更舒服。
③ 阅读黑底白字的信息时,因为侧抑制会使白色字体更加炫目,黑色背景更加沉重,长时间浏览白色字体,会产生强烈的光刺激从而产生视觉后像,造成视觉疲劳。所以即便在使用黑底白字的时候,也要通过降低对比度的方式,减弱这种光刺激,从而减轻视觉的疲劳感。而阅读白底黑字的信息时,聚焦的文字为黑色,不会产生光刺激,视觉后像的情况基本不会出现。
二、心理感知
1、背景颜色属性
(图为#000000黑色和#FFFFFF白色)
① 黑色:黑色可以定义为没有任何可见光进入视觉范围(显示屏是主动发光,不发光即为黑色),黑色可以让其他颜色变得更亮,从而凸显出来。从色彩心理学上来看,黑色传递出高雅、正式、名望、权力的感觉,大面积的纯黑会给人一种严肃和压抑的感觉。
② 白色:一种包含光谱中所有颜色光的颜色,通常被认为是"无色"的,且明度最高,无色相(显示屏中把三原色组合在一起就发出白色光)。白色是一个中立的颜色,常常被用作页面的背景色,大多数的印象就是干净和简洁,大面积的白色会有一种舒张、放松的感觉。
2、搭配效果
(单行字体效果对比)
① 白底黑字:传统的白底黑字整体效果比较干净清爽,阅读时焦点不会第一时间落在文字上,由于周围白色区域反光,读者的注意力会不时发生游离。但是因为侧抑制的现象,聚焦不反射光的黑色字体时,视觉刺激并不强烈,所以长时间阅读造成的视觉疲劳感较弱。
② 黑底白字:对于黑底白字的形式,侧抑制的现象会使聚焦的白色字体变得更加炫目,视觉刺激强烈,能够迅速抓取读者的注意力,但是同样因为强烈的视觉刺激,会产生视觉疲劳感,不适合长时间阅读。
3、阅读习惯
(传统纸张书籍)
用户普遍的文字阅读习惯源于白纸黑字的书籍,这种阅读习惯是悠久的历史延续下来的。因为最早期用来记录信息的工具比如木炭、墨水等多为深色,用于承载文字的动物皮、竹简等多为浅色。后来早期造纸术使用植物纤维本身也是浅色,所以白纸黑字已经成为人类历史多年积累的阅读习惯,再者目前市场制造的方面来说,纸张即便需要漂白,在成本上都比均匀染色要低的多。
4、文字可读性
(较长的信息文本)
用户体验领域著名的先驱 JacobNielsen 经研究得出:"文字和背景应当使用高对比度的配色。白底黑字能将可读性提升到最高,而黑底白字在可读性上的效果几乎是一样的。虽然两种配色方式对比度是相同的,但是后者还是会让用户对文字的识别稍慢一些。受限于配色方案,白色的文本内容相比于白底黑字的情况,会显得更加纤细、模糊,整体的清晰度其实是不如常见的黑字。这种情况在纯黑背景和纯白字体的搭配下,最为明显。"
根据上面几个方面,可以得出如下结论
① 白底黑字是人类长期以来的阅读习惯,可读性略高于黑底白字,聚焦时视觉刺激较弱,产生的疲劳感较少,比较适合多文本的长时间阅读。
② 黑底白字在阅读的时候,聚焦于白色字体,视觉刺激强,能够迅速的吸引注意力,但是同时因为视觉兴奋而易于产生疲劳感。比较适合需要突出重点,吸引读者注意力的场景。
三、总结
通过生理感知和心理感知两个层面进行分析,可以发现黑底白字和白底黑字的使用不是一个相对孤立的问题。人类的视觉生理机能很强大,可以通过侧抑制来强化自己需要阅读的部分,也可以通过视觉适应来应对不同强度光的环境。但是强大的视觉机能也对应着相应的视觉负担,所以黑底白字和白底黑字的使用可以根据以下几个方面来考虑
1、根据产品所要展示的内容类型
白底黑字可读性更高,适合长时间阅读;黑底白字视觉刺激性强,能够吸引视线,不同的产品希望达到的目的不尽相同,所以要根据产品需求来进行设计。
(注重文字阅读的blog网站-此图来自behance)
(注重视觉冲击力的摩托车主题站-此图来自behance)
又或者一个希望打造氛围,极具视觉吸引力的风格化网站,就可以使用黑色背景白色大标题的方式来强化信息,增加文字的视觉刺激,从而吸引用户的眼球。
2、文字和背景的对比度
(黑白底色上不同对比度文字的显示效果)
背景和内容两者之间的对比度和可读性是成正比的,对比度越大,信息的可读性就越高。但是视觉刺激也会越大,所以控制合适的对比度,在视觉刺激和可读性中找到一个平衡点可以让读者阅读的更加舒服。比如即便是白底黑字也很少用纯黑纯白,多数使用浅色搭配深色的方式,黑底白字也是一样。
3、使用产品时的环境因素
书籍的阅读基本都是有亮光的环境,因为纸质书籍是反射光,没有光就无法看清,白底黑字看着也最适合。电子产品(PC、手机)虽然都是屏幕自发光,但是同样要考虑环境光对于屏幕发光的影响。
(知乎的正常模式和夜间模式)
比如一些软件的夜间模式,就可以使用黑底白字来避免用户的眼睛从暗适应到明适应频繁转换,从而达到减弱刺激,降低疲劳感的目的。
最后,对于黑底白字和白底黑字的选择,需要结合明确的产品目的,配合恰当的对比度以及贴切的使用场景。正确的选择能在保证视觉生理舒适的情况下获得清晰的阅读体验,这样才会得到我们眼睛的喜爱!
-
美的最高境界!28款留白字体设计
2022-01-10 38
-
白底黑字or黑底白字,哪一种搭配的可读性更高呢?
2022-09-01 4
-
聊聊汉仪旗黑字体那些独具匠心的设计细节
2022-09-01 1
-
PS怎么制作反白字效果 PS制作反白字效果教程
2022-09-28 46
-
Ai如何制作可编辑的反白文字 Ai制作反白字图文教程
2022-11-02 36
-
Photoshop如何去掉公章里的黑字?
2022-11-16 2
-
AI怎么制作创意的520表白字体?
2022-11-19 2