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

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

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

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

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

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

明度VS.饱和度

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

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

色彩对注意力的影响

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

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

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

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

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

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

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

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

寻找最佳的背景颜色

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

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

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

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

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

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

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

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

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

美学和可用性

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

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


原文链接

相关文章

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

    你是否为吸引用户眼球选择界面颜色? 如果您的背景使用的是明亮且饱和的颜色,则会让用户将很难将注意力放在界面上。明亮...

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

    你是否为吸引用户眼球选择界面颜色? 如果您的背景使用的是明亮且饱和的颜色,则会让用户将很难将注意力放在界面上。明亮...

  • 关于material-design的笔记

    颜色 颜色不宜过多。选取一种主色、一种辅助色(非必需),在此基础上进行明度、饱和度变化,构成配色方案。 Appba...

  • 使用css3背景渐变中的透明度来设置不同颜色的背景渐变

    使用css3背景渐变中的透明度来设置不同颜色的背景渐变 为了添加透明度,我们使用 rgba() 函数来定义颜色结点...

  • 如何设置网页背景透明度而不让内容透明

    使用rgba() 背景无图片,只是设置背景颜色的透明度 背景有图片 使用 background: rgba(255...

  • ps教程: 树叶替换颜色

    颜色替换”,选中图像中特定颜色,可以修改色相、饱和度、明度。颜色调整方式则与“色相/饱和度”命令是很相似。 原图 ...

  • 2018-04-11

    饱和度是指颜色的深浅,明度指亮暗。 可以看看定义: 饱和度(纯度)(Saturation) 彩色强度的浓度。饱和度...

  • 2022-05-06

    明度:由暗到亮 纯度:饱和度、艳丽到灰 色相:就是各种颜色 公式一:单色搭配,改变明度和饱和度 公式二:临近色搭配...

  • 【UI设计基础】色彩3要素

    UI设计三要素:色相,明度,饱和度 一、色相 色相就是色名,比如:红色,黄色,绿色等等 二、明度 明度越高越,颜色...

  • 色彩学习

    (色彩基本三要素:色相,饱和度,明度。 色相:颜色的基本属性,通俗讲就是什么颜色,比如红蓝绿等。 饱和度:就是鲜艳...

网友评论

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

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