漸變色應(yīng)該是近兩年來(lái)，各種LOGO、平面以及UI設(shè)計(jì)趨勢(shì)中提到最多的一種大熱元素了。

這個(gè)潮流從最近的新設(shè)計(jì)中就能看出

從LOGO設(shè)計(jì)

到海報(bào)設(shè)計(jì)

via 葉子

甚至到產(chǎn)品設(shè)計(jì)

眼看著漸變色已經(jīng)鋪天蓋地

而自己做的漸變卻是這樣的？

時(shí)下最流行的漸變色，要怎么做？

什么是漸變色

所謂漸變色是指某個(gè)物體的顏色從明到暗，或由深轉(zhuǎn)淺，或是從一個(gè)色彩緩慢過(guò)渡到另一個(gè)色彩，充滿變幻無(wú)窮的神秘浪漫氣息的顏色。

色彩可以給我們不同的感受和情緒，而漸變色則可以給我們更多的想象空間。純粹的漸變色使得色彩更生動(dòng)緩和，不單調(diào)，可以豐富整體設(shè)計(jì)感，卻又不會(huì)增加視覺(jué)負(fù)擔(dān)。合理的使用漸變色可以吸引用戶視覺(jué)焦點(diǎn)、渲染氛圍、提升美感、傳遞情緒等。

漸變現(xiàn)象

漸變現(xiàn)象分為四種：色相漸變、明度漸變、飽和度漸變、綜合漸變。

通過(guò)HSB色彩值來(lái)展示這四種漸變現(xiàn)象，會(huì)非常直觀和容易理解：

色相漸變，言簡(jiǎn)意賅則是由一個(gè)顏色到另一個(gè)顏色的漸變或是多個(gè)顏色的漸變。

明度漸變，是同一色相不同明度，如同一顏色加黑或者加白摻和以后能產(chǎn)生各種不同的明暗層次。

飽和度漸變則是基于各種顏色的不同純度進(jìn)行變化，每一種純度都有與其相應(yīng)的明度。

綜合漸變，即是色相、明度和飽和度同時(shí)發(fā)生變化，完全變成另一種顏色，是我們最常使用的漸變形式。

漸變的顏色數(shù)量

漸變色在數(shù)量上的使用也沒(méi)有一定的規(guī)范。在多數(shù)情況下，分為四種情況：單色漸變、雙色漸變、三色漸變、多色漸變。

單色漸變即是上方演示的單純明度漸變或飽和度漸變。

雙色漸變是最常見(jiàn)的漸變，同時(shí)它也是一把雙刃劍，因?yàn)槌Ｒ?jiàn)所以用起來(lái)不會(huì)造成太大的錯(cuò)誤，也因?yàn)槌Ｒ?jiàn)所以常常不會(huì)給人視覺(jué)上的震撼。

三色漸變是除了雙色漸變之外另一種常見(jiàn)的漸變，視覺(jué)效果上較雙色漸變更有層次感。

而多色漸變比較少運(yùn)用，因?yàn)榘盐詹缓镁蜁?huì)給設(shè)計(jì)造成花俏輕浮的感覺(jué)，特定情況下除外。

總的來(lái)說(shuō)，顏色越少越不容易出錯(cuò)，但同時(shí)越豐富的層次感，越是需要多種顏色的相互碰撞形成，對(duì)顏色的理解和融合的技巧要求越高。

漸變的表現(xiàn)形式

漸變色有五種形式，線性漸變、徑向漸變、角度漸變、對(duì)稱漸變、菱角漸變。在日常設(shè)計(jì)工作中線性漸變、徑向漸變用的較多。

了解了漸變色的一些基本概念后，接下來(lái)我們?cè)俜治鱿略谑褂脻u變色過(guò)程中幾種常用的表現(xiàn)手法：

漸變要如何應(yīng)用？

一、雙色漸變

雙色漸變是漸變?cè)O(shè)計(jì)中很重要的組成部分，是設(shè)計(jì)師們最常用的創(chuàng)作手法之一。其漸變現(xiàn)象可多種多樣。漸變方向主要指從一個(gè)顏色到另一個(gè)顏色的漸變，如下圖A-B，有橫向漸變、縱向漸變、對(duì)角漸變?nèi)N方式。

雙色漸變可作為設(shè)計(jì)的主視覺(jué)存在，也可是諸多特性中的一個(gè)。其效果是獨(dú)一無(wú)二的，可以讓畫(huà)面更加豐富、活潑，同時(shí)使畫(huà)面更整體統(tǒng)一，提升美感。

橫向漸變

縱向漸變

對(duì)角漸變

二、圖片上的漸變色疊加

在圖片上疊加色彩已經(jīng)流行了相當(dāng)長(zhǎng)的一段時(shí)間。這種漸變通常在背景、照片中使用，可讓畫(huà)面更具神秘、優(yōu)雅、更具吸引力，讓用戶注意到上面更加重要和更關(guān)鍵的元素。

