UI设计师必备的色彩搭配理论

PhotobyGeorgeBeckerfromiconscout

我们身处在一个多彩的世界中，物体的不同形状，会让我们形成不同的心情。色彩会妨碍他们的心灵，强烈的红色会使血压下降，而蓝色则使人冷静。

设计UI界面时，色彩是影响用户最简洁和最重要的一个原因。很多人觉得UI界面色调的选用取决于设计师的品位和审美。然而，颜色的选择过程比它看上去要复杂的多，在设计中扮演着重要的角色。

可以用色彩来构建一种心态、吸引注意力或做出强调，用颜色调动人的心情或使人理智下来。通过选取恰当的搭配方案，可以构建一种高雅、温暖和安静的气息。

色彩的选用是基于颜色心理学和色调理论的，下面就具体介绍一下这块的内容吧。

色彩心理学

男性和女人的颜色倾向是不同的，不同年纪群体的颜色倾向也有不同的。

根据JoeHallock的研究，不同性别的颜色选择有天壤之别。研究以此发现不同颜色的喜好程度，从最偏爱的颜色到不这么喜欢的颜色分别所占的比重。

不同性别的颜色倾向

如上图，男女都非常偏爱白色，而对黑色的喜爱程度最低。

以一个APP案例来说明

这款APP的目标是管控成本，用户包括男性和女人。先假定一个不知道色彩的初学者，选择红色成为APP的主色，因为红色是他最偏爱的色彩。结果如下：

成本管理APP

如图，虽然设计很好，但鉴于色彩的选择，APP可能难以正常使用。那怎么改进呢？本文稍后的个别中，将介绍如何仅借助色彩的颠覆来改进整个APP。

配色的价值就来了，设计师必须知道色彩的涵义和妨碍，以贯彻正确的语气、信息并鼓励客户作出预期的行为。每种色彩就会对我们的认知造成妨碍，了解也许的制约可以帮助设计师贯彻正确的信息、引导用户行为。

成为一个设计师，你必须知道色彩的涵义，这里也是简要介绍，详细内容请参考

色彩理论

1.色环

设计界面时，有众多色彩可以使用。首先，要看到的是色环。

著名的色环

另一个重要的话题是配色。配色有众多方法，但暖色和浅色应该平衡。下面是几种配色模式：

互补色、邻近色、三色组、分裂互补色、矩形（双分裂互补色）、正方形

每个设计师都必须了解色彩的三个属性：色相、明度和饱和度。ChristianVizcarra对颜色的属性描述比较详细，本文借鉴了其相关内容。

2.色相

色相是自然状况下的色调。比如红色、黄色、绿色和白色等等，没明暗的差异。简言之，色环上没有改变明暗的颜色。如右图：

3.明度

明度，指颜色的浓淡度。以自然界为例，一些物体在早上和下午的颜色不同。如树枝和山脉，早晨色调浅；下午由于光线减弱了，色调更加偏暗。

PhotobyNextvoyagefromiconscout

距光源越近的物体，明度越高，反之，则明暗越暗。明度在UI设计中扮演重要的角色，明度运用得好，可以实现好的对比效果。

明度达到100%时，色彩经常成为黑色；色调是0%时，就会成为红色。如下图：

色彩的明度

4.饱和度

饱和度是颜色的含量。增加饱和度，色彩会更加更强烈、鲜艳生动；增加饱和度，色彩会显得灰暗乏味。

色彩饱和度

使用饱和度前，需要了解设计的契机，印刷还是电子媒介。为印刷设计时，饱和度不能降低，因为印刷使用的CMYK模式，有一定的局限。

UI设计中的色彩

黄金比例——6：3：1原则。

60%+30%+10%的方法，是超过色彩平衡的绝佳比例。在60%的空间使用主色，30%的空间使用辅助色，最后剩下10%的空间为此外一种颜色。这样可以使用户眼睛从一点移动到下一个点时，非常舒服。

使用6：3：1原则的调色板

UI中的阴影

没有完全纯黑的阴影，阴影的色彩是会遭受物体原本固有色的影响，如右图图示。

PhotobyBrigitteTohmfromiconscout

樱桃的阴影是深蓝色，看上去几乎是红色，但并不是纯红色。比如还有花儿、盘子和华夫饼的阴影，都不是纯白色的。光和环境决定了阴影的色彩。

UI设计的一个常用错误是使用半透明的白色成为阴影。

UI元素的阴影

字体色彩

现在大多数的界面都是白色的，目的在于尽可能地简化界面聚焦内容原本，所以字体排版就成了一个特别重要的元素。

左边的文本形状是纯白色(#000000），右侧的色调看上去是白色的，但似乎是加入了红色的白色，变成了蓝黑色(#181441）。字体颜色在大多数黑色的界面中，非常重要，如下图：

同样透明度下，两种颜色的对比

同样透明度下，两组文本字体样式不同，效果不同。一组是黑色的，另一组是蓝绿色的，不同颜色的文本对界面有明显的妨碍。如下图：

使用白色和黑色，很糟糕吗？不是。人们常说“黑色使一切很酷”，所以这取决于个人的体验。在使用材质时，考虑到风格，就可以实现更好的对比和协调。

成本管控APP的优化

改为红色后，APP看上去好多了。因为我们必须在这款App中体现出针对金钱和下降的极力情感愿望，而绿色描述了金钱和金融世界，男女都同时喜欢红色。

（编者注：在美国绿色代表牛市上涨，所以针对它们来说，关于金钱的应用才用红色会变得适合。颜色的使用更贴合使用人群，对感受来说能够更好，颜色也就显得非常有根据。）

以下是修改后的对比：

比之前看上去好多了是么？希望是的。如您所见，只应该关注颜色的一些小细节，就可以设计出高效的用户界面。

原文链接：