20個(gè)精巧微妙的漸變色網(wǎng)頁(yè)設(shè)計(jì)

在扁平化剛剛興起的時(shí)候，純色的運(yùn)用似乎將紋理和漸變 都打入了設(shè)計(jì)的冷宮。然而在隨后的發(fā)展中，這種“純粹的扁平”似乎并不理想，紋理、陰影、漸變 正在一點(diǎn)一滴地回歸并堅(jiān)定地占據(jù)著屬于他們自己的位置。

在這些曾經(jīng)被打上“擬物”標(biāo)簽的設(shè)計(jì)手法中，漸變 是上一個(gè)時(shí)代中運(yùn)用的最廣泛也最有代表性的一種。那么在設(shè)計(jì)風(fēng)格愈發(fā)現(xiàn)代，簡(jiǎn)約大行其道的今天它是否還有市場(chǎng)呢?下面的20個(gè)微妙而有趣的案例會(huì)告訴你它回歸的理由。

VO2 Group

VO2是一個(gè)典型的例子，簡(jiǎn)約的風(fēng)格很典型，充滿力度的鮮艷字體，灰色的背景和動(dòng)態(tài)的人物動(dòng)作，裝飾性的三角形元素采用的漸變的色彩，令整個(gè)設(shè)計(jì)層次梯度都展現(xiàn)出來(lái)了。

Melanie F – Look Book

使用不完全對(duì)稱(chēng)的非襯線體來(lái)作為標(biāo)題是目前時(shí)尚類(lèi)網(wǎng)站中越來(lái)越流行的手法。而字體下方的彩色背景使用了綠色到藍(lán)紫色的漸變，不僅消解了單調(diào)感，而且讓文字標(biāo)題更加容易被注意到。

Adoratorio

這家設(shè)計(jì)機(jī)構(gòu)對(duì)漸變的運(yùn)用截然不同，他們將漸變色用作文字而與純白的背景形成對(duì)比，炫酷而創(chuàng)新。

Qards

Designmodo 所推的設(shè)計(jì)工具Qards在其子頁(yè)面的著陸頁(yè)上也同樣采用了漸變色的設(shè)計(jì)。不同的板塊使用不同的漸變色作為背景，而圖中所示的漸變橙色中，還在底色中加入了一些圖形元素，整體顯得更加飽滿。

Symodd

Symodd的介紹頁(yè)也同樣使用了由橙過(guò)度到粉色的漸變色背景，由于色調(diào)控制得非常微妙，確保了可讀性的同時(shí)還非常令眼睛討喜。

Inc

Inc 在漸變色的使用上和其他的幾個(gè)案例稍有不同，藍(lán)紫漸變色疊加到背景圖片上，營(yíng)造出融入感十足的設(shè)計(jì)，色彩變化幅度微妙，與圖片的融合毫無(wú)違和感。

Pho

藍(lán)紫色漸變似乎非常為設(shè)計(jì)師所青睞，這個(gè)網(wǎng)站采用了相似的設(shè)計(jì)。低飽和度的色彩和鮮艷的文字構(gòu)成明顯的對(duì)比，視覺(jué)效果挺不錯(cuò)的。

Impossible Bureau

Impossible Bureau 使用了極為鮮艷的色彩來(lái)構(gòu)建這個(gè)過(guò)渡色彩的對(duì)比。而這個(gè)頁(yè)面最酷的地方在于，頁(yè)面其他的元素都加載完成之后，過(guò)渡色彩就逐漸變的不那么晃眼了。

Customeed

Customeed 的整體設(shè)計(jì)給人感覺(jué)非常舒服，頁(yè)面的背景漸變色使用的綠色，這樣的漸變色使用并不多見(jiàn)，相比之下，更多的網(wǎng)站設(shè)計(jì)師會(huì)選擇藍(lán)色、紫色和紅色。

Webflow

相比于其他的網(wǎng)站，Webflow并未將漸變用作主要的設(shè)計(jì)，黑色背景使用了lowpoly效果，視覺(jué)上并不單調(diào)，作為注冊(cè)/登錄的表單背景，由紫到藍(lán)的漸變背景條和整個(gè)大背景形成了對(duì)比，效果不錯(cuò)。

Product to Profit

這個(gè)頁(yè)面的著陸頁(yè)使用了微妙的漸變色，采用的也是色彩和背景圖疊加的手法。這在做法最大的特色是讓整個(gè)頁(yè)面氛圍更令人舒適。

Table Hero

如果你不仔細(xì)看，可能會(huì)覺(jué)得這個(gè)頁(yè)面的背景是純色的，實(shí)際上只是它的色彩變化梯度并不太明顯而已。有意思的是，這在設(shè)計(jì)配合著1px寬的細(xì)線構(gòu)成的字體和圖標(biāo)，使得背景更有質(zhì)感。

GoGoRo

這個(gè)頁(yè)面使用了典型的極簡(jiǎn)設(shè)計(jì)，白色的背景上一輛摩托車(chē)的側(cè)面特寫(xiě)配合一個(gè)碩大的“GO”，文字很簡(jiǎn)單且單薄，但是設(shè)計(jì)師將漸變色彩疊加到文字之后，使得整個(gè)頁(yè)面鮮亮起來(lái)了。

Segment

深灰色的背景被用作上半部分的背景，顯得特別沉穩(wěn)，而下半段如同霓虹一般的綠色讓整個(gè)設(shè)計(jì)亮了起來(lái)。

Mapbox

簡(jiǎn)約的設(shè)計(jì)，直觀的布局，微妙的漸變藍(lán)色，清爽而令人舒適，你還想要什么呢?

Gradients, motherfucker.

這其實(shí)是一個(gè)非常搞笑的文章，如果你英文夠好的話。當(dāng)你滾動(dòng)頁(yè)面的時(shí)候，它的漸變背景會(huì)逐漸改變，看起來(lái)非常炫酷。

Pitney Bowes

這個(gè)網(wǎng)站的設(shè)計(jì)其實(shí)也挺大膽的。漸變的背景加上了水波紋紋理，和白色的文字形成對(duì)比。

Stripe

Stripe 最近的一次更新將網(wǎng)站的設(shè)計(jì)更換成目前的樣子，由深藍(lán)漸變成綠色，整個(gè)色調(diào)顯得深沉而富有質(zhì)感，和前景的文字、手機(jī)圖片形成了良好的搭配。

One John St

這是一個(gè)位于布魯克林的公寓的網(wǎng)站的著陸頁(yè)，這個(gè)網(wǎng)站的有趣的地方在于它的色彩會(huì)隨著每天的時(shí)間而變化。

Wake

毫無(wú)疑問(wèn)，使用流行的藍(lán)紫漸變色是一個(gè)流行而確定可靠的設(shè)計(jì)方案。

結(jié)論

漸變色同樣可以構(gòu)建出有趣而令人興奮的設(shè)計(jì)。雖然有的例子會(huì)有一些反差，可以大膽直觀，也可以柔和而細(xì)膩，它們和這個(gè)時(shí)代的設(shè)計(jì)可以融入得非常好，重要的是這個(gè)度的控制。