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

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

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

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

明度VS.饱和度

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

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

色彩对注意力的影响

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

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

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

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

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

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

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

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

寻找最佳的背景颜色


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

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

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

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

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

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


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

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

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


美学和可用性

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

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



原文链接

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,444评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,421评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,363评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,460评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,502评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,511评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,280评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,736评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,848评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,531评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2 352

推荐阅读更多精彩内容

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