很多网站使用浅色背景配黑色字体来显示网站内容,以便于用户阅读。但使用黑底白字样式显示网站内容也有其可取之处。了解这两种样式的使用时机,使设计人员设计的网站不会损害用户的可读性。

阅读 VS 跳读

  用户阅读或跳读网站内容。阅读是将注意力集中到词语上以便完全理解主题。而跳读是通过略读内容以泛泛了解主题。黑底白字样式的使用时机取决于用户是跳读还是阅读网站内容。

段落文本

  用户阅读的内容属于段落文本。为便于用户阅读,段落文本不应使用黑底白字样式显示。迫使用户长时间盯着白色的文字会伤害他们的眼睛,白色会以几乎相同的剂量刺激人眼中所有三种颜色敏感的视觉受体,使得阅读黑底白字样式的段落文本给眼睛带来压力[1]。
  白色还会反射所有波长的光。段落文本中的单词和字母结构紧凑,当白色的文本反射光时,反射光散射并进入邻近的单词和字母,使得单词和字母的形状难以辨识,影响用户可读性。而使用黑色字体,黑色吸收了每个单词和字母周围的光,使它们易于区分。


  这就是最好选择用带点灰色的浅色背景和黑色字体显示段落文本的原因。背景带点灰色,减少单词的反射光,易于眼睛辨识。黑色字体的效果更好,黑色不会反射所有可见光谱内的光。因此,阅读时盯着黑色字体不会带给眼睛太多压力,黑色吸收了照射到单词上的光。
  如果网站使用黑色背景,则段落文本应偏灰色。灰色字体没有白色字体那么亮,不会带给眼睛太多压力。灰色字体反射的光较少,易于用户阅读。记住,如果是在黑暗没有光的房间阅读文本,黑底白字样式的文本也没有那么难看,因为黑暗的房间里没有光线反射。

文章标题、章节标题和标签

  用户跳读时使用黑底白字样式显示内容的效果比较好。用户通常会跳读文章标题、章节标题和标签,使用黑底白字样式显示这些内容,可以有效地突出内容以吸引用户注意。
  白色会反射可见光谱中所有颜色的光,这使文字光亮清楚。跳读不用长时间的视觉凝视,只需快速扫视即可看到标题、标题或标签,不用担心用户的眼睛压力太大。


  将黑底白字样式作为高亮显示工具用于突出显示用户跳读的文本,这是一种巧妙的做法。而浅色背景配黑色字体更适合显示需阅读的段落文本。正确应用黑色和浅色,让用户畅览网站内容,不会感到眼睛疼痛。

原文地址:https://uxmovement.com/content/when-to-use-white-text-on-a-dark-background/

[1]原文: Forcing users to fixate on the white text for a long time can strain the user’s eyes. This is because white stimulates all three types of color sensitive visual receptors in the human eye in nearly equal amounts . This makes reading white paragraph text on dark backgrounds stressful on the eyes.

(翻译)黑底白字样式的使用时机相关推荐

  1. 手机900e模式如何救_苹果手机如何将显示模式改为黑底白字?这个简单!只需4步...

    苹果手机显示时"黑底白字",需在"设置"中开启"深色"显示模式,这个功能只有IOS13以上的版本具备. 以iPhone7Plus为例,开启& ...

  2. 如何用chrome扩展将网页变成黑底白字,用以保护视力

    不知道有没有科学依据,自己感觉黑底白字对视力好些,于是动手加个chrome扩展: 第一步:建个文件夹,名称比如叫changeColor; 第二步:在changeColor文件夹中建三个文件:manif ...

  3. TSC 打印机开发TSPL黑底白字的打印以及一些问题

    因公司需要实现产品标签批量打印,用的TSC TTP-244 Pro打印机:"黑底白字"的打印一直困扰着我,这次不管老板多爱惜标签纸又重复测试了之前的命令,得到"黑底白字& ...

  4. word文档怎么调成黑底白字

    https://zhidao.baidu.com/question/1801777816093892467.html word文档怎么调成黑底白字 word文档怎么调成黑底白字  我来答 分享 举报 ...

  5. 黑底白字html代码,如何用chrome扩展将网页变成黑底白字,用以保护视力

    先说个题外话,github上不了咱能理解,毕竟是米帝的东东,但csdn,cnbolg等咱中国人自己的网站在新疆也上不了?杯具啊! 进入正题,不知道有没有科学依据,自己感觉黑底白字对视力好些,于是动手加 ...

  6. bootstrap4  黑底白字导航

    用惯了3的黑底白字导航后,转到4的白底,发现其好丑,于是尝试将其默认效果修改为黑底白字的导航. nav将默认的bg-light navbar-light改为bg-dark navbar-dark  a ...

  7. C 语言的控制台输出只是 “黑底白字”吗 ?

    文章目录 前言 一.如何改变控制台输出的颜色? 二.单纯只设置文字颜色 总结 前言 C 语言控制台输出的只是 "黑底白字"吗 ?不!它也可以是有彩色的,原来我们可以调用 Windo ...

  8. 如何将标签上的文本转换成黑底白字

    大家在使用条码软件制作标签时,添加的文字内容一般都是白底黑字的,或者是其他颜色的,但是有一些用户需要实现黑底白字的效果.下面我们就用一个例子来介绍如何将标签上的文本转换成黑底白字. 首先打开条码打印软 ...

  9. SecureCRT 设置黑底白字和编码

    SecureCRT 只能对具体的会话,分别设置字体.字号.编码格式等(全局选项中无相关配置). 具体方法如下: 备注:直接在连接窗口中,点开具体的会话属性进行配置也是一样的.以下方法注明 " ...

最新文章

  1. 小布老师视频教程----oracle 9i 性能调优系列培训(全)
  2. Java正则表达式--字符集范围:并集、交集和差集
  3. anaconda安装后只有几个文件,大量文件缺失,开始栏里没有图标的解决方法
  4. div css页面布局 模板_HTML 布局
  5. php 运算器,运算器的功能是什么
  6. 应用程序添加到服务器,在同一应用程序中的配置服务器和eureka服务器:尝试连接到localhost:8761...
  7. AOP+自定义注解 实现service统一的异常信息处理
  8. [转载] java中数组的反射的探究
  9. Spring Boot @Async 简单实践
  10. 2021高考成绩答题卡查询,明天用的2021高考答题卡,提前瞅一眼
  11. 移动应用开发学习通测试题答案
  12. Spring文件中的xsd文件
  13. Ubuntu系统实现简单c语言编程
  14. Adobe Flash被禁用和无法加载的官方解决办法
  15. React Fullpage
  16. swift tabbar 自定义+号 底部34导航栏适配
  17. java无法验证证书_如何解决“证书无效,不能用于验证本网站的身份”错误?...
  18. 菜鸟编程:python中实现中英文文字或单词计数(wordcount)
  19. 清华大学计算机系女生人数,2013年清华大学在各省市录取人数及男女比例
  20. 【计算机算法】递归——打印旋转方阵(正转及逆转)

热门文章

  1. UE5神通--POI解决方案
  2. 电脑入米家,让小爱同学随意操控电脑开关机(需主机或软路由)
  3. 机器学习性能评估——PR曲线与ROC曲线
  4. java mail 邮箱发送_Java Mail 发送邮件
  5. startuml如何画流程图_实例介绍用Visio画UML流程图方法
  6. Linux学习之centos 7 ping百度无法ping通
  7. 嵌入式实时操作系统FOS简介
  8. Android开发之全局异常捕获
  9. Omni-ScaleFeatureLearningforPersonRe-Identification简记
  10. Java模式参考大全