要論什么設(shè)計(jì)風(fēng)格能一招鮮、吃遍天，彌散漸變絕對(duì)占有一席之位的。

它在設(shè)計(jì)投入上花費(fèi)的成本很低，但是卻非常容易出效果，而且近來(lái)設(shè)計(jì)圈也非常流行。

今天帶來(lái)了關(guān)于彌散漸變的超干干貨，學(xué)會(huì)后再也不愁怎么設(shè)計(jì)出好看的背景，一定要看到最后哦～

啥是彌散漸變？

先介紹下它的親戚——彌散投影，大家都有聽(tīng)過(guò)。

在按鈕底部加一塊高斯模糊后的色塊，降低點(diǎn)透明度，再加個(gè)騷氣十足的漸變，效果就出來(lái)了，在那個(gè)盛行彌散投影的年代，幾乎每個(gè)作品都能看到這個(gè)風(fēng)格。

·

這里你應(yīng)該知道了，彌散投影的關(guān)鍵，是高斯模糊。

從百科上對(duì)彌散的定義，也能很好地解釋彌散和高斯模糊的對(duì)應(yīng)關(guān)系。

·

所以，彌散漸變風(fēng)格也就很好理解了，它就是通過(guò)色彩的高度模糊來(lái)形成的一種獨(dú)特的漸變。

·

·

如果你有關(guān)注過(guò)流行趨勢(shì)，你應(yīng)該也聽(tīng)過(guò)它的另一個(gè)稱(chēng)呼——彌散光感。其實(shí)都一樣，不過(guò)我還是習(xí)慣稱(chēng)之為彌散漸變，畢竟很多時(shí)候它的光感并沒(méi)有那么明顯。

彌散漸變和毛玻璃

說(shuō)起來(lái)，這兩個(gè)風(fēng)格其實(shí)算直系血緣關(guān)系。

舉個(gè)例子。

在兩個(gè)畫(huà)布上分別對(duì)卡片、形狀元素做背景模糊處理和高斯模糊處理，就分別生成了簡(jiǎn)單的毛玻璃和彌散漸變風(fēng)格。

最后，從兩個(gè)畫(huà)布中分別截取同等面積的圖像，你會(huì)發(fā)現(xiàn)，兩者沒(méi)有任何區(qū)別。

·

也就是說(shuō)，毛玻璃和彌散漸看似兩類(lèi)風(fēng)格，本質(zhì)上其實(shí)屬于一類(lèi)。

唯一的區(qū)別就在于，毛玻璃存在明顯的前后縱向?qū)蛹?jí)關(guān)系。而彌散漸變，由于圖形和背景完全融合，大幅降低了縱向?qū)蛹?jí)感，因此只剩下一層結(jié)構(gòu)。

·

這也就讓彌散漸變風(fēng)格，極其適合作為背景層，去承載各類(lèi)信息和內(nèi)容。

彌散漸變的特點(diǎn)

1. 傳達(dá)氛圍

傳統(tǒng)的線性漸變，相比扁平色，產(chǎn)生了兩種甚至兩種以上顏色的過(guò)渡變化，給予觀者多元化的感官體驗(yàn)。

而彌散漸變，在此基礎(chǔ)上又產(chǎn)生了虛實(shí)的層次變化，傳達(dá)出一種非常夢(mèng)幻、抽象的氛圍，視覺(jué)感官的體驗(yàn)要更加深刻和舒適。

·

2. 表現(xiàn)力

由于好奇、求知的天性，人們對(duì)于無(wú)法被準(zhǔn)確命名的事物更容易留下印象。比如彌散漸變，因?yàn)閺浬⒌奶匦?，讓圖形的形狀、顏色和背景完全融合在一起，所以很多時(shí)候我們無(wú)法準(zhǔn)確說(shuō)出它具體屬于哪一種顏色、哪一類(lèi)形狀。

而且不同顏色的搭配可以產(chǎn)生不同的情緒，和彌散做疊加，所帶來(lái)的表現(xiàn)力就更多變和獨(dú)特。

