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

一、什么是漸變色？

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

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

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

• 線性漸變

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

• 單色疊加漸變

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

• 多層次多角度疊加漸變

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

• 功能性漸變

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

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

在了解過基本的漸變知識后，摹客小編為大家搜集了一些優(yōu)秀的漸變色網(wǎng)頁設(shè)計示例供大家學(xué)習(xí)和鑒賞。

1. Impossible Bureau

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

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

2. Webflow 

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

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

3. Stripe

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

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

4. Stereolux

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

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

5. icons8

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

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

6. DGstudio

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

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

7. Designmodo

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

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

8. Elegantthemes

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

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

9. Coolhue

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

10. Uplaunch

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

11. Bud 

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

12. Quadangles

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

13. Volkfi

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

14. Melanie-f

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

15. Symodd

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

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

相比于真實(shí)的網(wǎng)頁設(shè)計，概念設(shè)計更能體現(xiàn)設(shè)計師的奇思妙想，且能不受各種現(xiàn)實(shí)因素的局限，以更具創(chuàng)意性的方式將漸變色元素運(yùn)用到網(wǎng)頁設(shè)計中。以下是摹客小編為大家整理的來自設(shè)計社區(qū)——Dribbble上面的10大優(yōu)秀漸變色網(wǎng)頁設(shè)計。

16. Architecture Firm

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

17. 404 page

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

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

18. Digital Design Agency

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

19. Medixo 

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

20. Lytbox

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

21. Gredient Web Concept

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

22. Banko App Landing Page

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

23. V.O.

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

24. Plantship

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

25. Cascada

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

五、5款網(wǎng)頁漸變設(shè)計工具

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

2. UIgradients: 一個簡單而強(qiáng)大的漸變色庫。

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

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

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

總結(jié)：

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

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