20個(gè)使用漸變效果的網(wǎng)頁設(shè)計(jì)

扁平化設(shè)計(jì)的時(shí)代正在終結(jié)，或許不會一蹴而就，卻的確在逐漸衰亡。最有力的證明就是這種嶄新的漸變潮流正在興起。相比在web 2.0時(shí)代見到的那種漸變，它們更加細(xì)致微妙。

坦白說吧，漸變再度盛行了！

我列出了20個(gè)主打漸變形式的嶄新網(wǎng)頁設(shè)計(jì)。其中有些非常微妙，另一些則極度鮮艷；不論哪種，漸變都是一種為你設(shè)計(jì)添彩的有趣手法。

VO2 Group

VO2新網(wǎng)站的歡迎頁面采用了非常規(guī)的設(shè)計(jì)，大量不同元素層層疊加。樹洞般的設(shè)計(jì)造就了這個(gè)網(wǎng)站！很有意思，與眾不同。背景元素之一——三角形——呈現(xiàn)了輕微的漸變。就此而言，它為三角形元素增添了視覺吸引力。

Melanie F – Look Book

Melanie的look book采用的布局方式，在時(shí)尚類網(wǎng)站中愈發(fā)流行，其中文字置于圖片之上，兩者卻不粘連。在本例中，介紹文字呈現(xiàn)在網(wǎng)站頁頭的矩形上方。矩形中填充了綠色與紫色的漸變，很顯然，它有助于吸引視線。

Adoratorio

這家設(shè)計(jì)機(jī)構(gòu)以特別的方式運(yùn)用漸變，將它用在了文字區(qū)域上。獨(dú)具一格，相當(dāng)酷炫。這種方法確實(shí)能巧妙地將文字風(fēng)格化，非常管用。

Qards

甚至我們Designmodo Qard的著陸頁也展現(xiàn)了多種漸變。大多頁面都被分割成小塊，背景填充了不同的漸變色。截圖中的頁面用的是橙色，其他頁面則用了由淺到深的藍(lán)色或綠色漸變。漸變的背景為網(wǎng)站設(shè)計(jì)增添一種獨(dú)特的格調(diào)。

Symodd

Symodd的首屏，或者說介紹部分，主打由橙色到粉色的全屏漸變背景。這種漸變相對細(xì)微，因?yàn)檫@兩種色調(diào)差異不大，賞心悅目。

Inc

Inc也在首屏區(qū)域使用了漸變。但是稍微有點(diǎn)不同，他們將藍(lán)紫色漸變疊加在照片上。此處的漸變也沒有太強(qiáng)烈，藍(lán)色與紫色是非常接近的色調(diào)，將它置于照片之上效果很好。

Pho

又是一個(gè)藍(lán)紫色漸變。它是這個(gè)案例集中相對柔和的一款，不過所選的兩種顏色相當(dāng)華麗——它們飽和度低，但對比強(qiáng)烈，看起來令人非常愉悅！

Impossible Bureau

Impossible Bureau的頁面采用了非常鮮明、反差強(qiáng)烈的漸變色！很酷的是，每當(dāng)頁面加載完成，其他元素在上方出現(xiàn)，頁面的濃烈與戲劇性并沒有被沖淡。

Customeed

Customeed選擇極度罕見的綠色漸變。出于某些原因，藍(lán)色、紫色、粉色漸變非常盛行。但是綠色漸變也沒有問題，它看起來令人愉快，與Customeed的網(wǎng)站配合良好。

Webflow

Webflow并沒有大篇幅展示漸變——至少不像本文中其他網(wǎng)站那樣。他們在網(wǎng)站首頁用了一小片粉、紫、藍(lán)的漸變點(diǎn)綴。這種激動人心的漸變在各處小范圍運(yùn)用，營造了很棒的格調(diào)。

Product to Profit

