白糯玉米面怎么做好吃？
280人在看初级中级讲师： 活力网
本课程由活力网创始人、前CCTV居家好设计师、知名设计博主、CSDN论坛推荐导师——李韬老师为大家讲解如何通过修改参数的方式来提升UI设计的审美，主要讲授优化图标配色与构图技巧。
观看地址：URL 大家好，我是李韬！最近很多朋友问我关于【如何运用色彩视觉常识来提升自己的 UI 设计水平】的问题，应大家的要求，特意写了这篇文章，希望对大家有所帮助！
1. 色相/饱和度 /明度三者的关系如何协调？（图1） 在制作图标时，往往需要把握色相、明度、饱和度的关系，那这三者有哪些需要注意的讲究呢？（注意：此处所讲的“色相”并非颜色中“色相”的概念，而是指色彩倾向）
首先，我们需要清楚一个重点：在 CMYK 四色印刷中，所有颜色的色相都是独立且唯一的存在；同理，在 RGB 彩色显示器中，所有颜色的色相也是唯一且独立的。 这个概念可以这样理解：将一张白纸放入彩色打印机中，按照色相值的大小分别打印出 CYM 三原色的墨水，则必然有且仅有一个混合色出现。也就是说，如果我们对某一种颜色的色相值确定，那么该颜色的组合方式也只有唯一的一种。这就是色彩中的「加法混合」原则。（注：这里所说的「色相」是色彩倾向的意思，而非「色相盘」里的色相）如图1所示，当我们将 R G B 三原色的亮度值都定为 50% 的时候，由于 R=G+B 的「加法混合」原则，最终得到的混合色也必然是「R=G=B」。
如果我们想使两个或多个色块相互融合，而不至于过于生硬，那么应该保证它们之间色相值的相近性。而在具体数值上，我们最好能够给它们设定一个色相环上的位置差（如 30°～45° 左右）。这是因为色彩心理学实验表明，当我们看到两种类似的颜色相邻摆放时，我们的眼睛会下意识地将它们统一起来，而将其中较小的部分忽略掉。两个颜色若非纯黑色与纯白色的情况下，它们的色相值越接近，混在一起后视觉效果越自然。反之，色相值相差较大的两块颜色放在一起，则会显得很不自然。如下图2和图3所示，虽然 55 和 75 度看起来差异较大，但毕竟它们是相对接近的橙黄色，所以一起放能很好地融为一体；而 66 和 90 度的绿色，虽然较为接近，但视觉感官上仍能明显分辨出两段不同的绿色。
除了色相值外，饱和度也是一个重要的影响因素。一般来说，我们应当确保图形中色彩饱和度和明度值最大的区域不超过 80%。当然这也并非绝对，视具体情况而定。因为过高的饱和度会带来轻躁的感觉，对于界面来说并不是最佳选择。如图4所示，这个界面的所有图标，我全部使用最饱和的色彩，结果反而感觉不太舒服。但如果像图 5 那样降低一下饱和度，效果立即变得理想起来。这即是饱和度过高带来的问题。
2. 颜色对比度/明亮度的平衡怎么掌握？（图6） 在上面那个问题中，我们已经提到了饱和度的因素。除了饱和度之外，影响画面平衡的一个关键元素是「对比度」，也就是颜色之间的反差大小。 前面我们讲到，在 CMYK 中，所有颜色的色相都是独立存在的，因此每一种颜色都可以用 CMYK 四色值表示。同样道理，在 RGB 中，所有的颜色也能用 R G B 三色值表示。这三个值分别是红绿蓝三原色的分量，分别占整个颜色的比例，取值范围都是 [0，1] 。
为了便于表述，我将采用如下约定： 如果一组颜色的对比度很低，那么我们称这组颜色为同一色调。例如，图6中所有圆角方形组合后的效果，就是同一色调。因为它们的颜色差异很小。 对比度低就意味着画面很灰，感觉不清晰。所以我们必须想办法提升图像的对比度。
那么，如何让一幅画面的对比度提高一些呢？有一个很简单的方法：降低该画面中有对比度提升需要的地方的亮度，同时升高其周围的亮度。这样做就能自然地增强画面的对比度了。如图 6 所示，我们只需要把 50% 亮度的橙色，变成 30% 亮度即可。