其中半透明的疊加可以讓畫(huà)面更細(xì)膩，同時(shí)也奠定了畫(huà)面的主色調(diào)，這種設(shè)計(jì)對(duì)于大圖的作用尤其明顯，可以為圖片帶來(lái)耳目一新的感覺(jué)。

使用過(guò)程中要注意對(duì)背景圖的挑選，色調(diào)應(yīng)與內(nèi)容的含義相匹配，疊加后需強(qiáng)化頁(yè)面信息的可讀性，不要只為了裝飾而裝飾，否則呈現(xiàn)出來(lái)的結(jié)果會(huì)完全相反。

上面Spotify的頁(yè)面采用了圖片疊底和雙色縱向漸變，弱化圖片、讓文字可讀性更強(qiáng)的同時(shí)，使畫(huà)面依舊靈動(dòng)具有視覺(jué)沖擊力。

而對(duì)于文字比重不高的海報(bào)，漸變色的運(yùn)用更多是側(cè)重于協(xié)調(diào)圖片與顏色的關(guān)系。

三、多層次漸變疊加

兩年前，Instagram放棄了復(fù)古相機(jī)樣式的LOGO，更換成集合了多種顏色的漸變色扁平新圖標(biāo)，引發(fā)了大家激烈的討論。

不管這個(gè)設(shè)計(jì)好壞與否，我們都不得不承認(rèn)，這個(gè)彩虹色讓人眼前一亮。也讓我們重新認(rèn)識(shí)到在UI設(shè)計(jì)中，使用得當(dāng)?shù)臐u變色彩，可以使界面和圖標(biāo)的設(shè)計(jì)感得到迅速提升。

Instagram圖標(biāo)主要由一組線性對(duì)角漸變，加兩組球形徑向漸變疊加組成。細(xì)數(shù)一下，里面融合了桃紅、紫、橙、黃、藍(lán)五種顏色，可以說(shuō)是多色漸變中非常具有技術(shù)含量的一個(gè)設(shè)計(jì)。

四、色塊漸變

漸變的顏色不只可以運(yùn)用在一個(gè)色塊上，還可以運(yùn)用在一組色塊上。

不如說(shuō)下面的這組海報(bào)，設(shè)計(jì)師會(huì)采用同類色、近似色、對(duì)比色、補(bǔ)色，將一個(gè)圖形中的分區(qū)清晰區(qū)分開(kāi)，讓圖形色塊平衡在一個(gè)頻率上，這樣的畫(huà)面多姿多彩，也更富有節(jié)奏感和舒適性。

五、置入元素

還有一種漸變色的使用方式是將漸變色置入到版面中的元素內(nèi)，最常見(jiàn)的兩種形式就是置入到幾何元素當(dāng)中和置入到文字當(dāng)中。

這兩種形式都會(huì)為畫(huà)面帶來(lái)一些變化性，同時(shí)又能夠緩沖色彩與色彩之間的沖突，但需要注意漸變色之間的統(tǒng)一與協(xié)調(diào)，建議一個(gè)版面當(dāng)中不要置入數(shù)量過(guò)多的漸變色，以免造成設(shè)計(jì)的最終效果顯得混亂。

第58屆塞薩洛尼基國(guó)際電影節(jié)海報(bào)

▼

以上兩張電影節(jié)海報(bào)，將漸變色置入到數(shù)字“58”當(dāng)中，采用了多種顏色的疊加漸變，與黑色背景形成鮮明對(duì)比，重點(diǎn)突出這兩個(gè)數(shù)字。

這一形式同樣可以應(yīng)用于字體LOGO上，比如說(shuō)前陣時(shí)間更換新LOGO的榮耀手機(jī)，在新LOGO的變色上加入了與產(chǎn)品呼應(yīng)的漸變色系。

六、網(wǎng)格漸變

AI網(wǎng)格工具繪畫(huà)出的成品不亞于3D，是一種很好的矢量畫(huà)圖方法，繪畫(huà)技巧相對(duì)復(fù)雜，要求較高，廣泛用于平面設(shè)計(jì)作品中。

網(wǎng)格配色的運(yùn)用，考驗(yàn)設(shè)計(jì)師的顏色搭配功底，調(diào)整每一個(gè)瞄點(diǎn)讓色彩過(guò)渡自然，也可采用多圖層的疊加方式。

via 網(wǎng)絡(luò)

via 唐寅

你見(jiàn)過(guò)最土的漸變色是什么樣的？

匯包裝，一站解決產(chǎn)品包裝定制需求，17年經(jīng)驗(yàn)/源工廠，一分鐘就給到您產(chǎn)品的包裝預(yù)算，萬(wàn)款案例讓您快速做出決策，最快看到樣品及量產(chǎn)所需時(shí)間，您產(chǎn)品銷量暴增開(kāi)始！