在网页上模拟阅读模式

平面设计 界面设计 颜色理论 可读性
2022-02-17 18:34:10

最新更新 :

经过几天的搜索,没有一个确定的(甚至没有关闭)选项或研究该主题,我决定创建自己的调查以缩小范围。本次调查仅针对 GD 用户。

我已经为它创建了一个完整的网页,真的希望结果可以。我在本次调查中列出的选项来自不同的(较小的)研究和意见。

花点时间完成此操作,它只有 2 个输入字段和 10 个选项中的 1 个选项。

一旦我有足够的票数来创建统计数据,它们就会发布在页面上并在此处公布。

调查页面


原帖:

在设计我自己的网站时,准确地说是文章部分,我考虑过创建一个模拟Android/三星设备上的阅读模式的功能。

我想让它尽可能简单,因此我的函数将是一个jQuery UI函数,它会在用户交互时动画背景颜色以预热它和字体颜色。

[来自下面的 update_2 ] 我还可以调整我的功能,让阅读模式适应日期和时间,考虑到季节之间的照明差异,比如一天中的 3 个阶段。

是否有关于阅读的最佳背景(黄色)颜色和字体颜色的研究/理论?


更新_1

Zach Saucier我不同意颜色和字体组合取决于文化。眼睛疲劳与数字显示设备发出的蓝光有关。从那以后,已经开发了许多应用程序来应用降低蓝光强度的“过滤器”。

Glaminy.com对此进行了研究,他们还说:

根据您的背景/文本颜色选择和数字屏幕型号,与白色背景上的黑色文本相比,它可以“过滤”高达 75-95% 的蓝光(估计基于LEDMuseum通量计数据)。

从上面看,我无法控制用户的数字屏幕模型,但我可以对背景/文本颜色做一些事情。

在此处输入图像描述

Ryan正如您所说,我正在努力为用户提供最佳体验,因为大量阅读会导致眼睛疲劳。昨晚在互联网上上下搜索时,一些研究表明“最佳颜色选择具有低蓝光含量:文本为红色、橙色或黄色,背景为黑色。 ”[也来自 Glarminy.com]。

但我不会将背景颜色更改为黑色,因为接缝有点太极端了。我还看到黄色背景和绿色文本颜色中的灰色。

PS:Word 2013 显然有一个阅读模式功能,可以将“纸”变成棕褐色 [除其他外]:

在此处输入图像描述


更新_2

我已经从 f.luxometer 到了f.lux 网站正如他们所说,这是一个让您的生活更美好的软件。“它使您的计算机显示器的颜色适应一天中的时间,晚上温暖,白天就像阳光一样。”

此外,他们的网站的背景颜色有点“极端”,但更容易阅读。试试吧,从他们的主页上阅读文本,然后切换到另一个带有黑底白字的标签。你的眼睛(至少我的眼睛)会感觉到不同。

我还可以调整我的功能,让阅读模式适应日期和时间,考虑到季节之间的照明差异,比如一天中的 3 个阶段。


更新_3

在搜索和阅读了很多关于它的内容之后,我得出的结论是,大多数应用程序只是在您正在阅读的文档上添加了一种带有点击属性的棕褐色过滤器,因此我所做的是:

  • 我截取了我的网站的屏幕截图并将其放入 PS
  • 在其上添加了大约 20% 密度的棕褐色照片滤镜
  • 使用吸管工具从主体背景和容器背景中获取新颜色,以便:
    • #fff转向#f1ece8
    • #ebebeb转向#ded9d6

它看起来像这样: 在此处输入图像描述

现在“还可以”,直到我找到更好的方法。


旁注(有点)


在进行研究时,我发现千叶大学设计与建筑系146名本科生进行了一项关于背景颜色对用户阅读网站体验的影响的研究

在其中一项测试中,它会向您展示一个带有背景颜色的网站(每个学生只得到五种颜色中的一种:白色、红色、绿色、蓝色和黄色),并在页面上分配了一些任务要做。

在所有的测试之后,他们被问到他们认为需要多长时间才能完成。

这是每种颜色的时间误差图(黄色的时间误差明显小于其他颜色)和整篇论文

在此处输入图像描述

2个回答

阿林,

披露:我遇到了您的问题,因为我与您在问题中提到的Glarminy有关。(不过,我对网页设计一无所知,所以我希望这不是完全没用的)。

我发现可读性和文本/背景颜色选择是一个重要的话题,而且大多数时候都是被忽视的话题!

我将尝试简要地说一下我所知道和认为可能会帮助您做出决定的内容(如果对参考研究论文的更彻底的评论感兴趣,请参阅这篇文章

看来,通过选择蓝光含量低的颜色,您就走上了正轨,但由于我们的眼睛不同,因此很难找到“一刀切”的解决方案。

我们的不适眩光阈值(迟早会导致计算机眼睛疲劳),本质上是您试图减少/避免的变化,因为我们有不同水平的黄斑色素光学密度 (MPOD)请参阅下图中的“MPOD 分数”以了解其分布(美国人口)。

黄斑色素(MP,又名黄斑)是眼睛中的一种过滤器,可过滤蓝光以保护感光器免受损害。

具有高 MPOD(MP 吸收/过滤/阻挡更多蓝光)的人会更喜欢白色/较浅的背景,而那些 MPOD 低的人会更喜欢具有较低蓝光含量的背景。

这就是为什么你所做的实验不会是决定性的(就像几十年来关于黄色有色眼镜是否能改善视力的研究一样——现在很明显,这取决于每个人的 MPOD)。这可能也是为什么有些人无法忍受 f.lux 而其他人喜欢它的原因。

我想要说明的是,您为用户提供选择的想法是一个不错的想法。它将迎合那些 MPOD 高(白底黑)和 MPOD 低(黄底黑)的人。如果您想对此进行改进,您可以让您的用户选择增加或减少背景中的蓝光含量,并让他们决定什么感觉最舒服。(但这可能很难实现?)

我希望这是有帮助的。

经过所有研究(我在问题中添加了一部分)和进行我自己的调查的决定,到目前为止,经过 150 票(并且仍在计算)的结果是:

#1

在此处输入图像描述 在此处输入图像描述

也有人评论说,虽然白天他们更喜欢 writer2001.com #1 选项(有 28 票的那个),但在晚上,他们会在深色背景上更改为浅色字体。

一些人认为绿色(薄荷)的绿色(薄荷)令人耳目一新,容易上眼,吸引注意力但不会令人不安。但没有太多人同意(只有 9 人)我想提一下,因为投票给这个颜色的人,也评论过,很高兴,也渴望帮助调查并从他们的朋友那里得到帮助,即使我们没有'不认识。也许这可能与颜色影响有关。

在此处输入图像描述

我将继续进行调查,我的目标是超过 1000 名参与者,并且也会不断更新这个答案。如果您想提供帮助,只需一分钟,并且不需要任何个人信息,只需要身份证或姓名缩写,虽然不需要,但该国家/地区也会受到赞赏并选择十个选项之一。

链接renaingsurvey.imagins.ro

PS:现在就文化因素下任何结论还为时过早,等我得到足够的选票后,我会留下来。

此外,这里是我的 9gag 帖子寻求帮助,有超过 60 条评论,因此您可以看到有关该主题的反应和讨论。