当你为用户体验设计公司工作时，你会发现行业趋势的周期性。就像时尚或艺术一样，过时的风格不可避免地在几年后重新出现，只是被主流所接受，并且再一次陷入废止。

 

在数字设计领域，可能没有比渐变的上升和下降（以及上升）更好的例子。考虑到九十年代界面设计的关键（有多少地理位置网站有梯度艺术字标头？），这一趋势可能会更早。考虑这个标志性的标志：

 

 

“回到未来”是近期刚刚出现的设计潮流的一个典型例子，最着名的可能是2016年Instagram徽标的重新设计和Spotify的双音调播放列表图标。渐变在用户界面设计领域变得越来越流行，并且有充分的理由 - 它们为界面注入深度和纹理。它们提供独特的，甚至是相互冲突的角色：渐变逼真地模仿我们周围看到的颜色（很少在现实世界中遇到单色），但它们也可以用来创建我们以前从未见过的颜色模式。

 

如果使用不当，渐变会引发设计灾难

 

渐变是一种强大的设计技术，强大的功能带来了巨大的责任。如果使用不当，梯度会导致设计灾难。他们可以混淆布局，分散用户，并破坏界面的整体美感。在本文中（在我的可靠团队UX设计师的帮助下），我们揭示了制作渐变的秘诀，将您的界面提升到下一个梯队，而不是提醒用户1997年。

 

从一个坚实的基础开始
 

无论是双音还是多音，每个渐变都只有基色。就像所有基于色彩的设计选择一样，当选择正确的色彩轮时，我们可以参考色轮进行指导。

 

不要担心，您不需要成为色彩理论专家就您的渐变做出谨慎的选择。一般的经验法则是选择彼此接近的颜色，从而使它们更自然地融合在一起。UX Planet包含了一个很好的图表，看看如何将从黄色到橙色的过渡与绿色紫色进行比较。

 

 

为什么车轮上的接近色彩在视觉上很吸引人？也许是因为那些是经常出现的渐变。这为我们带来了UI设计师的一个极好的商业秘密：将自然视为灵感的源泉。

 

在自然中的梯度
 

我们在日常生活中不断遇到梯度：天空，日落，水体。无论我们在世界的哪个角落，天空都是极好的素材。只要看看令人叹为观止的天然设计师安娜·格伦（Anna Grenn）的陈列柜，就可以看到他们伴随的彩妆。

 

虽然天空可能是最常见的来源材料，但没有例子能够结束。你现在可能有一种自然的渐变。现实生活中的颜色并不是整齐地填充在线条内部，而是混合在一起。

 

把它带到下一个层次
 

因此，假设您现有品牌的颜色并不完全有利于渐变。或者，也许你的标准双色调梯度根本不会削减它。不要害怕：为渐变注入更多色调是增强其视觉兴趣并更好地区分你的UI的好方法。

 

正如你想象的那样，当色彩轮上的开始和结束颜色落在一起时，其他颜色会流动得最好。重温UX Planet的相同图表：

 

 

只需要注意：您添加的颜色越多，渐变越复杂，设计平衡越困难 - 您必须执行的操作。你可以瞄准高点并拍摄像Instagram徽标这样的多层次渐变，但是会过度，最终可能会更接近这种故意丑陋的MTV网页设计。

 

光源和形状
 

即使在确定了完美的色彩组合之后，仍然存在将其实际应用到设计中的问题。首先，一些基础知识：

 

渐变应该与他们的容器对齐，勾勒出布局并指引用户的眼球应该指向的位置。对于x边多边形（正方形，三角形，矩形，五边形等），这通常意味着线性梯度; 圆形区域需要径向。

 

一些UI设计师喜欢为他们正在处理的页面分配一个虚构的“光源”，就像画一幅风景画的艺术家一样。这有助于他们决定如何定位渐变 - 较轻的一侧应该更靠近光源，较暗的一侧应该更靠近光源。分配光源还可以帮助通知页面的其他图形元素，并充当焦点。

 

注意这个音乐应用界面的左上角的光源。

 

当所有这些单独的元素被正确选择时，它们就会融合成一个华丽，令人eye目的渐变。而这反过来又对整个界面起到了巨大的作用。

 

渐变从哪里出发？
 

在您的用户界面中添加渐变是实现平台现代化的绝佳方法。按照此处讨论的提示，您可以确保正确使用这个功能强大的设计工具。回顾一下：

 

1.使用品牌和色轮的组合选择合适的基色调

2.如有疑问，请转向自然界寻求灵感

3.通过添加更多色彩来增加色彩，但请注意不要过分

4.在界面中选择正确的形状和位置。记住：我们的眼睛跟随渐变！
 

像所有用户界面设计趋势一样，渐变将会失去时尚 - 被下一件大事所推翻。但就目前而言，它们是尖端UI设计的支柱。