2016年，Instagram將它的經(jīng)典寶麗來(lái)相機(jī)logo更換為鮮艷亮眼的扁平化logo, 成為了較早引領(lǐng)漸變色風(fēng)潮的設(shè)計(jì)之一。而近幾年，各種互聯(lián)網(wǎng)、品牌和平面設(shè)計(jì)不斷將推陳出新，更讓漸變色成為業(yè)界最炙手可熱的設(shè)計(jì)風(fēng)格。那我們今天就來(lái)說(shuō)說(shuō)漸變色在網(wǎng)頁(yè)設(shè)計(jì)上的表現(xiàn)吧。

一、什么是漸變色？

漸變色是一種配色方案，變幻無(wú)窮，極具神秘氣息。通常由兩個(gè)或多個(gè)不同顏色相互形成柔和的過(guò)渡色帶而組成。

二、有哪些常見(jiàn)的漸變色表現(xiàn)方式?

相較于單一的色彩，漸變色的復(fù)合性質(zhì)讓它在網(wǎng)頁(yè)設(shè)計(jì)中具有更強(qiáng)的視覺(jué)沖擊力，有助于快速搶占視線。從表現(xiàn)手法來(lái)講，主要有以下幾種方式：

• 線性漸變

作為最基礎(chǔ)的表現(xiàn)手法，線性漸變又細(xì)分為橫向漸變、縱向漸變和對(duì)角漸變。

• 單色疊加漸變

網(wǎng)頁(yè)或圖片中相同色調(diào)的單色色彩疊加。

• 多層次多角度疊加漸變

Instagram圖標(biāo)就是一個(gè)典型的多層次多角度色彩疊加漸變。

• 功能性漸變

利用相同色、同類色、近似色、對(duì)比色、補(bǔ)色等進(jìn)行功能分區(qū)或菜單分區(qū)。

三、15款優(yōu)質(zhì)漸變色網(wǎng)頁(yè)設(shè)計(jì)實(shí)例分析

在了解過(guò)基本的漸變知識(shí)后，我們?yōu)榇蠹宜鸭艘恍﹥?yōu)秀的漸變色網(wǎng)頁(yè)設(shè)計(jì)示例供大家學(xué)習(xí)和鑒賞。

1. Impossible Bureau

Impossible Bureau是一個(gè)專門為數(shù)字化產(chǎn)品進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的團(tuán)隊(duì)，為客戶提供策略、設(shè)計(jì)、及開(kāi)發(fā)等一條龍服務(wù)。

漸變色元素在他們的網(wǎng)頁(yè)中隨處可見(jiàn)。亮麗的紫紅漸變色彩伴隨著鼠標(biāo)交互，在黑色網(wǎng)頁(yè)背景中顯得格外亮眼。設(shè)計(jì)師采用了對(duì)角漸變的表現(xiàn)手法將神秘的紫色巧妙過(guò)渡到迷醉的紫紅色之中。網(wǎng)站的登入界面在其他元素加載完成后，鮮艷的色調(diào)自動(dòng)變暗，過(guò)渡色彩就不會(huì)顯得過(guò)于耀眼。

2. Webflow

Webflow是一個(gè)簡(jiǎn)潔的在線網(wǎng)頁(yè)設(shè)計(jì)工具，無(wú)需代碼，只需要簡(jiǎn)單拖拽，設(shè)計(jì)師或者產(chǎn)品經(jīng)理即可快速實(shí)現(xiàn)設(shè)計(jì)。

本身作為一個(gè)設(shè)計(jì)工具，它的網(wǎng)站設(shè)計(jì)還是非常具有特色的。漸變色在Webflow網(wǎng)頁(yè)設(shè)計(jì)中并非主要角色，而是作為點(diǎn)綴用在不同的功能板塊。淺色系的漸變?nèi)岷投粡垞P(yáng)，在各功能板塊中既是背景，又是配色，和網(wǎng)站整體的極簡(jiǎn)設(shè)計(jì)風(fēng)格搭配相得益彰。

3. Stripe

Stripe是目前互聯(lián)網(wǎng)行業(yè)中比較受歡迎的在線支付平臺(tái)，其商業(yè)模式主要是通過(guò)SDK接口與各種支付方式進(jìn)行融合，從而降低用戶的接入成本，以收取手續(xù)費(fèi)或者服務(wù)費(fèi)盈利。

