（翻译）避免使用明亮、饱和的背景色的原因

背景色的原因"/>

（翻译）避免使用明亮、饱和的背景色的原因

  你设计的界面中是否采用了会让用户视觉疲劳的颜色？如果界面背景使用明亮、饱和的颜色，用户很难将注意力集中到页面中。
  明亮、饱和的颜色最能吸引用户，但应用在大块页面区域会过度刺激视网膜，造成视觉疲劳。

  以上图的色板为例，左列的颜色亮度和饱和度均为100%，而右列仅为80%。由于明亮的饱和色对眼睛的刺激更大，用户对左侧颜色的容忍度要低于右侧颜色。

亮度 VS 饱和度

  亮度和饱和度属于颜色的不同属性，前者指定颜色中混合了多少白色或黑色，而后者指定颜色中的灰色量含量。
  增加亮度不等于降低饱和度。降低饱和度会逐渐将颜色转为灰色，而增加亮度会让颜色变浅，但不会转为灰色。

颜色对注意力和唤醒的影响

  一项名为“色调、饱和度和亮度的影响”的研究发现，具有高饱和度和亮度的颜色最受关注。研究表明，饱和度和亮度在吸引注意力方面比色调更重要。
  另外两项研究：“颜色饱和度的唤醒效应”和“颜色和情感”，发现明亮、饱和的颜色与高唤醒度有关。色调也会影响唤醒，但饱和度和亮度的影响更为显著。

按钮采用明亮、饱和的颜色

  明亮、饱和的背景色能吸引用户的注意力，但不会长久。这就像对着用户大喊大叫，虽然能引起他们的注意，但他们很快就会把目光移开，因为背景色太刺眼。
  明亮、饱和的颜色应用于需要用户操作的界面元素上（如按钮），让它们能引人注意，用户想要操作时可以快速找到它们。

背景采用深一些、饱和度低的颜色

  最好让背景色深一些、饱和度低。降低亮度会减少颜色混入的白色，减少饱和度则会增加颜色中的灰色量，减轻对眼睛的刺激。
  不仅如此，背景采用深一些、饱和度低的颜色，不会抢了页面文本或内容的风头。这种软化更易于用户浏览页面，不会产生视觉干扰。

背景色设计的正面和反面案例

  以下主页背景设计案例展示了造成视觉疲劳的反面案例和缓解眼疲劳的正面案例。注意注视正面案例和反面案例所需的时间。

   上图展示了绿色在Panic网站和Prismic网站中的错误使用方式， 同时在FreshDesk网站和Sigstr网站中的正确使用方式

   上图展示了红色在 Telepath网站和Meat网站中的错误使用方式， 同时在 AppFigures网站和Jackie网站中的正确使用方式

   上图展示了蓝色在Compose网站和DareIt网站中的错误使用方式， 同时在Republic网站和MailTag网站中的正确使用方式

美学&可用性

  下次确定背景色之前，应考虑颜色对用户的视觉影响。背景色的亮度和饱和度是否优化过？用户能否方便地浏览页面内容？
  颜色影响设计的美感，同时也会影响可用性。设计人员应兼顾美学和可用性，以求设计能赏心悦目。如果能基于美学和可用性设计出优秀的页面，大可不必为了美学牺牲可用性。

原文地址：/

参考文献
[1].html