加入收藏 | 设为首页 | 会员中心 | 我要投稿 辽源站长网 (https://www.0437zz.com/)- 云专线、云连接、智能数据、边缘计算、数据安全!
当前位置: 首页 > 运营中心 > 网站设计 > 佳作 > 正文

20个精巧微妙的渐变色网页设计

发布时间:2018-04-16 04:44:17 所属栏目:佳作 来源:优设网
导读:副标题#e# 在扁平化刚刚兴起的时候,纯色的运用似乎将纹理和渐变都打入了设计的冷宫。然而在随后的发展中,这种纯粹的扁平似乎并不理想,纹理、阴影、渐变正在一点一滴地回归并坚定地占据着属于他们自己的位置。 在这些曾经被打上拟物标签的设计手法中,渐
副标题[/!--empirenews.page--]

在扁平化刚刚兴起的时候,纯色的运用似乎将纹理和渐变都打入了设计的冷宫。然而在随后的发展中,这种“纯粹的扁平”似乎并不理想,纹理、阴影、渐变正在一点一滴地回归并坚定地占据着属于他们自己的位置。

在这些曾经被打上“拟物”标签的设计手法中,渐变是上一个时代中运用的最广泛也最有代表性的一种。那么在设计风格愈发现代,简约大行其道的今天它是否还有市场呢?下面的20个微妙而有趣的案例会告诉你它回归的理由。

       VO2 Group

网页设计欣赏 网页设计 渐变色  渐变色网页设计

VO2是一个典型的例子,简约的风格很典型,充满力度的鲜艳字体,灰色的背景和动态的人物动作,装饰性的三角形元素采用的渐变的色彩,令整个设计层次梯度都展现出来了。

       Melanie F – Look Book

网页设计欣赏 网页设计 渐变色  渐变色网页设计

使用不完全对称的非衬线体来作为标题是目前时尚类网站中越来越流行的手法。而字体下方的彩色背景使用了绿色到蓝紫色的渐变,不仅消解了单调感,而且让文字标题更加容易被注意到。

       Adoratorio

网页设计欣赏 网页设计 渐变色  渐变色网页设计

这家设计机构对渐变的运用截然不同,他们将渐变色用作文字而与纯白的背景形成对比,炫酷而创新。

       Qards

网页设计欣赏 网页设计 渐变色  渐变色网页设计

Designmodo 所推的设计工具Qards在其子页面的着陆页上也同样采用了渐变色的设计。不同的板块使用不同的渐变色作为背景,而图中所示的渐变橙色中,还在底色中加入了一些图形元素,整体显得更加饱满。

       Symodd

网页设计欣赏 网页设计 渐变色  渐变色网页设计

Symodd的介绍页也同样使用了由橙过度到粉色的渐变色背景,由于色调控制得非常微妙,确保了可读性的同时还非常令眼睛讨喜。

       Inc

网页设计欣赏 网页设计 渐变色  渐变色网页设计

Inc 在渐变色的使用上和其他的几个案例稍有不同,蓝紫渐变色叠加到背景图片上,营造出融入感十足的设计,色彩变化幅度微妙,与图片的融合毫无违和感。

       Pho

网页设计欣赏 网页设计 渐变色  渐变色网页设计

蓝紫色渐变似乎非常为设计师所青睐,这个网站采用了相似的设计。低饱和度的色彩和鲜艳的文字构成明显的对比,视觉效果挺不错的。

       Impossible Bureau

网页设计欣赏 网页设计 渐变色  渐变色网页设计

Impossible Bureau 使用了极为鲜艳的色彩来构建这个过渡色彩的对比。而这个页面最酷的地方在于,页面其他的元素都加载完成之后,过渡色彩就逐渐变的不那么晃眼了。

       Customeed

网页设计欣赏 网页设计 渐变色  渐变色网页设计

Customeed 的整体设计给人感觉非常舒服,页面的背景渐变色使用的绿色,这样的渐变色使用并不多见,相比之下,更多的网站设计师会选择蓝色、紫色和红色。

       Webflow

网页设计欣赏 网页设计 渐变色  渐变色网页设计

相比于其他的网站,Webflow并未将渐变用作主要的设计,黑色背景使用了lowpoly效果,视觉上并不单调,作为注册/登录的表单背景,由紫到蓝的渐变背景条和整个大背景形成了对比,效果不错。

       Product to Profit

网页设计欣赏 网页设计 渐变色  渐变色网页设计

这个页面的着陆页使用了微妙的渐变色,采用的也是色彩和背景图叠加的手法。这在做法最大的特色是让整个页面氛围更令人舒适。

       Table Hero

网页设计欣赏 网页设计 渐变色  渐变色网页设计

如果你不仔细看,可能会觉得这个页面的背景是纯色的,实际上只是它的色彩变化梯度并不太明显而已。有意思的是,这在设计配合着1px宽的细线构成的字体和图标,使得背景更有质感。

(编辑:辽源站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

推荐文章
    热点阅读