著陸頁的漸變色很淡——略微有水洗的感覺。無論如何，它看起來的確很棒，因?yàn)椴]有刻意突出。淡藍(lán)淡紫色的漸變疊在照片上，效果很好。喚起這個(gè)網(wǎng)站一種友好的氛圍。

Table Hero

Table Hero的主頁遍布友好的小花樣，說小花樣是指各處的點(diǎn)綴。在1像素寬的按鈕邊框上，或是極細(xì)的標(biāo)題文字上透出一絲漸變。這種方法很有意思，在設(shè)計(jì)中融入漸變來增添深度和多樣性，卻不會讓漸變走火入魔。

GoGoRo

GoGoRo的焦點(diǎn)區(qū)域采用了極簡設(shè)計(jì)，但絕對夠抓眼球。除了巨大的文字“go”、小摩托的照片和少量小字，別無他物。文字本身很細(xì)，但由于字號夠大，使它表現(xiàn)出一定的厚度。網(wǎng)站的設(shè)計(jì)師將歡快的藍(lán)綠漸變作為文字的顏色。

Segment

Segment用了深色設(shè)計(jì)，通常整個(gè)區(qū)域都采用深灰色背景。但是為了給它添彩——或者說點(diǎn)亮它——他們用了很多明亮的霓虹綠色來提亮設(shè)計(jì)。某些區(qū)域的綠色漸變頗具吸引力，使整個(gè)設(shè)計(jì)引人注目。

Mapbox

進(jìn)入Mapbox的主頁，你會看到一個(gè)非常棒的首屏。輪播圖中有些采用了微妙的漸變背景，為整個(gè)設(shè)計(jì)增加了縱深感和清晰度。

Gradients, motherfucker.

不知道你是否還記得這個(gè)網(wǎng)站，Visual Idiot在2012年發(fā)布的。不過隨著屏幕滾動，你會發(fā)現(xiàn)它的漸變真是切中要害。這個(gè)網(wǎng)站相當(dāng)簡單，而且非常滑稽。展現(xiàn)了一系列難以置信的漸變，取自彩虹的顏色，例如粉色、藍(lán)色、綠色、橙色。

Pitney Bowes

又是個(gè)大膽的案例。這個(gè)網(wǎng)站的設(shè)計(jì)相當(dāng)平滑，白色文字在紫色為主體的漸變上顯得鮮亮。文字看上去的確很棒。這個(gè)漸變其實(shí)是均勻線性的，但是得益于上面的藍(lán)色圓形紋理，這種視錯(cuò)覺讓它顯得有點(diǎn)圓潤。很酷，對不對？

Stripe

Stripe近期更新了他們的網(wǎng)站，他們也用了漸變！有些首屏輪播圖用了非常漂亮的漸變，你在截圖中看到的就是其中第一張。由深色的海軍藍(lán)過渡到綠色的漸變，色彩豐富，作為暗色調(diào)背景非常好。

One John St

這是Brooklyn DUMBO一個(gè)公寓群的著陸頁。這個(gè)網(wǎng)站令人驚奇的地方，是漸變色會在一天中隨著時(shí)間改變深度。這個(gè)設(shè)計(jì)非常有趣。

Wake

最后一個(gè)案例展現(xiàn)了最流行的藍(lán)紫色漸變，這種配色正如日中天。Wake的網(wǎng)站遍布這種漸變色，因?yàn)檫@是他們應(yīng)用品牌色一部分。

結(jié)論

可以看出，漸變是一項(xiàng)有趣的設(shè)計(jì)決策。它們造就了這種歡快、激動人心的設(shè)計(jì)。總體來說，漸變并不差——從來都沒有差過——只是我們對太極端的漸變感到厭煩。盡管這些案例中有部分對比很強(qiáng)烈，也有一些呈現(xiàn)了它柔和的一面。希望這一系列能在你未來的設(shè)計(jì)中激發(fā)你的靈感。

原文鏈接