在设计网站时,我如何知道用户如何看待颜色?

平面设计 网站设计 颜色转换
2022-01-17 06:52:35

在设计网站时,我如何知道用户如何看待颜色?我看到的网站颜色与我的 Macbook 和 Windows 台式机/笔记本电脑不同。特别是我在桌面上看不到浅色,例如表格的灰色边框是不可见的。

设计时应该关注哪一个?我能否通过设计解决方案使所有屏幕都非常相似?

4个回答

简短的回答:你没有。

更长的答案:实际上不可能考虑到所有屏幕设置和校准、环境和观众的视觉(残疾)能力。这就是为什么有一些指导方针,例如,文本和背景的对比,以保证至少在大多数情况下的一些可用性。

我的个人工作流程包括至少两台未校准的显示器以及在不同照明条件下在不同移动设备上进行的一些测试。

W3C 制定了一些关于颜色使用和必要对比度的指南,您可以在此处阅读就个人而言,我使用Lea Verou的文本对比工具来检查我的文本颜色是否符合准则或至少接近。

您没有,也无法在每个人的显示器/设备上控制或强制执行相同的设置。您可以做的最好的事情是在为 Web 导出光栅图像时使用 sRGB 颜色配置文件。

sRGB 是用于网络色彩再现的全球标准色彩空间。

这将在一定程度上有所帮助,但最终用户自己的偏好将决定如何在他们的设备上查看图像。显然,这是针对光栅图像,而不是页面上的其他图形元素。

今天的现代浏览器和计算机很少有显示正确颜色的问题(有关这方面的一些信息,请参见https://websafecolors.info/learn )。

看起来可能是显示器本身使颜色看起来不同。这可能是由于显示器亮度、对比度和蓝光级别设置,甚至是由于显示器本身的技术,例如 LED 和面板类型。无法在显示器之间强制执行一致的设置,甚至无法读取它们的设置并调整网站。

我建议使用 Inspect Element 并查看每个平台上颜色的十六进制代码。如果它们相同,那么您就知道是显示器。解决方案将是使用彼此之间具有更大对比度的颜色,这样它们就有更大的机会在所有屏幕上脱颖而出。或者,尝试更厚的边框,甚至是无边框的软垫桌子!大多数用户都有高清屏幕,这为表格设计提供了很多可能性,表格设计通常使用像素厚的文本和格式。

答案是否定的,因为每台电脑的笔记本电脑颜色和台式机颜色都不一样。如果要确保颜色相同,可以使用颜色代码,例如,您可以在 css 中键入此代码:

background-color: #D2B48C