电商资讯

如何正确的使用背景色

日期: 2018-07-27 15:19 访问量: 类型:

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

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

亮度和饱和度

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

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

颜色对注意力的影响

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

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

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

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

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

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

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

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

寻找最佳背景颜色

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

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

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

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

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

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

好的和坏的背景举例

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

美学与可用性

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

淘宝网合作伙伴奖

商家后台金牌淘拍档

年度金服务合作伙伴