這兩年平窘，相信大家都打開(kāi)網(wǎng)站，看到不少帶有漸變色的界面效果凳怨，而這種效果也讓很多人驚艷到瑰艘。說(shuō)到漸變色，其實(shí)早在前兩年開(kāi)始悄悄流行起來(lái)肤舞。
漸變色給人豐富的視覺(jué)感受紫新，同時(shí)也能表達(dá)豐富的情感體驗(yàn)。今天我們來(lái)分享如何使用漸變色設(shè)計(jì)萨赁，提升網(wǎng)頁(yè)界面的格調(diào)。
漸變色有很多方式兆龙，比如中心漸變杖爽、對(duì)角漸變、垂直漸變紫皇、水平漸變慰安、雙漸變或是多色漸變。前面說(shuō)的四種漸變比較好理解聪铺，我們?cè)赼i化焕、ps里面看到的漸變色面板，主要就是上面說(shuō)的這幾種铃剔。具體區(qū)分可以參照下圖：
漸變色在網(wǎng)頁(yè)當(dāng)中的運(yùn)用表現(xiàn)在很多方面撒桨，可以是整體色系上的漸變，也可以是一個(gè)小元素的漸變键兜，不管是哪種方式的漸變凤类，只要使用恰當(dāng)，那對(duì)網(wǎng)站來(lái)說(shuō)普气，便是錦上添花谜疤。
知道了漸變的各種方式，我們來(lái)看看我們可以將漸變色用在網(wǎng)站的哪些地方當(dāng)中。
1夷磕、整體界面漸變的扁平化配色
整體界面用到漸變色的大都出現(xiàn)在一些餐飲履肃、游戲或是動(dòng)漫的網(wǎng)站當(dāng)中。當(dāng)然坐桩，現(xiàn)在電商的一些店鋪也很多采用漸變色來(lái)展示自己的商品尺棋。
漸變色在整個(gè)界面當(dāng)中的大幅使用，可以豐富界面撕攒，豐富情感陡鹃。
Thirsty Planet-礦泉水網(wǎng)站這個(gè)網(wǎng)站采用了扁平化的漸變配色方案，扁平化的設(shè)計(jì)風(fēng)格給人簡(jiǎn)約時(shí)尚的時(shí)間感受抖坪。
紅色小象的天貓旗艦店萍鲸，店鋪風(fēng)格也是用到了漸變色，粉色的漸變給人溫暖溫馨的視覺(jué)感受擦俐，也比較適合紅色小象的品牌形象脊阴。
像開(kāi)源即時(shí)通訊喧喧的官網(wǎng)一樣，也是采用了漸變色的背景蚯瞧，整體簡(jiǎn)潔又豐富嘿期。
2、使用漸變色疊加圖片
用漸變色疊加圖片來(lái)做幻燈片埋合，這種效果很容易出彩备徐，但是使用不好，效果也會(huì)很low甚颂。一般都是漸變色疊加在圖片的上面蜜猾，形成一定的彩色朦朧感。
Velten Media網(wǎng)絡(luò)營(yíng)銷公司網(wǎng)站振诬，中間三個(gè)區(qū)塊采用了漸變色疊加圖片的表現(xiàn)形式蹭睡。增加了時(shí)尚感。
iVengo廣告企業(yè)網(wǎng)站赶么，這個(gè)網(wǎng)站也是典型的漸變色疊加圖片的效果肩豁，這種效果很容易出彩，網(wǎng)站簡(jiǎn)約卻不單調(diào)辫呻。這是一個(gè)雙漸變色的使用清钥，這個(gè)雙漸變色用的很大膽，藍(lán)色和橙色可以說(shuō)是對(duì)比色放闺，當(dāng)設(shè)計(jì)師卻降低了一些透明度循捺，使得這兩個(gè)顏色很和諧。
說(shuō)到雙漸變色雄人，可能大家腦袋里浮現(xiàn)出來(lái)的就是藍(lán)色和綠色从橘。的確念赶，這個(gè)雙漸變色的組合搭配被運(yùn)用得最廣。但是只要用處跟別人的與眾不同恰力，還是很酷的叉谜。
3、使用漸變色的背景圖片
使用漸變色的背景圖片來(lái)做banner踩萎，比較直接了當(dāng)停局。
Haikure時(shí)尚服飾和哈根達(dá)斯冷飲巧克力雪糕網(wǎng)站就直接了當(dāng)?shù)挠昧藵u變色的背景圖片來(lái)當(dāng)banner，這種效果可以直接明了的展示產(chǎn)品香府，但又能豐富界面董栽。
用進(jìn)變色背景圖片來(lái)做banner，大部分出現(xiàn)在產(chǎn)品網(wǎng)站當(dāng)中企孩。
4锭碳、在元素中使用漸變
如果不適合大幅度使用漸變色的話，可以嘗試在網(wǎng)站的元素中來(lái)添加漸變勿璃。元素可以是：導(dǎo)航擒抛、按鈕、邊框补疑、區(qū)塊歧沪、圖片、字體等等莲组。
簡(jiǎn)單舉幾個(gè)例子給大家看看：
EXERON數(shù)據(jù)公司網(wǎng)站這個(gè)界面設(shè)計(jì)也比較簡(jiǎn)約诊胞，但是字體元素用了漸變色，漸變色的使用點(diǎn)綴了整個(gè)界面锹杈，也使整個(gè)界面鮮活起來(lái)撵孤。
還是開(kāi)源即時(shí)通訊喧喧的官網(wǎng)的例子，上面可以看到首頁(yè)的幻燈片采用了一個(gè)漸變的顏色嬉橙，而且這個(gè)顏色是實(shí)時(shí)在變化早直。當(dāng)進(jìn)入內(nèi)頁(yè)時(shí)寥假，界面內(nèi)容比較素市框，所以設(shè)計(jì)師在導(dǎo)航的頭部加了一個(gè)一樣的漸變色。這個(gè)漸變色的添加糕韧，起到了錦上添花的作用枫振，也讓整個(gè)節(jié)目豐富起來(lái)。導(dǎo)航條的漸變色也是實(shí)時(shí)在變化的萤彩，細(xì)心的話可以發(fā)現(xiàn)粪滤。這樣的設(shè)計(jì)很和諧又不突兀，同時(shí)起到了很好的效果雀扶。
漸變色在網(wǎng)頁(yè)中的使用沒(méi)有一個(gè)明確的使用規(guī)則杖小，上面歸納的四點(diǎn)是漸變色在網(wǎng)頁(yè)當(dāng)中常見(jiàn)的出現(xiàn)方式肆汹，大家可以學(xué)習(xí)一下這些方式運(yùn)用到自己的網(wǎng)站當(dāng)中去∮枞ǎ總的來(lái)說(shuō)昂勉，豐富色彩的漸變是一種能花最少的時(shí)間來(lái)增加用戶吸引力的方式，簡(jiǎn)潔大方扫腺，又能抓住受眾的眼球岗照。
最后，跟大家分享一個(gè)酷斃了的漸變色網(wǎng)站——itmeo笆环，如果你不知道做什么樣的漸變色好攒至，可以去上面找點(diǎn)靈感，上面收集了各種色系的漸變色躁劣。