深藍(lán)到薄荷綠的對(duì)角漸變，讓整個(gè)網(wǎng)頁(yè)設(shè)計(jì)色調(diào)深沉又不失質(zhì)感。這樣的配色和網(wǎng)頁(yè)的前景文字、圖片等視覺(jué)元素匹配得非常和諧。

4. Stereolux

Stereolux是一個(gè)集各種音樂(lè)、電子藝術(shù)服務(wù)的網(wǎng)絡(luò)平臺(tái)。整個(gè)網(wǎng)站設(shè)計(jì)充滿創(chuàng)意和活力，對(duì)于漸變色的運(yùn)用更是打破常規(guī)、別具一格。

斜置的網(wǎng)頁(yè)logo中加入了動(dòng)態(tài)的漸變色彩，充滿活力又引人注目。在“關(guān)于我們”的各個(gè)板塊中，動(dòng)態(tài)漸變的元素也極具創(chuàng)意，采用漸變色塊疊加的方式呈現(xiàn)二次漸變效果。

5. icons8

關(guān)注設(shè)計(jì)的朋友都知道icons8是一個(gè)免費(fèi)的圖標(biāo)、圖片、矢量圖資源庫(kù)，它的網(wǎng)站設(shè)計(jì)也十分優(yōu)秀。

網(wǎng)站中使用了幾種不同的漸變色系進(jìn)行功能分區(qū)，且每個(gè)版塊的色彩會(huì)隨著鼠標(biāo)滾動(dòng)或點(diǎn)擊的位置不同而產(chǎn)生不同的漸變效果。

6. DGstudio

DGstudio是一個(gè)集品牌創(chuàng)建、圖形設(shè)計(jì)、網(wǎng)站開(kāi)發(fā)、應(yīng)用程序開(kāi)發(fā)、網(wǎng)站托管和營(yíng)銷等服務(wù)于一體的網(wǎng)站。

網(wǎng)站整體設(shè)計(jì)簡(jiǎn)潔明了，沒(méi)有大篇幅的圖形設(shè)計(jì)。除了logo中夸張的漸變之外，頁(yè)面中的圖標(biāo)也被疊加了精心設(shè)計(jì)的漸變色。色彩采用臨近色漸變，顯得柔和又不死板。從這個(gè)設(shè)計(jì)，我們可以看出，漸變色的運(yùn)用也可以打破常規(guī)，小范圍運(yùn)用反而會(huì)給用戶提供更好的視覺(jué)觀感。

7. Designmodo

Designmodo是一個(gè)專門為設(shè)計(jì)師提供各種前沿設(shè)計(jì)趨勢(shì)和設(shè)計(jì)資源、靈感信息的博客。

自改版后，網(wǎng)站的整體排版和布局變得更加簡(jiǎn)潔和具有條理性。除此以外，最大的特色在于所有文章的封面圖都加入了漸變色蒙版。當(dāng)你鼠標(biāo)滑動(dòng)到任何一篇文章的封面圖上，該圖片會(huì)自動(dòng)蒙上一層藍(lán)紫色的對(duì)角漸變。

8. Elegantthemes

Elegantthemes是一個(gè)專門提供wordpress主題的網(wǎng)站，同時(shí)也是一個(gè)可視頁(yè)面生成器。網(wǎng)頁(yè)中使用了大量的漸變色彩，包括網(wǎng)頁(yè)背景色、banner、按鈕、下拉菜單、及每一個(gè)功能模塊等等。

雖然顏色很豐富，但由于色彩跨度不大，也并不會(huì)讓人覺(jué)得整個(gè)網(wǎng)頁(yè)的配色顯得突兀。大面積使用漸變色的時(shí)候，尤其需要考慮顏色跨度對(duì)于用戶接受程度的影響。

9. Coolhue

Coolhue是一個(gè)針對(duì)于Sketch的漸變色插件。作為一個(gè)工具網(wǎng)站，Coolhue的網(wǎng)頁(yè)設(shè)計(jì)直接使用了其本身提供的漸變色彩做為背景，且支持實(shí)時(shí)更換?？晒┻x擇的漸變方案有雙色、單色漸變。

10. Uplaunch

Uplaunch是一個(gè)登陸頁(yè)面包，可幫助商家與客戶進(jìn)行快速互動(dòng)。同樣也是一個(gè)使用漸變色作為整體背景的網(wǎng)頁(yè)設(shè)計(jì)。單色的灰色線性漸變，簡(jiǎn)約大方。

