重现江湖的网页渐变色

Date 2025-02-20 19:58:10

2016年似乎是一夜之间,渐变又回到了网页设计,这是设计师在平面设计初期试图避免的一种配色方法。从背景到图层叠加应用,再到微妙的纹理,它的各种应用在用户界面上以卷土的趋势出现,但与过去略有不同。想再练一次吗?看完下面的理论!

2016年似乎是一夜之间,渐变又回到了网页设计,这是设计师在平面设计初期努力避免的一种配色方式。

从背景到图层叠加应用,再到纹理细腻,其各种应用在用户界面上以卷土的趋势出现,但与以往略有不同。想再练这个功吗?看完下面的理论再说!(附上应用实例激发灵感)

网页设计领域的领导者

02.jpg

网址地址:https://www.spotify.com/us/

网站地址:https://designshack.net/articles/graphics/is-the-gradient-making-a-comeback/

年初,Spotify引领了双色趋势,几乎成为了品牌的视觉符号。如果你放大,你会发现Spotify的双色调颜色有一定的梯度。它平衡明亮的颜色,有时通过使用单色逐渐变化。

其他大牌网站也重拾了用户交互的渐变设计。Texture——在线杂志供应商-回归比较彻底,整个屏幕都是渐变。

然而,这些只是冰山一角,用于新版本的渐变色。它爆发性地出现在单一产品到系列设计的各个地方。

同时,没有明确的使用规则。它可以是多色渐变、辐射渐变、点光渐变或垂直线性渐变。它已成为视觉展示或简单栏目的主要设计风格。

令人惊讶的是,设计师以多种形式运用了回归后的渐变,同时视觉效果极佳!

扁平化渐变配色

网站地址:http://www.lovefila.com/

网站地址:https://wpcrew.co/

虽然它曾经被抛弃在平面设计领域,但回归的渐变颜色融合了大量的平面元素,特别是颜色。一些大胆的颜色甚至直接从平面设计的调色板中“借来”。

这种颜色选择使渐变变得更加渐变 modern,它也更符合其他网站的设计趋势。当然,您也可以将其与平面设计相结合,或者在材料设计的用户界面中添加另一个渐变。即使有小型设计项目,您也可以尝试使用柔和的颜色组合作为背景。

渐变的颜色选择相对随意,这也是对其他设计趋势的补充。如果你不想完全放弃现有的设计结果,你可以稍微改变一下,然后局部更换。

双色已经开始流行起来

网站地址:http://www.lewislopez.com/

网站地址:http://www.symodd.com/

双色渐变是一种设计技巧非常重要,也是一种融合性、极佳的流行趋势。

但这个概念有一个缺点:有点过度使用。似乎整个设计行业都在使用,而且大部分都呈现出蓝绿渐变,效果也是一样的,没有什么特点。

人气看重的是个性,而不是共性。不要简单的ctrll C、ctrl V。

渐变图片在背景中

08.jpg

网站地址:https://timelikes-infonity.fr/

网站地址:http://swissarmyman.com/

渐变的回归也使背景更加深刻,这一趋势将继续下去。由于虚拟现实(虚拟现实),越来越多的网站和设计师试图将现实和3D效果与设计相结合。

虽然平面设计具有直观、舒适、简单的优点,但也缺乏真实性。休闲时间更接近大自然,丰富多彩的蓝色、红色、黄色和紫色的天空,可以在任何时候给你灵感。

天空和梯度,阴影是同一个概念。当设计完成时,使用这些概念可以有效地提高设计的层次感和真实性。所以抓住时间掌握这些技能,它们可以给你强大的力量。

渐变叠加图片

网站地址:https://www.nycpride.org/

网站地址:https://designshack.net/wp-content/uploads/reveal.jpg

除了上面提到的,渐变叠加在图片上已经流行了很长时间。因此,从单色叠加到渐变叠加的转变并不新奇。

这种应用程序在大图片中有明显的效果。例如,英雄背面使用渐变叠加在这些图片中的优点是,它可以将视觉焦点固定在重要元素上,或创建一个可读性强的空白区域,以便添加个性化和吸引力的文本内容。

技巧是在照片的顶部平衡图片和颜色之间的关系。随时检查:颜色是否与图片的含义相匹配?你能理解图片所表达的故事吗?为了完全保留图片本身的信息,梯度和图片必须巧妙地集成。

UI元素中的少量渐变

12.jpg

网站:https://toeaantui.nl/

网站:http://www.baldorfood.com/

一些设计师将渐变添加到用户界面元素中,这与其他流行款式不同。它的效果更倾向于小范围的渐变,也是同色系的渐变。

在苹果早期的IOS时代,这是一种主流风格,但并没有受到公众的太多喜爱。毫无疑问,使用这种渐变似乎更适合更大的元素。对于一些像小图标这样的设计,很难识别这种小范围的渐变效果,它甚至会分散用户的注意力。然而,在一个大空间中,这种小范围的渐变效应可以吸引读者的注意力,并将注意力转向执行按钮或一些大按钮。

对于每一种渐变风格,用户在看到渐变时都不应该停下来思考。“哇,这是一种很酷的渐变效果。”渐变效应在一定程度上应该被忽略。它只是用来增强用户体验,而不是让用户关注渐变本身的美,除非你坚持要那种效果。

配色工具

网上有许多很好的配色工具,对于不懂配色的新人来说,也可以尝试这些工具来获得配色的灵感。

UI Gradients

在线渐变配色工具,自带的渐变配色方案非常漂亮。

14.jpg

网站地址:http://uigradients.com/

Colllor

使用 Collor 它可以很容易地创建颜色匹配,看起来很好,使用方法很简单,打开网站,输入 RGB 颜色价值,可以自动获得其他颜色的色调,非常漂亮哦。

网站地址:http://colllor.com

配色导航

设计导航中有一个配色栏,里面有很多意想不到的配色工具,挺好用的。打开设计导航,点击配色栏,可以看到很多配色工具。选择你喜欢的!

网站地址:http://hao.shejidaren.com/

最后

如果我逐渐退出时尚界,我将是第一个流泪的人。所以当我看到她的回归时,我非常兴奋。

色彩艳丽或与图片叠加的渐变是一种能有效提高图片转换率的设计技巧,简洁但不简单,既刺激又感兴趣。她的回归得益于所有设计师的推动。谢谢你!

课程推荐
— Course recommendation —
【红喵设计教育】ps教程-ps零基础课程

红喵设计

【红喵设计教育】C4D基础-C4D软件制作教程

红喵设计

【红喵设计教育】包装设计-免费/PS/AI/CDR/平面设计

红喵设计

【红喵设计教育】版式设计-版式的思路PS/AI/CDR/平面设计/排版技巧

红喵设计

【红喵设计教育】ps基础-ps基础入门教程

红喵设计

【红喵设计教育】CDR基础-CDR零基础入门教程

红喵设计

【红喵设计教育】海报基础-PS合成海报设计教程

红喵设计

【野马设计教育】AI基础-AI软件零基础到精通

红喵设计

Floating Image