用户界面设计中，颜色的饱和度和明度

前言

作为一个设计师，可能经常听到别人说，“这个好具有视觉冲击力啊！”，或者需求方直接就跟你说：“嘿，能不能帮我设计一个具有视觉冲击力的界面？”。

什么是视觉冲击？

简单来说，视觉冲击就是运用视觉艺术，使你的视觉感官受到深刻影响，能给你留下深刻印象。单纯从网站设计来说，可以构成视觉冲击的可能就是色彩（包括图片）、形状（包括文字、点、线）、动效（包括转场动画、反馈效果），下面就仅仅从颜色的饱和度和明度浅浅探讨一下。

例子一

说到视觉，就绝对离不开颜色。关于色彩的研究，太多太多。最简单的，我们可以用大色块的对比，来造成视觉冲击！但是，因为色块不像线条，色块的有一定的面积区域，一旦用不好，分分钟毁了整个设计。请看下面这个图。

同样的大小，是不是觉得右边的图比左边看的更加舒服了？没错，左图是我在一个六合彩的网站取下来的颜色，就是我们通俗所说的“很low”、“很刺眼”的效果；右边通过调整每个色相的明度和饱和度之后，产出的一个比较舒服效果。而且，基本上我们在取色板上面，用鼠标点点点找颜色，就是在改变当前这个色调的饱和度和明度(亮度)。

从上面的图我们可以看到，左图那个“很low”的图，饱和度和明度都很高！降低了饱和度之后，视觉效果好了一些，但是还是给人“很亮"的感觉，比较刺眼；降低亮度之后，发现比原来的图貌似更丑了，俗称很”脏“，所以当饱和度很高，就算明度很低，也会让设计变得很”脏“。以后在设计的时候，可以注意一下，色块填充的颜色，这两个值可以同时平衡一下，不要设太高。

例子二

但是的但是，这也不是绝对的(打脸)，一种颜色，要跟其他颜色在一起，才能产生视觉差是不是？那这里就要看我们要什么效果了，要和谐，还是要强调？最典型的例子是mac电脑上面，窗口左上角那三个按钮！

这三个颜色，亮度都非常高！这样是为了让用户在一个繁杂的页面中，可以快速找到他们，也就是我刚说的“强调”！同时，这三种颜色在一起，希望它们分别独立，彼此不强调太多，选色就会趋于三个色的明度和纯度差不多，这就是所谓的“和谐”。

（细心的同学可能会发现，绿色相对于其他两种颜色，明度和饱和度都稍低一些，那是因为在同等明度和饱和度下，绿色会看起来更亮一些，所以会把这两个值都稍稍调低，以达到和谐。这里会扯到人眼的视觉误差......能力有限，暂时不展开叙述）

简单的做法

天啊噜！无穷无尽的浩瀚的色彩学知识，学都学不完啊~那么，在不是很有视觉背景的基础上，有没有简单直接做法呢？

当然有！

1.在Dibbble上，找到比较符合自己产品的项目，直接取颜色！

2.网上很多关于配色解决方案的优秀网站，这里推荐两个：

[material palette]

[Adobe Color CC]

在视觉的领域，还在婴儿学走路！哈哈