柔美自然!溫暖人心的模糊界面設(shè)計(jì)

0 評(píng)論 4523 瀏覽 3 收藏 7 分鐘

 

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

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

柔美自然!溫暖人心的模糊界面設(shè)計(jì)

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

柔美自然!溫暖人心的模糊界面設(shè)計(jì)

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

柔美自然!溫暖人心的模糊界面設(shè)計(jì)

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

柔美自然!溫暖人心的模糊界面設(shè)計(jì)

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

柔美自然!溫暖人心的模糊界面設(shè)計(jì)柔美自然!溫暖人心的模糊界面設(shè)計(jì)

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

柔美自然!溫暖人心的模糊界面設(shè)計(jì)

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

柔美自然!溫暖人心的模糊界面設(shè)計(jì)

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

柔美自然!溫暖人心的模糊界面設(shè)計(jì)

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

柔美自然!溫暖人心的模糊界面設(shè)計(jì)

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

柔美自然!溫暖人心的模糊界面設(shè)計(jì)

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

原文:http://design.anyforweb.com/newsDetail263.shtml

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!