如果你在做颜色练习时持开放的态度，并且不只局限于深色色调，那么你很有可能尝试过在设计中加入渐变。那一刻你感觉如何？你喜欢最后的结果还是纯色的吗？

上面我为 Tubik工作室 设计的一些概念。第一个每个框里用了不同的渐变，第二个则只有固定颜色填充。

当然，你不会为所有案例找到一个正确的答案。但是从这两种方法中可以获得许多好处。这就是为什么我想要分享这些使用渐变的经验。

首先，让我们学习一些基本的原则：

显然，在一个渐变上使用另一个渐变效果是很不确定的。虽然这仍然是可能的，但你会发现在这种情况下很难突出重点。这两个层都努力获得主要吸引力，因此战斗开始了。

第一个背景渐变可以看到有多个主色，而实际上在渐变的底部只有3个颜色点——青色，鲜艳的洋红色和橙色。

在这个例子中，背景渐变中有变化的颜色。过渡是非常柔软的，甚至不会注意到中间的新颜色。

虽然背景很轻柔，但白色并不是很突出。当然，如果你需要相反的结果，你甚至可以减少不透明度。但别忘了检查对比一下。

在这里，背景渐变是用一种颜色（蓝色）来创建的，它的色调是浅蓝色。这种方法是安全的，你可以选择一种颜色，然后寻找浅色、阴影或色调。但是在这种情况下，你可能不会在表达方面突出。这种类型的渐变可能看起来太过平静。需要想想这是不是你在设计中需要的确切情感。

我最爱的两种颜色，叠加产生强烈的渐变。这与白色文本的对比是完美的，令人心情愉快。

如果你需要做一个动作，在某一区域吸引人们的注意力，不要害怕使用强烈的颜色，你会得到一个大胆的、独特的解决方案。

渐变磁场

为什么我们实际上倾向于在设计中使用渐变？简单的解释是，渐变为你的工作带来了更生动的画面。看到颜色更自然的转变，就像我们周围的世界一样，也会观察到同样的事情。

下面的例子展示了在 web 中使用渐变的不同方法。

在任何时候，最好的例子之一——Stripe——展示了如何在 B2B 中使用渐变。页面的一半使用渐变，而另一半则遵循最简化的方法，达到了平衡。

另一个经典——Mixpanel 的网站——背景柔和的渐变和基于渐变填充的细致插画。插画在页面上扮演主要角色，而背景则是对它们的补充。与此同时，CTA 按钮是实心的，与背景有很大的对比，因此吸引了我们的注意力。

纪念碑谷的开发者——Ustwo 使用渐变来突出显示信息。页面上没有太多的元素分散注意力，这个口号足以吸引了你。

即使该平台有明确的意图来获得全世界的欢迎，它仍然不害怕使用这种游戏元素作为渐变。

干净

寻找完美的颜色来创造一个渐变，有时会得到不好看的结果。我们不是在一开始就选择了纯色吗？

但是如果你选择了一对互补色（Itten 色轮），可能会得到那种难看的颜色转换。

中间的颜色看起来很脏。在这种情况下，你可以改变其中一个主要的颜色（1和2列），或者在中间添加一个点，然后移动到清晰的颜色（3列）。这很简单!

S 代表平滑

如果你创建了一个渐变，并注意到中间有一些线——并不确定它是否正确。

当你得到这样的结果时，必须改变渐变，最终得到更加平滑的效果。

为了达到这个目的，应该花些时间在渐变的中心区域添加点，并稍微把它们从中心移动到顶部或者底部。同样，每次从中心向外添加点，并以同样的方式移动。重复这些动作，直到看到这条线消失了。然后，顺利实现了。

替代

如果你仍然不想宣称“渐变至上”，并且不想被称为“渐变迷”，还有另一条路可以走。实际上，我很喜欢尝试这种技术渐变，因为它增加了深度和多功能性的感觉。

在下面的例子中，可以看到 logo 中渐变的运用。

Cloud Vision 的标志。

一开始创建一个渐变。要有耐心，这是最终结果的基础。然后稍微改变中间的颜色，以便有更清晰的浅蓝色。在那之后，将这条线分成几个块，并从相应的部分中选择颜色。

另一个需要记住的是最终的颜色取决于是否有空间（如最后一张图片中的矩形），或者像 logo 中一样溢出，你会得到完全不同的图像。尝试这两种方法，看看哪一个更适合于特定的项目。

结论

在这篇文章中，介绍了一些使用渐变的基本原理，这是我通过实践实现的原则，还有更多的技巧需要学习。一些设计师会说，渐变是今年的趋势，其他人会认为这是一个已经过时的东西。我个人认为如果你知道如何使用它，它是一个很好的工具，可以丰富你的设计。依靠趋势不是正确的解决方法，你的专业观点和经验要更加珍贵。不断练习，找到全新的结果。

感谢阅读！

原文链接：https://medium.muz.li/oh-mamma-im-in-love-with-gradient-c81943e3c92b

作者链接：https://medium.muz.li/@luda_shevchenko