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

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

作者: Doria2016 | 来源:发表于2018-06-14 11:39 被阅读2236次

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

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

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

    明度VS.饱和度

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

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

    色彩对注意力的影响

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

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

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

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

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

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

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

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

    寻找最佳的背景颜色

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

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

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

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

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

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

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

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

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

    美学和可用性

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

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


    原文链接

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/xrgeeftx.html