爱开发联盟是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。让开发变得简单起来!
爱开发联盟是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。让开发变得简单起来!
当前所在位置:主页 > 设计 > 平面其它 >
  • 魔艺客提供SEO\SEM推广整合营销服务
  • 提供整套互联网营销整合方案-魔艺客
  • 魔艺客高端网站建设开发服务十一大优惠服务
  • 资深的网站建设开发经验,一对一服务-魔艺客高
  • 一站式服务,从服务器到网站,三站何以尽在魔
爱开发联盟是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。让开发变得简单起来!

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

发布时间:2017-09-17 11:06    作者:爱开发联盟    浏览:次    来源:aikaifa.com.cn 分享:

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

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

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

一、生理感知

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

1、侧抑制

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

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

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

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

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

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

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

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

2、视觉适应

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

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

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

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

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

3、视觉后像

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

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

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

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

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

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

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

二、心理感知

1、背景颜色属性

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

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

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

2、搭配效果

(单行字体效果对比)

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

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

3、阅读习惯

(传统纸张书籍)

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

4、文字可读性

(较长的信息文本)

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

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

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

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

三、总结

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

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

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

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

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

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

2、文字和背景的对比度

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

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

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

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

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

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

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

网友评论

爱开发联盟是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。让开发变得简单起来!
爱开发联盟是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。让开发变得简单起来!
爱开发联盟是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。让开发变得简单起来!

在线手册

网站地图导航

前端 HTML/Xhtml HTML5 CSS XML/XSLT Dreamweaver教程 Frontpage教程 心得技巧 编程 JavaScript ASP.NET PHP编程 正则表达式 AJAX相关 ASP编程 JSP编程 Flex 脚本加解密 web2.0 XML/RSS 网页编辑器 相关技巧 安全相关 网页播放器 Dart 其它综合 脚本 VBS DOS/BAT HTA HTC Python perl 游戏相关 vba 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 脚本下载 广告代码 js框架 批处理 网页相关 源码下载 数据库 MsSql Mysql mariadb oracle DB2 mssql2008 mssql2005 SQLite PostgreSQL MongoDB Redis Access 数据库文摘 数据库其它 CMS dedecms ecshop z-blog UcHome UCenter 风讯CMS 科汛cms discuz 新云cms phpwind 动易cms phpcms 帝国cms WordPress drupal 其它cms 设计 photoshop教程 摄影教程 Fireworks教程 CorelDraw教程 Illustrator教程 Painter教程 Freehand教程 Indesign 设计素材 平面其它 微信相关 微信公众号 小程序 操作系统 bios 系统安装 系统进程 Windows系列 LINUX RedHat/Centos Ubuntu/Debian Fedora Solaris 麒麟系统 红旗Linux Unix/BSD 苹果MAC 注册表 其它系统 网站运营 建站经验 微信营销 网站优化 网站策划 网络赚钱 网络创业 站长故事 alexa域名 其它相关 网络安全 黑客教程 安全设置 杀毒防毒 病毒查杀 脚本攻防 黑客入侵 工具使用 业界动态 Exploit 漏洞分析 加密解密 手机黑客 安全其它 在线手册 网页制作 脚本编程 数据库相关 软件编程 系统相关 其它相关 源码下载

友情链接申请加入

51CTO 上海魔艺客 猫鼬设计开发 Erlo网站开发 猫鼬设计工作室 新发现全球资讯 信息安全与IT资讯
爱开发联盟是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。让开发变得简单起来!

283882409