11. Bud

插畫作為近兩年來(lái)比較流行的設(shè)計(jì)趨勢(shì)，在許多網(wǎng)頁(yè)設(shè)計(jì)中已經(jīng)得到普遍應(yīng)用。而插畫和漸變又是互相非常搭的一套組合。在插畫用適當(dāng)使用漸變可以營(yíng)造很好的光影感和立體感，可以大大提升插畫的表現(xiàn)力

12. Quadangles

作為一款深色系的網(wǎng)頁(yè)設(shè)計(jì)， Quadangles采用了經(jīng)典的黑色網(wǎng)頁(yè)背景和白色字體搭配。即使輪播圖板塊設(shè)計(jì)采用了亮麗的漸變色彩：紫、藍(lán)、綠等，也絲毫不影響整體配色，反而變得更加高級(jí)有潮流感。漸變色塊疊加的操作也十分具有創(chuàng)意性，圖文分離，各有側(cè)重。

13. Volkfi

Volkfi的網(wǎng)頁(yè)設(shè)計(jì)思路也同樣是深色背景加漸變?cè)?。紅藍(lán)漸變勾勒出的網(wǎng)格在黑色背景中十分搶眼。同樣使用到漸變色彩的還有其主打手機(jī)品牌logo及樣機(jī)屏幕配色。

14. Melanie-f

常見(jiàn)的漸變色網(wǎng)頁(yè)背景通常是采用鋪滿的方式，而Melanie-f 則通過(guò)減少色彩的使用面積以達(dá)到簡(jiǎn)潔的效果。同時(shí)，和不完全對(duì)稱的非襯線字體標(biāo)題的搭配，不僅不會(huì)讓人覺(jué)得單調(diào)，反而更突出標(biāo)題內(nèi)容，同時(shí)也增加網(wǎng)站的時(shí)尚感。

15. Symodd

Symodd的介紹頁(yè)使用了具有高飽和度的雙色漸變色彩。如果你足夠細(xì)心，你會(huì)發(fā)現(xiàn)右側(cè)的輪播指示器。隨著鼠標(biāo)不斷向下滾動(dòng)，網(wǎng)頁(yè)色彩逐漸由橙紅過(guò)渡到紫藍(lán)及藍(lán)綠，分別對(duì)應(yīng)每一個(gè)不同的功能板塊。也就是我們所說(shuō)的功能性漸變。

四、Dribbble10大優(yōu)秀漸變色網(wǎng)頁(yè)設(shè)計(jì)靈感

相比于真實(shí)的網(wǎng)頁(yè)設(shè)計(jì)，概念設(shè)計(jì)更能體現(xiàn)設(shè)計(jì)師的奇思妙想，且能不受各種現(xiàn)實(shí)因素的局限，以更具創(chuàng)意性的方式將漸變色元素運(yùn)用到網(wǎng)頁(yè)設(shè)計(jì)中。以下是我們?yōu)榇蠹艺淼膩?lái)自設(shè)計(jì)社區(qū)——Dribbble上面的10大優(yōu)秀漸變色網(wǎng)頁(yè)設(shè)計(jì)。

16. Architecture Firm

除網(wǎng)頁(yè)和app設(shè)計(jì)，漸變色已經(jīng)被運(yùn)用到各行各業(yè)，例如包裝、服裝、飾品等等。設(shè)計(jì)師Arthur K將漸變色也運(yùn)用到了建筑上。在它的網(wǎng)頁(yè)設(shè)計(jì)中，我們可以看到建筑也可以絢麗多彩。網(wǎng)頁(yè)的視覺(jué)中心，設(shè)計(jì)師也采用了漸變色彩作為功能色，吸引視線、突出主題。

17. 404 page

常見(jiàn)的404報(bào)錯(cuò)設(shè)計(jì)通常都是雜亂又單調(diào)，被設(shè)計(jì)師當(dāng)作一塊廢棄的田地，任由“雜草”橫生，毫無(wú)趣味和創(chuàng)意性可言。

這一款報(bào)錯(cuò)頁(yè)面設(shè)計(jì)中，設(shè)計(jì)師并沒(méi)有讓它成為一塊荒地，而是通過(guò)精心設(shè)計(jì)，配上了帶有漸變色彩的插畫、提示語(yǔ)和返回主頁(yè)按鈕。既增加了美觀度，也具有實(shí)用性。

18. Digital Design Agency

