萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 手機APP模糊背景設計的優雅

手機APP模糊背景設計的優雅

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

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

  現在,我們繼續來看一些令人驚艷的App界面,用各種實例和方案來證明這種強大的效果。

  基於模糊背景(blurred backgrounds)的App范例

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

手機APP模糊背景設計的優雅 三聯

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

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

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

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

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

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

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

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

  天氣應用!由 Fueled設計的,經過反復推敲,無不散發著精致和匠心的應用界面。它有2個設計上的創新:利用模糊背景進行巧妙、有效地內容诠釋,超窄型字體與輪廓圖形設計的非常匹配。

  由Georg Bednorz 設計的設置界面,設計師借力缤紛顏色的萬花筒形成了一個精彩的案例,使得界面看起來愉快又充滿積極活力。在白色蒙版下五顏六色的模糊背景很好的和前景活潑的元素相呼應。

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

  設計師完全是通過調色板帶來了成熟的女性氛圍。利落的使用紫羅蘭的時尚色調創造了柔和的氛圍,線性的輪廓和優雅的形態,使主題看上去十分完整。

copyright © 萬盛學電腦網 all rights reserved