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

互联网   发布时间:2017-06-30 11:59:28   作者:JustForTea   我要评论

白底黑字和黑底白字分别适合哪些设计环境?白底黑字和黑底白字是经常看到的字体,我们的眼睛更喜欢哪种款式呢?他们又适合哪些环境呢?下面我们就来看看详细的分析

版权申明:本文原创作者“JustForTea”,感谢“JustForTea”的原创经验分享!

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

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

一、生理感知

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

1、侧抑制

(侧抑制效应图:同样的颜色但是左侧方块会看起来更深)

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

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

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

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

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

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

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

2、视觉适应

(锥形细胞和杆状感光细胞)

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

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

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

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

3、视觉后像

(盯住白色区域看30秒,再看别处会看到白色区域的影像)

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

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

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

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

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

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

二、心理感知

1、背景颜色属性

(图为#000000黑色和#FFFFFF白色)

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

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

2、搭配效果

(单行字体效果对比)

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

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

3、阅读习惯

(传统纸张书籍)

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

4、文字可读性

(较长的信息文本)

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

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

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

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

三、总结

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

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

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

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

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

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

2、文字和背景的对比度

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

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

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

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

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

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

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

相关文章

  • 抽象风格描边拼接插画的绘制技巧分享

    抽象风格描边拼接插画的绘制技巧分享给大家,描边插画的种类有很多,有矢量潮流、美国街头的、清新萌系的,我这次给大家讲解的描边插画是倾向于图形抽象组合的风格,描边拼
    2018-05-14
  • 设计师详解电商设计中的极简设计风格

    近几年,电商设计风格逐步走向简洁乃至极简的风格,文章从排版、颜色、字体3个方面详细讲解了如何做极简的设计,每个里面都有一些具体的知识点,对于极简设计风格还不是很
    2018-04-18
  • 混合工具怎么用?高级混合术在版面中的妙用

    混合,也叫调和,不同的软件中的命名不同,AI里为混合工具,CDR里为调和工具,虽然名称不一样,但功能是和所呈现的效果基本上是一致的,今天小编就给大家分享高级混合术在
    2018-04-17
  • 如何设计富有创意性的杂志平面广告?

    如何设计富有创意性的杂志平面广告?在设计杂志平面广告时,您需要牢记一些特定的设计规则,它们是1.创建独特的图像、2.页面空间的使用、3.利用色彩等等
    2018-04-11
  • SVG格式的图片编辑修改方法

    做分析的时候,经常会遇到一些SVG格式的图片,但SVG格式的图片并不能插入到Word文档中,并且需要按照期刊要求修改,怎么办
    2018-03-25
  • 2018年值得设计师学习的六大视觉设计趋势总结

    本教程将给脚本之家的各位平面设计学习者带来2018年值得设计师学习的六大视觉设计趋势总结,文章分别给大家整理了关于这六大视觉设计趋势的概念简述,以及运用案例,感兴趣
    2018-02-08
  • 15个客户希望设计师掌握的设计技能

    15个客户希望设计师掌握的设计技能分享给脚本之家的各位平面设计学习者,这些例子大部分来自个人经验,虽然我目前为止并没有满足所有要求,但从客户的角度来看客户期望的是
    2017-12-21
  • 神器推荐 | 零设计基础如何做出超高转化率的海报?

    Fotor懒设计提供了不同场景所需要的各种尺寸下的海量模板。使用Fotor懒设计,你完全不用担心版权问题。Fotor懒设计只提供可以让用户商用的字体,模板上的图片也全是来自免
    2017-12-19
  • 30款最新的2018新年宣传单/海报/贺卡设计欣赏

    30款最新的2018新年宣传单/海报/贺卡设计欣赏分享给脚本之家的各位平面设计学习者,距离2018新年还有不到两个月的时间,各位设计师们又要忙于2018新年主题的设计了,希望这
    2017-11-06
  • 插画设计中明暗光影相关知识的分享

    插画设计中明暗光影相关知识的分享分享给脚本之家的各位平面设计学习者,文章主要分为光与暗、结构与明暗、明暗变化两大部分、明暗变化三大面及明暗变化五调子,感兴趣的朋
    2017-10-31

最新评论