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

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

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

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

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

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

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

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

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

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

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

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

背景處理的方式多種多樣，總有一種適合你：
《活色生香！16款使用視頻背景的網頁欣賞》
《簡易教程出來啦！教你幾步創建超火的多邊形背景》
《夢寐以求！15個以工作臺為背景的網站設計欣賞》

原文地址：anyforweb

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量74萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：