白底黑字和黑底白字分别适合哪些设计环境?

版权申明：本文原创作者“JustForTea”，感谢“JustForTea”的原创经验分享！

在人们的日常生活中，接触最多的书本、网页大部分都是白底黑字，这种方式已经成为一种阅读习惯。但是部分网站黑色背景浅色字体的搭配又让人们觉得体验很好、极具吸引力。那么就会有一些疑问：我们的眼睛更喜欢白底黑字还是黑底白字呢？哪一种搭配的可读性更高呢？

针对这个问题，可以从生理感知和心理感知两个方面来探讨

一、生理感知

从人类眼睛的生理机制来研究。人类视力是由光线进入角膜，角膜屈光后进入瞳孔，经过瞳孔的调节之后进入水晶体，然后集中在视网膜上再传导至大脑，如此转化为我们看到的影像。在这一过程中，有一些独特的生理现象对我们的视觉造成微妙的影响。

1、侧抑制

（侧抑制效应图：同样的颜色但是左侧方块会看起来更深）

侧抑制是指相邻的感受器之间能够互相抑制的现象，即在某个神经元受到刺激而产生兴奋时，再刺激相近的神经元，则后者所发生的兴奋会对前者产生抑制作用。当一个感受器受到刺激时，由此产生的神经冲动将对邻近部位的输入信号产生抑制性的影响。

（因为侧抑制现象，人们在明暗变化的边界上，常常在亮区看到一条更亮的光带，在暗区看到一条更暗的线条，这个更亮和更暗的区域就是马赫带效应）

总体来说，侧抑制网络在信息预处理中的主要功能有以下几个方面：

① 可以突出边缘，增加反差。

② 将很大的输入变化范围压缩到网络本身的动态范围之内，具有明显的亮度适应作用；

③ 可以对图像的细微间断处进行拟合，具有明显的聚类作用。

影响：在阅读文字信息时，盯住的字会最清楚，这个字周边的其他字就会被视觉中枢弱化。侧抑制也是造成人类多种视觉错觉的原因之一。

2、视觉适应

（锥形细胞和杆状感光细胞）

视觉适应是视觉器官的感觉随外界亮度的持续刺激而变化的过程。视网膜中包含锥状细胞和杆状感光细胞，锥状细胞负责在光线之下使视力清晰，并且感知颜色；杆状感光细胞让我们能在黑暗的环境感知弱光。视觉适应的机制就是这些细胞和神经活动的重新调整，可以分为暗适应和明适应。

① 暗适应：照明停止或者由明亮环境进入黑暗环境的时候，眼睛会暂时看不见事物，这个时候杆状感光细胞开始工作，提升对弱光的敏感度，使人类逐渐适应黑暗环境。（杆状感光细胞有障碍的人就是"夜盲症"啦，并且杆状感光细胞不能辨别颜色，所以黑暗中看什么都是一个颜色！）

② 明适应：照明开始或者由黑暗环境进入明亮环境，人眼感受性下降，眼睛过渡到明视觉状态。比如走出电影院，开始觉得阳光刺眼，但很快就能恢复正常状态。

影响：暗适应和明适应是人类眼睛应对环境光线刺激的反应能力，但是频繁的视觉适应会导致视觉迅速疲劳。

3、视觉后像

（盯住白色区域看30秒，再看别处会看到白色区域的影像）

光刺激对视觉器官的作用停止后，细胞的兴奋并不随着刺激的终止而停止，感觉现象能保留一个短暂的时间，这种现象叫做视觉后像。比如盯着灯泡看数秒，再看别处，会看到发光灯泡的影像。

影响：强烈刺激会引起视觉器官兴奋，产生视觉后像，同时会加速视觉疲劳。

根据上面的几个视觉现象，可以得出这样的结论：

① 因为侧抑制的视觉现象，不论是白底黑字还是黑底白字，人类的眼睛都可以增加反差，让黑色字体更黑，白色字体更亮，从而清晰的识别文字。

② 因为视觉适应的原理，我们在光线充足的时候阅读黑底白字的信息，视觉聚焦于白色文字，黑色背景也会更暗，眼睛需要进行暗适应，所以会加速视觉疲劳。而在夜晚则相反，眼睛已经是暗适应的状态，阅读黑底白字的信息，不需要进行视觉适应，疲劳感不会增加。所以在晚上使用深色底浅色字的夜间模式会减少刺激，使眼睛更舒服。

③ 阅读黑底白字的信息时，因为侧抑制会使白色字体更加炫目，黑色背景更加沉重，长时间浏览白色字体，会产生强烈的光刺激从而产生视觉后像，造成视觉疲劳。所以即便在使用黑底白字的时候，也要通过降低对比度的方式，减弱这种光刺激，从而减轻视觉的疲劳感。而阅读白底黑字的信息时，聚焦的文字为黑色，不会产生光刺激，视觉后像的情况基本不会出现。

二、心理感知

1、背景颜色属性

（图为#000000黑色和#FFFFFF白色）

