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

坦白說(shuō)吧，漸變?cè)俣仁⑿辛耍?/p>

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

VO2 Group

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

Melanie F – Look Book

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

Adoratorio

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

Qards

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

Symodd

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

Inc

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

Pho

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

Impossible Bureau

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

Customeed

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

Webflow

Webflow并沒(méi)有大篇幅展示漸變——至少不像本文中其他網(wǎng)站那樣。他們?cè)诰W(wǎng)站首頁(yè)用了一小片粉、紫、藍(lán)的漸變點(diǎn)綴。這種激動(dòng)人心的漸變?cè)诟魈幮》秶\(yùn)用，營(yíng)造了很棒的格調(diào)。

Product to Profit

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

Table Hero

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

GoGoRo

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

Segment

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

Mapbox

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

Gradients, motherfucker.

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

Pitney Bowes

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

Stripe

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

One John St

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

Wake

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

結(jié)論

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

原文鏈接：http://designmodo.com/websites-gradients/

作者信息：Paula Borowska?Paula runs a user experience blog BeingLimited and an author of an upcoming book about mobile design, the Mobile Design Book. You can connect with her on Google+.

#專(zhuān)欄作家#

可樂(lè)橙，微信公眾號(hào)：可樂(lè)橙（colachangreen）。人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家，UI/UX設(shè)計(jì)師，關(guān)注互聯(lián)網(wǎng)，關(guān)注科技。現(xiàn)居杭州，與小伙伴們正在創(chuàng)業(yè)途中?；蛟S不是一名優(yōu)秀的設(shè)計(jì)師，至少是個(gè)快樂(lè)的設(shè)計(jì)師。

本文系作者授權(quán)發(fā)布，未經(jīng)許可，不得轉(zhuǎn)載。