为什么背景不宜使用明度、饱和度过高的颜色?

你是否为吸引用户眼球选择界面颜色?

如果您的背景使用的是明亮且饱和的颜色,则会让用户将很难将注意力放在界面上。明亮饱和的色彩吸引了用户太多的注意力。太多太大的面积会过度刺激视网膜,导致眼睛疲劳。

例如,盯着上图中的色样。左栏由高亮度和饱和度的颜色组成。右列是80%亮度和饱和度的颜色。由于明度和饱和度过高对人度眼睛很刺眼,所以你对左侧列的容忍度会低于右侧。

明度VS.饱和度

亮度和饱和度是不同的颜色属性。前者是指颜色里混合了多少白色或黑色,而后者则指颜色中的灰色量。

增加亮度与降低饱和度不同。当你降低饱和度时,你将颜色变成灰色阴影。当你增加亮度时,你可以把颜色变浅,但不要变灰。

色彩对注意力的影响

一项关于“色调,饱和度和亮度的影响”的研究发现高饱和度和高亮度的色彩吸引了大量的关注。得出的结论是,这些色彩属性在吸引注意力方面比色相效果更明显。

另外两项关于“色彩饱和度的觉醒效应”和“色彩与情感”的研究发现,色彩度明亮饱和度与吸引注意力相关。色调也会影响注意力,但饱和度和亮度会产生更大的影响。

将高明亮高饱和度的颜色用在按钮上

明亮饱和的背景色将引起用户的注意,但这种注意不会一直持续。使用它们就像在用户面前尖叫用户。你会得到他们的关注,但他们很快就会离开你,因为你在震动他们。

你可以在需要用户操作的界面元素(如按钮)上使用它们。当用户准备采取行动时,颜色将引起对这些元素的关注,并使他们很容易找到。

背景使用暗色和低饱和度的颜色

最好保证背景颜色变暗,降低饱和度。使颜色变暗会减少其中的白色,同时增加颜色中的灰度来使颜色变淡。这会减弱它对眼睛的冲击。

不仅如此,它不会与页面文本或内容竞争。这允许用户更轻松地阅读页面而不会视觉干扰。

寻找最佳的背景颜色


有许多亮度与饱和度比率可以用于背景。创建颜色属性网格可以帮助您为界面找到最佳的背景颜色。

首先通过创建一个方形色板设计工具。使用颜色选择器选择色调并将其设置为最大亮度和饱和度。调整亮度和饱和度,但色调保持不变。

使用相同的色调创建四个具有较低饱和度和亮度级别的新色板。减少两个样本的饱和度和其他两个样本的亮度。使用10的倍数将颜色分为不同等级,所以你有一个广泛的等级。用饱和度/亮度比标记每个样本。

将饱和度色板放在色相色板的左侧,并将其从最低到最高饱和度排序。然后将亮度色板放在色相色板的右侧,并从最高亮度到最低亮度排序亮度色板。

这些颜色不是最佳的,因为它们仍然具有100%的亮度或饱和度。相反,它们将作为寻找更佳颜色的基准。

通过降低第一层色板的亮度和饱和度来创建第二层色板。为每组样本减少相同数量的水平,保证第二层颜色不具有100%饱和度或亮度级别。


如果你对第二层不满意,你可以探索更多的颜色。再次降低水平以创建第三层颜色。现在你可以选择八种不同亮度和饱和度比例的最佳颜色。

好背景色和坏背景色的案例

下面是让眼睛紧张的主页背景与舒缓眼睛的主题背景的例子。注意你能够在好页面和坏页面上注视多久。


美学和可用性

在决定背景颜色之前,先考虑颜色在用户眼中的感觉。你的亮度和饱和度是否优化?用户是否能够轻松阅读文本?

颜色影响设计的美学,但它也影响它的可用性。设计师需要注意两者,并让他们一起工作,以取悦眼睛。当你可以创建一个很好的界面时,你不必牺牲美观的可用性。



原文链接

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原贴显示器吧 ★显示器各项参数★ ★分析科普★ 在计算机硬件上显示器算是比较容易受轻视且关注度不高的硬件,很多人对...
    卡皮阅读 5,574评论 2 11
  • 1.dom对象的innerText和innerHTML有什么区别? innerText返回元素内包括的文本内容。在...
    ahong_吴阅读 434评论 0 0
  • 老实说,我早就有想写些东西的想法。下面让我来简单谈一谈佳能6D的使用感受: 首先说入手6D的目的,肯定是为了...
    小存存同学阅读 939评论 2 1