2023年为什么你设计的配色方案都不太好看

为什么你设计的配色方案都不太好看？艺术家亨利·马蒂斯曾经说过：“颜色给予人魔法般的能量”。

每个人都知道学会魔法最简洁的方法是牺牲一只山羊，但我们却不能为了设计出好的用户界面去这样做。

幸运的是，在UI设计领域，我们可以更敏捷地运用颜色：颜色可以向用户传递肯定的信息，影响他们的选择甚至是感受。并且由于没有“山羊”必需被牺牲，因此可以100%地随便使用颜色。

明显，颜色理论并不是一门晦涩难懂的学科：它几乎是大多数艺术和设计课程第一学期的东西，并且假如你正在阅读这篇文章，可能你已经至少对它有了一个基本的了解。

然而，我们肯定能忽视颜色所具备的潜力。尤其是在UI设计领域，奇妙地使用颜色可以引导用户以你盼望的方式使用某些东西，或者它是劝说潜在客户连续向下滚动你的登录页面的关键因素。拥有现有配色方案的品牌可以思索如何使用它们从而受益。新的应用程序可以利用颜色脱颖而出，也可以融入到现有的APP中。

简而言之：设计时，颜色应当时刻在你的脑海中。

以下的配色方案选择的案例，讲解了我是如何在设计中将其付诸实践的，以及它是如何关心每个项目实现其目标的。

声明：在这篇文章中，我将以英式的方式拼写colour(颜色)，而且“u”在整篇文章中随处可见，所以泡一杯茶，拿一包麦克维蒂消化饼干，然后连续阅读……

你好西雅图

但我们如何在UI设计中使用单色配色方案呢？

首先，很难找到真正单色的用户界面，由于大多数时候都有灰色阴影，以及区分用户交互动作胜利和错误的颜色，这些颜色都必不行少。

实际上，对于简洁的界面来说，只有一种主色有助于强化你的品牌信息。我最近设计的一款自定义边框图像生成器APP就运用了单色配色方案，以创建最小化且清楚的外观：

单紫色配色方案

这个案例中我只在Logo设计运用了主色调紫色，在APP本身的设计中用不同色值的紫色作为呼应。这是个简洁的APP，因此使用单色制造了一个简约的品牌印象。

但是要留意，随着界面变得简单，主色和强调色对于区分静态元素和交互元素起到重要作用，需要更奇妙的配色方案…

颜色世界中的两极相吸

互补色是最受欢迎的颜色方案之一，由于这种组合有着充分的原理支撑。互补色在色轮上相对而坐彼此吸引，就像千禧一代观看《老友记》重映一样。

HyeRyeongOh发表于Unsplash

上图中的水母和海水，就是特别有视觉冲击力的颜色对比。用苛刻的甲方的话来说，这种配色方案能让作品变得“流行”。

在UI和品牌设计中，互补色很符合现有的设计惯例：有一个主要的品牌色和一个帮助色。

比如标志性的宜家蓝黄，或者喜力的（世界闻名的荷兰啤酒品牌Heineken）绿红。

当设计用户界面时，尽量保证在页面的主体部分只使用一种颜色，这样就不会让用户眼花缭乱不知所措。

下图是我最近为一家寿司店设计的网站，每个页面都有一个主色，而互补色恰到好处地突出重点，吸引用户的留意力。页面的颜色变化有助于制造用户的视觉焦点，并供应视觉变化防止用户对颜色产生视觉疲惫。

寿司网站设计

当然，假如常规的补色方案不足以体现你的设计共性，还可以选择补色分割方案。

补色分割方案

下图的阿姆斯特丹街景绘画中，我运用了补色分割的配色方案来区分自然河流、树木和人造街道。

阿姆斯特丹街景

建筑本身也用了许多白色，这里有一个要点：不是全部的东西都需要上色。事实上，在你的设计中恰当地留白起到了强调颜色和内容的作用。下图将给你展现一个在UI设计中运用这个方法的案例：

PhilCohn的个人网站

这个作品里我不仅大量使用了留白，还使用了和阿姆斯特丹绘画中相像的补色分割方案。

此外，确保一个页面只让一种颜色主导，由于太多的对比色会让人产生视觉负担，对于每个部分，也使用一种颜色为主，就像纯素寿司的官网一样。这也让你可以加入更多颜色细节，例如下面背景中的三文鱼配色与阿姆斯特丹房子相呼应。

阿姆斯特丹系列插画

对比色是吸引留意力的好方法，但在这个信息轰炸的时代，你想传递安静的心情呢？看起来是属于同类的邻近色配色方案是最好的选择。

相像的颜色聚在一起，就像南极的企鹅一样

想想我们身边连成片的树木，一望无际的草地，沙如雪的大漠。完全不需要色轮的另一边来凸显他们的存在。在下图中我运用了邻近色原理来制造和谐的感觉：

乡村的小路插画

食品品牌中常常使用这种配色方案，尤其是有机食品。它们也可以很简单地应用UI设计中，就拿我为一个餐馆