OMG! 我太爱渐变了

自译外文 分类: 经验/观点 版权: 原作者: Ludmila Shevchenko
2186 17 22 0
2018-10-09
13.0
编辑推荐

如何在设计中使用渐变。

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


Image title

Image title

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


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


首先,让我们学习一些基本的原则:


Image title

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


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


Image title

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


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


Image title

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


Image title

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


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


渐变磁场


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


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


Image title


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


Image title

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


Image title

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


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


干净


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


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


Image title

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


Image title

S 代表平滑


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


Image title

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


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


Image title

替代


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


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


Image title

Cloud Vision 的标志。


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


Image title

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


结论


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


感谢阅读!


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

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

厉嗣傲

2664粉丝/65关注

为什么大团队失败反而小团队取胜产品反馈的重要性

扫描二维码
去手机端查看海报

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN