模糊背景(blurred backgrounds)是一個很常見的設(shè)計效果，也被稱為背景虛化，在網(wǎng)頁和App的設(shè)計中屢見不鮮。虛化的界面設(shè)計直觀的給人一種干凈自然的視覺感受，因此，模糊背景的基調(diào)會使整個界面看起來更柔美。合理運用虛化背景可以將界面效果提高一個檔次，下面就是背景虛化的案例，供大家賞析學(xué)習(xí)。

　　1.circle將繁華的城市場景做了虛化效果，背景會隨著輸入的城市而變化，或繁華或靜謐，但都無一例外的突出了每座城市的獨特之處。當(dāng)背景被蒙上一層朦朧的外衣后，產(chǎn)生了一種喧囂背后的城市沉淀。

　　2.隨筆記錄型網(wǎng)站很應(yīng)景的運用了模糊的風(fēng)景照作為主背景，溫暖清新的色調(diào)讓界面看起來更加清爽鄰家，完全不會影響到背景之上的文案和圖片的瀏覽。

　　3. Maxim Siebert是一個設(shè)計與前端開發(fā)結(jié)合的網(wǎng)站，設(shè)計感和瀏覽體驗都讓用戶達(dá)到了最舒適的狀態(tài)。整個網(wǎng)站都以溫和的綠色和大片的灰白為主，模糊的背景設(shè)計和扁平化的融合，讓我們在瀏覽時瞬間沉靜下來。

　　4. Master & Dynamic的模糊背景使用了夜景中的彩色光斑處理，配以簡單的文字，讓產(chǎn)品更加顯眼，也讓網(wǎng)站的目的性更加明確，瀏覽者一看網(wǎng)站就知道耳機才是重點。唯一的不足之處就是實心的黃色“subscribe”按鈕，如果能夠使用透明線框的按鈕設(shè)計，也許能夠更好地融入整個界面中。

　　5.Litely作為一個高質(zhì)量攝影作品的分享網(wǎng)站，高清高質(zhì)量的照片一定是主角。唯有使用模糊的背景設(shè)計才能體現(xiàn)出主打作品原有的美感，讓每一個細(xì)節(jié)原原本本的展現(xiàn)在瀏覽者面前，讓我們不受任何干擾的欣賞所有照片。

　　6.本網(wǎng)站呈現(xiàn)出了類似于Metro的界面風(fēng)格設(shè)計，模糊背景與清晰圖片的互相交錯，讓我們有更舒適的視覺體驗。鮮艷的色彩清晰化，單一的色彩則選擇模糊化，以及圖片的大小尺寸設(shè)置，這些都元素都配置的恰到好處。

　　7. Spendee是一個能夠隨時管理個人財政收情況的應(yīng)用軟件，網(wǎng)站在布局排版上都采用了較為保守的做法，但模糊界面的設(shè)計為整個網(wǎng)站帶來了一陣清新。APP界面的清晰處理與之產(chǎn)生鮮明對比，看了之后，你是不是也很想下載呢?

　　8.這個網(wǎng)站與大多數(shù)模糊背景設(shè)計的不同之處是，網(wǎng)站并沒有將圖片全部采用模糊化，而是選擇了局部模糊，這樣的設(shè)計能讓背景的質(zhì)感更加真實化，同時也增添了幾分可愛俏皮的感覺，提升了網(wǎng)站的趣味性。

　　9. GetGoldee是一個主打智能化燈光控制器的網(wǎng)站，網(wǎng)站整體構(gòu)造非常符合智能化的理念。首頁中的設(shè)計很明確的被劃分成兩部分，左半部分的低透明效果更加增強了右邊產(chǎn)品橫空出世的感覺。

　　10.最后一個案例來自于AnyForWeb的品牌站。網(wǎng)站使用了超長網(wǎng)頁的設(shè)計手法，以及頁面自適應(yīng)和視差滾動的前端效果，模糊背景的設(shè)計讓網(wǎng)站變得更加柔和。與普通模糊背景設(shè)計有所不同，AnyForWeb品牌站中的模糊效果用線條覆蓋來實現(xiàn)，讓背景又多了些復(fù)古的感覺。

　　模糊背景的設(shè)計盡管普通，但仍然讓設(shè)計師們愛不釋手。做法簡單，效果出眾，也許是他們鐘愛這一手法的原因之一。無需過多的修飾，只需加以至簡線面的點綴，將內(nèi)容文字安安靜靜的鋪在背景上，頓時就會令人對她寵愛有加。

        注：更多精彩教程請關(guān)注三聯(lián)網(wǎng)頁設(shè)計教程 欄目，