① 黑色：黑色可以定义为没有任何可见光进入视觉范围（显示屏是主动发光，不发光即为黑色），黑色可以让其他颜色变得更亮，从而凸显出来。从色彩心理学上来看，黑色传递出高雅、正式、名望、权力的感觉，大面积的纯黑会给人一种严肃和压抑的感觉。

② 白色：一种包含光谱中所有颜色光的颜色，通常被认为是"无色"的，且明度最高，无色相（显示屏中把三原色组合在一起就发出白色光）。白色是一个中立的颜色，常常被用作页面的背景色，大多数的印象就是干净和简洁，大面积的白色会有一种舒张、放松的感觉。

2、搭配效果

（单行字体效果对比）

① 白底黑字：传统的白底黑字整体效果比较干净清爽，阅读时焦点不会第一时间落在文字上，由于周围白色区域反光，读者的注意力会不时发生游离。但是因为侧抑制的现象，聚焦不反射光的黑色字体时，视觉刺激并不强烈，所以长时间阅读造成的视觉疲劳感较弱。
 

② 黑底白字：对于黑底白字的形式，侧抑制的现象会使聚焦的白色字体变得更加炫目，视觉刺激强烈，能够迅速抓取读者的注意力，但是同样因为强烈的视觉刺激，会产生视觉疲劳感，不适合长时间阅读。

3、阅读习惯

（传统纸张书籍）

用户普遍的文字阅读习惯源于白纸黑字的书籍，这种阅读习惯是悠久的历史延续下来的。因为最早期用来记录信息的工具比如木炭、墨水等多为深色，用于承载文字的动物皮、竹简等多为浅色。后来早期造纸术使用植物纤维本身也是浅色，所以白纸黑字已经成为人类历史多年积累的阅读习惯，再者目前市场制造的方面来说，纸张即便需要漂白，在成本上都比均匀染色要低的多。

4、文字可读性

（较长的信息文本）

用户体验领域著名的先驱 JacobNielsen 经研究得出："文字和背景应当使用高对比度的配色。白底黑字能将可读性提升到最高，而黑底白字在可读性上的效果几乎是一样的。虽然两种配色方式对比度是相同的，但是后者还是会让用户对文字的识别稍慢一些。受限于配色方案，白色的文本内容相比于白底黑字的情况，会显得更加纤细、模糊，整体的清晰度其实是不如常见的黑字。这种情况在纯黑背景和纯白字体的搭配下，最为明显。"

根据上面几个方面，可以得出如下结论

① 白底黑字是人类长期以来的阅读习惯，可读性略高于黑底白字，聚焦时视觉刺激较弱，产生的疲劳感较少，比较适合多文本的长时间阅读。

② 黑底白字在阅读的时候，聚焦于白色字体，视觉刺激强，能够迅速的吸引注意力，但是同时因为视觉兴奋而易于产生疲劳感。比较适合需要突出重点，吸引读者注意力的场景。

三、总结

通过生理感知和心理感知两个层面进行分析，可以发现黑底白字和白底黑字的使用不是一个相对孤立的问题。人类的视觉生理机能很强大，可以通过侧抑制来强化自己需要阅读的部分，也可以通过视觉适应来应对不同强度光的环境。但是强大的视觉机能也对应着相应的视觉负担，所以黑底白字和白底黑字的使用可以根据以下几个方面来考虑

1、根据产品所要展示的内容类型

白底黑字可读性更高，适合长时间阅读；黑底白字视觉刺激性强，能够吸引视线，不同的产品希望达到的目的不尽相同，所以要根据产品需求来进行设计。

（注重文字阅读的blog网站-此图来自behance）

（注重视觉冲击力的摩托车主题站-此图来自behance）

又或者一个希望打造氛围，极具视觉吸引力的风格化网站，就可以使用黑色背景白色大标题的方式来强化信息，增加文字的视觉刺激，从而吸引用户的眼球。

2、文字和背景的对比度

（黑白底色上不同对比度文字的显示效果）

背景和内容两者之间的对比度和可读性是成正比的，对比度越大，信息的可读性就越高。但是视觉刺激也会越大，所以控制合适的对比度，在视觉刺激和可读性中找到一个平衡点可以让读者阅读的更加舒服。比如即便是白底黑字也很少用纯黑纯白，多数使用浅色搭配深色的方式，黑底白字也是一样。

3、使用产品时的环境因素

书籍的阅读基本都是有亮光的环境，因为纸质书籍是反射光，没有光就无法看清，白底黑字看着也最适合。电子产品（PC、手机）虽然都是屏幕自发光，但是同样要考虑环境光对于屏幕发光的影响。

（知乎的正常模式和夜间模式）

比如一些软件的夜间模式，就可以使用黑底白字来避免用户的眼睛从暗适应到明适应频繁转换，从而达到减弱刺激，降低疲劳感的目的。

最后，对于黑底白字和白底黑字的选择，需要结合明确的产品目的，配合恰当的对比度以及贴切的使用场景。正确的选择能在保证视觉生理舒适的情况下获得清晰的阅读体验，这样才会得到我们眼睛的喜爱！