如果你的背景使用的是明亮和饱和的颜色，用户很难一直盯着你的页面。明亮、饱和的颜色最能吸引用户的注意力，但是太大的区域会过度刺激视网膜，会使眼睛疲劳。

例如，盯着上面图片中的色块。左列由亮度和饱和度最大的颜色组成，右侧由80%亮度和饱和度的颜色组成。你对盯着左边栏的时间将低于右边栏，因为明亮的、饱和的颜色会让你的眼睛感到难受。

亮度和饱和度

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

增加亮度与降低饱和度不同。降低饱和度时，会将颜色变为灰。当您增加亮度时，您可以将颜色调浅，但不要将其变为灰色。

颜色对注意力的影响

一项名为“色调、饱和度和亮度的影响”的研究发现，饱和度和亮度高的颜色最受关注。结论是这些颜色特性在吸引注意力方面比色调更重要。

另外两项研究“ 颜色饱和度的唤醒效应 ”和“ 颜色和情感 ”发现，明亮，饱和的颜色与高度唤醒有关。色调也会影响唤醒，但饱和度和亮度会产生更大的影响。

为按钮保留明亮、饱和的颜色

明亮、饱和的背景色会吸引用户的注意，但不会保持用户的注意力。使用它们就像在用户面前尖叫一样。你会引起他们的注意，但他们很快就会把目光移开，因为你在干扰他们。

您应该只在需要用户操作(如按钮)的界面元素上使用它们。颜色会吸引人们对这些元素的注意，使它们在用户准备行动时很容易被发现。

使用较暗，饱和度低的颜色作为背景

最好使背景颜色更暗，饱和度更低。颜色变暗会减少白色，而淡化颜色会增加灰色。这可以缓和它对眼睛的刺激。

不仅如此，它也不会与页面文本或内容争夺注意力。这让用户更容易地阅读页面，而不会造成视觉干扰。

寻找最佳背景颜色

首先创建方形色板，使用颜色选择器选择一个色调，并将其设置为最大亮度和饱和度级别。当你调整它的亮度和饱和度时，这个色调将保持不变。

使用相同的色调创建四个具有较低饱和度和亮度的新色板。降低两个色板的饱和度，并降低其他两个色板的亮度。使用10的倍数并展开，以便您有广泛的范围。使用饱和度/亮度比标记每个色板。

将饱和度样本放置在色调样本的左侧，并从最低饱和度到最高饱和度进行排序；然后将亮度样本放置在色调样本的右侧，并从最高亮度到最低亮度进行排序。

这些颜色还不是最佳的，因为它们仍具有100％的亮度或饱和度。相反，它们将作为寻找更佳色彩的基线。

通过降低第一层中样本的亮度和饱和度来创建第二层样本。为每组样本降低相同数量的级别，以使第二层颜色中没有一个具有100％饱和度或亮度级别。

如果您对第二层不满意，可以探索更多颜色。再次降低级别以创建第三层颜色。现在您有八种最佳颜色的调色板，可选择不同的亮度和饱和度。

好的和坏的背景举例

以下是一些网页背景的例子，注意你能在好的页面和坏的页面上停留多久。

美学与可用性

颜色会影响设计的美感，也会影响设计的可用性。设计师需要同时关注这两方面，并让他们一起工作来取悦眼睛。你不必为了美观而牺牲可用性，因为你可以同时创造一个好的界面。