網(wǎng)站建設中模糊背景設計的優(yōu)雅發(fā)布者：本站     時(shí)間：2022-03-27 10:03:57

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


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


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

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



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

模糊背景設計的優(yōu)雅


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

模糊背景設計的優(yōu)雅


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

模糊背景設計的優(yōu)雅


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

模糊背景設計的優(yōu)雅


下面是一個(gè)醫療應用，大面積藍色模糊背景中，運用了很好的背景虛化效果，以配合時(shí)尚的綠松石色的功能面板。

模糊背景設計的優(yōu)雅


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

模糊背景設計的優(yōu)雅


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

模糊背景設計的優(yōu)雅


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

模糊背景設計的優(yōu)雅


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

模糊背景設計的優(yōu)雅


天氣應用！由 Fueled設計的，經(jīng)過(guò)反復推敲，無(wú)不散發(fā)著(zhù)精致和匠心的應用界面。它有2個(gè)設計上的創(chuàng )新：利用模糊背景進(jìn)行巧妙、有效地內容詮釋?zhuān)妥煮w與輪廓圖形設計的非常匹配。

模糊背景設計的優(yōu)雅


由Georg Bednorz 設計的設置界面，設計師借力繽紛顏色的萬(wàn)花筒形成了一個(gè)精彩的案例，使得界面看起來(lái)愉快又充滿(mǎn)積極活力。在白色蒙版下五顏六色的模糊背景很好的和前景活潑的元素相呼應。

模糊背景設計的優(yōu)雅


下面的這個(gè)設計傳達了一個(gè)很溫暖的氛圍。設計師讓界面呈現簡(jiǎn)單易懂，其中運用到了光滑而模糊的光斑背景，大號字體和直觀(guān)地圖標。

模糊背景設計的優(yōu)雅


設計師完全是通過(guò)調色板帶來(lái)了成熟的女性氛圍。利落的使用紫羅蘭的時(shí)尚色調創(chuàng )造了柔和的氛圍，線(xiàn)性的輪廓和優(yōu)雅的形態(tài)，使主題看上去十分完整。

模糊背景設計的優(yōu)雅


這個(gè)界面看起來(lái)十分的和諧平衡，模糊的自然圖像有效的使原本就小而妙的字體內容呈現變得熱鬧起來(lái)。

模糊背景設計的優(yōu)雅


設計人員需要一個(gè)更傳統的解決方案，下面的設計，利用黑色和白色兩種顏色之間的鮮明對比。像常規那樣，背景有較深的色調外觀(guān)，而使內容與圖標看起來(lái)突出。

模糊背景設計的優(yōu)雅


導航菜單有一個(gè)充滿(mǎn)美感、圓潤的外觀(guān)，灰色調背景完美補充著(zhù)單色的線(xiàn)型字體。

模糊背景設計的優(yōu)雅


登錄屏幕目的是有效鼓勵用戶(hù)登錄。下圖棕色調背景和灰色輸入框彼此簡(jiǎn)潔地呼應，使界面變得令人愉悅且不干擾操作。

模糊背景設計的優(yōu)雅


下面的iPhone天氣應用程序經(jīng)過(guò)了質(zhì)感的處理，變得明亮而優(yōu)雅，設計師提供了多種選擇，為用戶(hù)提供各種自定義的天氣模板，來(lái)滿(mǎn)足用戶(hù)的個(gè)性化。

模糊背景設計的優(yōu)雅


下圖是iOS 7天氣應用 – 底下地圖像立刻給天氣變化帶來(lái)實(shí)時(shí)感，提供了一個(gè)相當有價(jià)值的信息界面。輕微模糊的天氣場(chǎng)景增加了一種自然設計理念。

模糊背景設計的優(yōu)雅


這個(gè)媒體播放器控制中心的樣式是一個(gè)常見(jiàn)形式，模糊的背景有助于有效地突出重要組成部分。

模糊背景設計的優(yōu)雅


最少量的布局和模糊的背景，最大化集中有效地引起中央按鈕的注意。

模糊背景設計的優(yōu)雅
 

設計思考延展
模糊的背景，無(wú)論它是一張幾乎失焦的圖像，或是比較含糊朦朧的圖片，設法有效地去除前景元素，而強調有用的文本，或是微小的圖形。用以創(chuàng )建細致微妙的強對比效果，這將會(huì )是一個(gè)完美的搭配。