20個(gè)精巧微妙的漸變色網(wǎng)頁設(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)代，簡約大行其道的今天它是否還有市場呢?下面的20個(gè)微妙而有趣的案例會告訴你它回歸的理由。

VO2 Group

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

Melanie F – Look Book

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

Adoratorio

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

Qards

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

Symodd

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

Inc

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

Pho

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

Impossible Bureau

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

Customeed

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

Webflow

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

Product to Profit

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

Table Hero

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

GoGoRo

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

Segment

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

Mapbox

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

Gradients, motherfucker.

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

Pitney Bowes

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

Stripe

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

One John St

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

Wake

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

結(jié)論

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