溫暖人心的模糊界面設計

　　模糊背景(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品牌站中的模糊效果用線條覆蓋來實現，讓背景又多了些復古的感覺。

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

        注：更多精彩教程請關注三聯網頁設計教程 欄目，