关于UI三色配色的心得

转自:海盐社(ID:hys-ssc)

作者:w.t.y

设计师做UI设计时，经常会遇到不会配色的问题，最近看到一个外国UI设计师的系列文章，对配色有所启发。故翻译出来供大家参考。这样我们以后不止是仅仅吸取别人的颜色，自己没有配色的主观意识。

在此之前我们先理解一个概念--色轮，它是人能识别的圆形排列的色相光谱。每一种色相都是一个基色。

 

其中两种色相相差15 30 60 90 120 180度分别叫同类、类似、邻近、中差、对比、互补色。

有了这个概念我们再看下面的正文(局部有改动)

我在不久前做了一款音乐播放器应用。我找了数百张图片，去找到合适的配色方案。这是一项长期而辛苦的工作。现在我发现了很多以前从未使用过的新颜色组合，也有一些心得体会。

通常默认的色板很适合用户界面设计，但情况并非总是如此。三色相配色，比起双色配色，因为每种颜色都必须完美地补充其他两种颜色，难度较大，色彩平衡与和谐是关键。

 

我发现了一些非常棒的三色配色方案，当把这些设计放在一个色轮上，发现所有这些组合都可以分为三类:1.所有三种颜色相邻，2.两种颜色相邻，另一种相反，3.三种颜色相对。我在一本关于色彩理论的书中找到关于这样的颜色组合的专业术语:邻近色、互补色、对比色。所以这些组合可以分成3类:类似色、分裂补色、三角对立。

1.类似色配色

 

A.这是通过使用色轮上相对接近的三种颜色创建(3种之和＜90°)。例如，如果您选择主色为红色，则其余2种可以选取橙色或棕色。大部分类似色之间很和谐，但除了暖红色和粉紫色，把它们配在一起像腐肉鸟的心脏。而所有蓝色，绿色和紫色之间都可以很好地相互配合，只不过有些颜色组合更亮，有些更暗。在此需要注意1点，建议大家先从大自然的照片中获取灵感，之后再用色轮。因为用鼠标在色轮上随意滑动去选择太难。即使有天赋，也需要大量时间精力训练才能达到你想要的效果。

 

B.如果已经选好了类似色的两种颜色，吸取在他们中间的颜色作为第三种配色。我认为这是找到三色配色的最和谐也是最简单的方法。

 

2.分裂补色配色

两种颜色为类比色，第三种颜色与他们形成对比。一些经验套路可以提供参考，如:黄-红粉色，蓝-绿色，绿-紫的对比色非常有用，红色与绿蓝紫色的效果非常好。这些只是一些例子。可能性延伸到人类感知的边缘。

 

这里推荐一种便捷的方法。首先，选取你想在设计中使用的两种互补颜色，然后在其中一个颜色旁找到第三种颜色。例如，你想要有黄色和紫色，我会建议你从紫色的一边添加粉色或蓝色，或从黄色一边添加绿色。如果你使用正确的饱和度和对比度，所有这些颜色都能搭配协调。

 

3.三角对立配色

 

三角对立是由色相环上相互60°的三种颜色组成。这是更多样化的配色方案之一，也是最困难的。这里有一些和谐的搭配:绿+黄色可以配各种色调的红、粉、紫或蓝色。我的这些灵感来自于基本的花卉配色:绿叶、五颜六色的鲜花加上黄色雌蕊。或者，我们可以从黎明和日落时的天空获取灵感，它有很多不同的丰富多彩的组合:蓝+紫+橙; 红+黄+青等。

 

从大自然中获取灵感

关于更多从大自然获取配色灵感，在我的另一篇文章里有详述(https://uxplanet.org/the-secret-of-great-gradient-2f2c49ef3968)

“颜色不单是红，绿和蓝的简单叠加。事实上，使用颜色选择器找到合适的颜色真的很难。大自然的美丽照片总是我工作的一个重要灵感来源，它帮助我学习了很多关于颜色如何配合的知识。我认为如果每个人都关闭颜色选择器并打开风景、植物、花卉和天空的照片，那么每个人都可以更轻松地找到完美的配色组合”。

此外，我想与大家分享如何从大自然中提取颜色的简单方法。例如，您从自然中找到一些美丽的图片:

 

 

随后，您可以将此图片上传到Adobe Color CC网站(https://color.adobe.com/zh/create/color-wheel/)

 

这样很方便就把一张图片的颜色提取了出来。

总结

以上我根据之前的项目经验总结了一些自己的配色方法。

1.类似色配色

可以3种色相的角度之和＜90°，也可以先找到两种和谐的过渡色相，再选取他们中间色相作为第三种。

2.分裂补色配色

先选取两种互补色，再选择其中一种相邻的类比色形成三色搭配。

3.三角对立配色

以相互60°角的等边三角色相形成配色。

4.从大自然获取灵感

搜集美丽的自然图片上传到Adobe Color CC网站提取配色方案。

 

原文链接:https://stories.uplabs.com/best-three-color-scheme-for-music-player-5da996d7f460