过渡的艺术个精巧微妙的渐变色网页设计.docxVIP

过渡的艺术?！20个精巧?微妙的渐变?色网页设计?作者: 一网学???最后更新时?间：2015-07-23 14:05:40在扁平化刚?刚兴起的时?候，纯色的运用?似乎将纹理?和渐变都打?入了设计的?冷宫。然而在随后?的发展中，这种“纯粹的扁平?”似乎并不理?想，纹理、阴影、渐变正在一?点一滴地回?归并坚定地?占据着属于?他们自己的?位置。在这些曾经?被打上“拟物”标签的设计?手法中，渐变是上一?个时代中运?用的最广泛?也最有代表?性的一种。那么在设计?风格愈发现?代，简约大行其?道的今天它?是否还有市?场呢？下面的20?个微妙而有?趣的案例会?告诉你它回?归的理由。VO2 Group?VO2是一?个典型的例?子，简约的风格?很典型，充满力度的?鲜艳字体，灰色的背景?和动态的人?物动作，装饰性的三?角形元素采?用的渐变的?色彩，令整个设计?层次梯度都?展现出来了?。Melan?ie F – Look Book使用不完全?对称的非衬?线体来作为?标题是目前?时尚类网站?中越来越流?行的手法。而字体下方?的彩色背景?使用了绿色?到蓝紫色的?渐变，不仅消解了?单调感，而且让文字?标题更加容?易被注意到?。Adora?torio?这家设计机?构对渐变的?运用截然不?同，他们将渐变?色用作文字?而与纯白的?背景形成对?比，炫酷而创新?。Qards?Desig?nmodo? 所推的设计?工具Qar?ds在其子?页面的着陆?页上也同样?采用了渐变?色的设计。不同的板块?使用不同的?渐变色作为?背景，而图中所示?的渐变橙色?中，还在底色中?加入了一些?图形元素，整体显得更?加饱满。Symod?dSymod?d的介绍页?也同样使用?了由橙过度?到粉色的渐?变色背景，由于色调控?制得非常微?妙，确保了可读?性的同时还?非常令眼睛?讨喜。IncInc 在渐变色的?使用上和其?他的几个案?例稍有不同?，蓝紫渐变色?叠加到背景?图片上，营造出融入?感十足的设?计，色彩变化幅?度微妙，与图片的融?合毫无违和?感。Pho蓝紫色渐变?似乎非常为?设计师所青?睐，这个网站采?用了相似的?设计。低饱和度的?色彩和鲜艳?的文字构成?明显的对比?，视觉效果挺?不错的。Impos?sible? Burea?uImpos?sible? Burea?u 使用了极为?鲜艳的色彩?来构建这个?过渡色彩的?对比。而这个页面?最酷的地方?在于，页面其他的?元素都加载?完成之后，过渡色彩就?逐渐变的不?那么晃眼了?。Custo?meedCusto?meed 的整体设计?给人感觉非?常舒服，页面的背景?渐变色使用?的绿色，这样的渐变?色使用并不?多见，相比之下，更多的网站?设计师会选?择蓝色、紫色和红色?。Webfl?ow相比于其他?的网站，Webfl?ow并未将?渐变用作主?要的设计，黑色背景使?用了low?poly效?果，视觉上并不?单调，作为注册/登录的表单?背景，由紫到蓝的?渐变背景条?和整个大背?景形成了对?比，效果不错。Produ?ct to Profi?t这个页面的?着陆页使用?了微妙的渐?变色，采用的也是?色彩和背景?图叠加的手?法。这在做法最?大的特色是?让整个页面?氛围更令人?舒适。Table? Hero如果你不仔?细看，可能会觉得?这个页面的?背景是纯色?的，实际上只是?它的色彩变?化梯度并不?太明显而已?。有意思的是?，这在设计配?合着1px?宽的细线构?成的字体和?图标，使得背景更?有质感。GoGoR?o这个页面使?用了典型的?极简设计，白色的背景?上一辆摩托?车的侧面特?写配合一个?硕大的“GO”，文字很简单?且单薄，但是设计师?将渐变色彩?叠加到文字?之后，使得整个页?面鲜亮起来?了。Segme?nt深灰色的背?景被用作上?半部分的背?景，显得特别沉?稳，而下半段如?同霓虹一般?的绿色让整?个设计亮了?起来。Mapbo?x简约的设计?，直观的布局?，微妙的渐变?蓝色，清爽而令人?舒适，你还想要什?么呢？Gradi?ents, mothe?rfuck?er.这其实是一?个非常搞笑?的文章，如果你英文?够好的话。当你滚动页?面的时候，它的渐变背?景会逐渐改?变，看起来非常?炫酷。Pitne?y Bowes?这个网站的?设计其实也?挺大胆的。渐变的背景?加上了水波?纹纹理，和白色的文?字形成对比?。Strip?eStrip?e 最近的一次?更新将网站?的设计更换?成目前的样?子，由深蓝渐变?成绿色，整个色调显?得深沉而富?有质感，和前景的文?字、手机图片形?成了良好的?搭配。One John St这是一个位?于布鲁克林?的公寓的网?站的着陆页?，这个网站的?有趣的地方?在于它的色?彩会随着每?天的时间而?变化。Wake毫无疑问，使用流行的?蓝紫渐变色?是一个流