20個精巧微妙的漸變色網(wǎng)頁設計

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

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

VO2 Group

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

Melanie F – Look Book

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

Adoratorio

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

Qards

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

Symodd

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

Inc

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

Pho

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

Impossible Bureau

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

Customeed

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

Webflow

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

Product to Profit

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

Table Hero

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

GoGoRo

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

Segment

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

Mapbox

簡約的設計，直觀的布局，微妙的漸變藍色，清爽而令人舒適，你還想要什么呢?

Gradients, motherfucker.

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

Pitney Bowes

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

Stripe

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

One John St

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

Wake

毫無疑問，使用流行的藍紫漸變色是一個流行而確定可靠的設計方案。

結(jié)論

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