這是一款簡(jiǎn)潔清新的漸變色網(wǎng)頁(yè)設(shè)計(jì)。低飽和度也能做出漂亮的漸變，同時(shí)帶來(lái)年輕和前衛(wèi)的感受。

19. Medixo 

這款網(wǎng)頁(yè)設(shè)計(jì)logo中使用了4個(gè)疊加的漸變色塊，最終形成一個(gè)對(duì)角漸變效果。另外，CTA按鈕中也使用了相同色系的漸變色彩。鮮艷的漸變Logo和CTA搭配淺色背景，更有助于加深用戶的品牌意識(shí)。

20. Lytbox

這款設(shè)計(jì)最大的特別之處在于漸變色和3D圖形設(shè)計(jì)的結(jié)合。深色的黑紅藍(lán)漸變，具有強(qiáng)烈的科技感和神秘感，讓人沉醉。

21. Gredient Web Concept

這套設(shè)計(jì)采用了非常大膽的多色漸變方案。Logo和右側(cè)的分屏插畫都運(yùn)用了非常多的漸變色彩。得益于作者巧妙的配搭，這么多的顏色依然和諧共處，為觀者帶來(lái)強(qiáng)烈有力的視覺(jué)感。

22. Banko App Landing Page

Banko是一款銀行類app的網(wǎng)站登錄頁(yè)設(shè)計(jì)。概念圖中展示了具有漸變色彩的網(wǎng)頁(yè)頭部設(shè)計(jì)，和其他漸變色點(diǎn)綴元素。如今，越來(lái)越多的傳統(tǒng)公司選擇漸變?cè)O(shè)計(jì)風(fēng)格來(lái)示好年輕用戶，都是看中漸變?cè)O(shè)計(jì)非凡的品質(zhì)和時(shí)尚特性。

23. V.O.

這是一款購(gòu)物類網(wǎng)站登錄頁(yè)的概念設(shè)計(jì)。你可以看到黃白漸變的網(wǎng)頁(yè)背景，黃紅漸變色的線條和黑灰漸變的輸入框。整體風(fēng)格沉穩(wěn)又不失變化。

24. Plantship

Plantship是一個(gè)專門為綠植控設(shè)計(jì)的網(wǎng)站，在這里你可以找到各種心儀的綠植和養(yǎng)護(hù)方法。在首頁(yè)設(shè)計(jì)中，設(shè)計(jì)師采用單色漸變對(duì)每一種植物形態(tài)進(jìn)行插畫設(shè)計(jì)。文字加圖形的設(shè)計(jì)也使得整個(gè)網(wǎng)頁(yè)布局非常清晰、簡(jiǎn)潔。

25. Cascada

Cascada整體網(wǎng)頁(yè)都采用了深藍(lán)色、紫色、白色進(jìn)行漸變插畫設(shè)計(jì)，營(yíng)造出一種晴朗夜空的氛圍。

五、5款網(wǎng)頁(yè)漸變?cè)O(shè)計(jì)工具

1. ColorSpace: 設(shè)置好漸變方向，輸入色值，即可自動(dòng)生成3色CSS漸變。

2. UIgradients: 一個(gè)簡(jiǎn)單而強(qiáng)大的漸變色庫(kù)。

3. CSS Gradient: 拖拽色度條即可生成漸變。

4. Gradienthunt: 可以根據(jù)用戶的喜愛(ài)程度查找想要的漸變色彩。

5. Web Gradient: 免費(fèi)提供180個(gè)可用于網(wǎng)頁(yè)背景設(shè)計(jì)的漸變色方案。

總結(jié)：

網(wǎng)頁(yè)設(shè)計(jì)包含的元素越來(lái)越多樣化，漸變色也逐漸成為網(wǎng)頁(yè)設(shè)計(jì)中不可或缺的背景、配色、或創(chuàng)意性的點(diǎn)綴元素，為整體設(shè)計(jì)添光加彩。此外，得益于其較低的開(kāi)發(fā)成本和極高的設(shè)計(jì)表現(xiàn)力，漸變色已成為數(shù)字設(shè)計(jì)行業(yè)“萬(wàn)金油”一般的存在。

如果你正好缺乏設(shè)計(jì)靈感，不妨嘗試一下以上25款漸變色設(shè)計(jì)和5款常用的漸變色工具，相信能為你帶來(lái)全新的創(chuàng)意和可能性。

原文：摹客