为什么不使用纯黑色 (#000) 和纯白色 (#FFF)?

平面设计 颜色 背景
2022-01-09 12:48:38

Stack Exchange 的新顶栏说,

你会注意到的第一件事是它真的是黑色的*

*Jin 指出,从技术上讲,它并不是很黑:它是#212121。

我在它的 CSS 中看到,

background: #2f2f2f;
background: rgba(0, 0, 0, 0.8);

为什么不是“真黑”:为什么“不是很黑”更好?

同样,对于其余的背景,我看到类似的东西,

background: #fdfdfd

为什么不是纯白?

我不是专门询问 StackExchange——我的意思是,这对任何/所有网站来说都是一个很好的一般规则:当设计规范似乎要求黑色或白色时,我应该使用几乎黑色和白色而不是真的黑和白?

这个“规则”是否也适用于任何其他颜色(究竟是什么规则)?

规则是否依赖于设备?

3个回答

简而言之,它对眼睛很容易;

'简单地说,对比度是两种颜色之间的差异。在网页上,所需的对比度量因页面的不同部分而异。您通常需要文本与其背景颜色之间的高对比度。但设计元素之间的对比度太高可能会给人一种不安和凌乱的印象。黑白创造出尽可能高的对比度。- 从这里引用

是 UX 颜色建议/示例和理论的绝佳网站。并讨论了背景上不同颜色的对比,甚至给出了非常方便的十六进制代码。

这里还讨论了对比度和色彩平衡

这似乎也是一种流行的风格,因为背景之间的较低对比度使文本的对比度更好(在我看来),正如这里这里的颜色所看到的这些样本更多地用于查看颜色而不是它们的内容我想在这里交流的内容。

这不一定是偏好或风格的规则。它更依赖于内容而不是依赖于设备。它是关于你最想强调或关注的地方——无论发生在哪里,都应该有最大的对比。在 StackExchange 的情况下,一切都是关于问题和答案的,所以正文是最有对比的地方,因为那是最相关的地方。

祝你未来的颜色选择好运,这是另一个需要考虑的因素:D

在许多网站使用的白色背景下,纯黑色的顶部栏看起来非常醒目,这很糟糕,因为重点应该放在内容上,而不是将视线吸引到屏幕顶部。使其更亮(灰色)会降低顶部栏与主体背景之间的对比度。

然而,任何东西的灰色背景都会降低文本和背景之间可能的对比度,从而影响易读性。人眼对亮度差异最敏感,因此选择 50% 的灰色意味着无论您选择哪种文本颜色,您最多只能使用用户屏幕可以产生的亮度差异的一半。

因此,我认为选择 80% 黑色是在使顶部条不那么刺耳和保持内部对比度之间的一种折衷。

对于正文,您通常确实希望在浅色背景下使用纯黑色,以最大限度地提高对比度并提高可读性。(这适用于屏幕和打印。)请注意,主体的背景颜色与纯白色只有一点点不同。一般来说,网站通常会选择略带灰白色的背景。一个目的是通过选择淡粉色或蓝色(不过这里是中性灰色)使网站感觉更温暖或更凉爽。

在我看来......只是时尚,趋势。

如果用户觉得网页伤害了他的眼睛,他或她可以调整屏幕的亮度。在移动设备中,人们一直都在这样做。

有一种“复古”图像的趋势。饱和度低,洗掉了。

褪色的外观可能会使最暗或/和白点变灰。

https://www.google.com/search?q=vintage+photos&client=firefox-b-ab&dcr=0&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjb04iVr6vYAhUj94MKHQ3nBfQQ_AUICigB&biw=1920&bih=1007

不仅在照片中,而且在视频中……包括“快乐”视频。

https://www.youtube.com/watch?v=9HjrFnKEE8w

确实,很多对比会很烦人,特别是深色背景和白色文本......记住90 年代的网页设计,黑色背景和过饱和的动画 gif......

趋势是拥有更“友好”的网站,更“亲密”,所以这就是柔软。它还可以提供更“电影”的外观,而不是“电视”外观。

图像中的一个相反趋势是“ Hdri 外观”或 Draggan 风格,例如,它强调对比和微对比。

在某些情况下,与真实高动态范围图像的色调映射增强对比度相比,褪色图像可以提供更多内部动态范围的外观。