模糊背景設(shè)計的優(yōu)雅（翻譯）

大濕兄

2014-05-20

2 評論 4059 瀏覽 2 收藏

10 分鐘

模糊背景（blurred backgrounds）長時間以來都是作為一個基本的照片效果，但在最近模糊背景已做為使設(shè)計元素脫穎而出的非凡工具，而受到很多設(shè)計師的青睞。這種做法相當(dāng)容易，悄無聲息又自然的給予內(nèi)容適當(dāng)突出，圖標(biāo)和圖形就能脫穎而出。這樣做能夠二鳥一石。首先，你可以為你的項目增加些不一樣的效果；其次，適當(dāng)?shù)脑黾舆@種設(shè)計效果對小尺寸的手機(jī)屏幕很有必要，能有效地提高可讀性體驗(yàn)。

模糊的背景還提供了其他潛在的好處。例如，你可以輕易減少你的調(diào)色板，而只側(cè)重于一個主色，尤其是在使用白色為基調(diào)的設(shè)計，在模糊背景下看起來絕對精彩、干凈。至于圖形，你可以使用面或線形的圖形，都能很好地與這樣的圖像進(jìn)行呼應(yīng)。字體也不受其影響，因此，即使超窄的字體也會顯得清晰易讀。

現(xiàn)在，我們繼續(xù)來看一些令人驚艷的App界面，用各種實(shí)例和方案來證明這種強(qiáng)大的效果。

基于模糊背景（blurred backgrounds）的App范例

下面是由Rocket Child正在進(jìn)行的Solar alarm的項目，設(shè)計方案有個很可愛，充滿活力的圓形構(gòu)圖。線條分明的設(shè)計元素與失焦炫光背景完美的融合在一起，使得畫面看起來是多么的和諧、精致。

下面是一個健身應(yīng)用程序，是呈現(xiàn)半透明玻璃質(zhì)感的圖層和友好控件組合都覆蓋到模糊的背景上的方案，其中綠色景觀的情景增加了一些自然設(shè)計因素。

通知面板的設(shè)計巧妙地利用了溫暖的色彩，以使界面充滿更加積極的外觀。像上面的案例一樣，設(shè)計師也運(yùn)用了低透明的模糊背景和優(yōu)雅的小部件和諧共生。

這個菜單通過鏡頭流暢的切換，描繪了菜單兩態(tài)的變化，在灰色的模糊背景中，白色的黑體字和時尚圖形符號有很好地融合。

下面是一個醫(yī)療應(yīng)用，大面積藍(lán)色模糊背景中，運(yùn)用了很好的背景虛化效果，以配合時尚的綠松石色的功能面板。

下面的列表設(shè)計是基于一個充滿活力的圖像背景，巧妙地散焦效果使得前面的設(shè)計元素更加突出。因此，所有的文字內(nèi)容和圖形元素都能呈現(xiàn)出一個很清晰效果。

接下來是iOS 7的音樂應(yīng)用，這個方案里有個小而美的CD圖像，很適合放在這里。后面大面積暖色調(diào)的模糊背景為音樂播放器和控件組，提供了良好的氛圍。

Extranet 是個美好光澤和氛圍的應(yīng)用范例，有利的模糊化背景和眾多的控件組成了這樣的理想組合，讓界面變得美觀大方。

下圖演示了白色銳利圖標(biāo)與城市模糊圖片背景的常規(guī)排版設(shè)計，形成了干脆且精致的側(cè)面菜單設(shè)計方案。

天氣應(yīng)用！由?Fueled設(shè)計的，經(jīng)過反復(fù)推敲，無不散發(fā)著精致和匠心的應(yīng)用界面。它有2個設(shè)計上的創(chuàng)新：利用模糊背景進(jìn)行巧妙、有效地內(nèi)容詮釋，超窄型字體與輪廓圖形設(shè)計的非常匹配。