恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
如何正确的使用背景色
0.0°
2018-07-27 自译外文 经验/观点 原作者: anthony 举报 3076 7 11 1

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


Image title

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


亮度和饱和度

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

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

Image title


颜色对注意力的影响

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

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


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

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

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

Image title


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

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

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

Image title


寻找最佳背景颜色

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

Image title

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

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

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

Image title

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

Image title

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


好的和坏的背景举例

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

Image title

Image title

Image title


美学与可用性

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




更新:2018-07-27

收藏

7人已收藏

  • 12

    作品

  • 19

    粉丝

  • 6

    关注

  • 切换开关 设计指南
  • 交互设计名词收录
  • 五个步骤寻找和解决用户痛点
  • 交互专用名词大合集

    猜你喜欢

      2018-07-27 自译外文 经验/观点 原作者: anthony 举报 3076 7 11 1

      如何正确的使用背景色

      0.0°

      你确定要举报如何正确的使用背景色

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年07月27日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      11
      7
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录