·

·

3. 聚焦

色塊對(duì)于人眼的吸引力僅次于動(dòng)畫(huà)，因此可以融入單個(gè)圖形的彌散漸變，形成視覺(jué)焦點(diǎn)，強(qiáng)迫讀者注意到你想讓它注意的地方。

·

·

彌散漸變?cè)趺醋觯?/span>

1. 局部彌散

即在畫(huà)布中局部性地加入彌散漸變。

·

優(yōu)勢(shì)：

1. 具備毛玻璃的通透感
2. 輕量
3. 能夠聚焦內(nèi)容

劣勢(shì)：

表現(xiàn)力、沉浸感低于滿版彌散

做法：

1. 創(chuàng)建你喜歡的幾個(gè)形狀，形狀的距離越近、融合感越強(qiáng)。
2. 高斯模糊調(diào)大，搞定。高斯模糊的數(shù)值盡管往大了調(diào)，不用克制～

·

當(dāng)然你也可以用不規(guī)則圖形，相比基礎(chǔ)幾何，不規(guī)則圖形的彌散漸變更加靈活自然。步驟是一樣，只是在形狀的繪制上多花點(diǎn)時(shí)間。

·

不要拘泥于扁平色，可以嘗試通過(guò)漸變來(lái)讓彌散漸變更加多彩和夢(mèng)幻。

·

2. 滿版彌散

滿版彌散的意思就是將彌散鋪滿一整個(gè)畫(huà)布。

優(yōu)勢(shì)：

相比局部，滿版的視覺(jué)度和表現(xiàn)力更強(qiáng)。

劣勢(shì)：

1. 缺失了毛玻璃那樣的通透感
2. 也不能起到聚焦的作用

3. 滿版彌散的兩類(lèi)子風(fēng)格

異色疊加風(fēng)

需要先提前疊加一層線性漸變讓背景呈現(xiàn)一個(gè)顏色傾向，然后加入多個(gè)不同顏色的圖形并通過(guò)疊加形成縱向?qū)哟侮P(guān)系，然后和局部彌散一樣的步驟，這里不贅述。

·

同色鋪滿

即將多個(gè)形狀填充同一種漸變，再鋪滿畫(huà)布。

多形狀鋪滿一般用不規(guī)則形狀，避免基礎(chǔ)形狀鋪滿帶來(lái)的呆板生硬。

這里介紹個(gè)快速繪制不規(guī)則形狀的 figma 插件——Blobs。

·

它的作用：能快速生成一個(gè)不規(guī)則形狀，而且每執(zhí)行一次，形狀都會(huì)做一次變化。

我們執(zhí)行八次，然后將所有形狀鋪滿整個(gè)畫(huà)布。

·

然后，為所有形狀加入同一個(gè)漸變色（可以直接在這個(gè)網(wǎng)站找—— https://www.grabient.com/ ），最后做高斯模糊。這種效果不像異色疊加那樣產(chǎn)生明顯的色彩過(guò)渡，因此會(huì)表現(xiàn)出一種水彩的暈染感，非常生動(dòng)自然。

·

最后，選中其中一兩個(gè)形狀做下顏色的變化，目的是讓它產(chǎn)生對(duì)比以吸引眼球。隨便排版裝飾下，搞定。

·

通過(guò)這種方式，我很快搞完了幾類(lèi)色系的延展——

·

當(dāng)然，你也可以來(lái)點(diǎn)兒噪點(diǎn)

噪點(diǎn)的意義是通過(guò)疊加一層肌理來(lái)迅速提升畫(huà)面質(zhì)感、拉高細(xì)節(jié)，提升視覺(jué)愉悅。

·

最后，福利領(lǐng)取時(shí)間～

案例源文件（sketch&figma 格式）和絕美的彌散漸變素材，在附件下載！

我是 Andrew，下期見(jiàn)。

歡迎關(guān)注作者微信公眾號(hào)：「轉(zhuǎn)行人的設(shè)計(jì)筆記」