網(wǎng)站建設(shè)中模糊背景設(shè)計(jì)的優(yōu)雅發(fā)布者:本站 時(shí)間:2022-03-27 10:03:57
模糊背景(blurred backgrounds)長(zhǎng)時(shí)間以來(lái)都是作為一個(gè)基本的照片效果,但在最近模糊背景已做為使設(shè)計(jì)元素脫穎而出的非凡工具,而受到很多設(shè)計(jì)師的青睞。這種做法相當(dāng)容易,悄無(wú)聲息又自然的給予內(nèi)容適當(dāng)突出,圖標(biāo)和圖形就能脫穎而出。這樣做能夠二鳥(niǎo)一石。首先,你可以為你的項(xiàng)目增加些不一樣的效果;其次,適當(dāng)?shù)脑黾舆@種設(shè)計(jì)效果對(duì)小尺寸的手機(jī)屏幕很有必要,能有效地提高可讀性體驗(yàn)。
模糊的背景還提供了其他潛在的好處。例如,你可以輕易減少你的調(diào)色板,而只側(cè)重于一個(gè)主色,尤其是在使用白色為基調(diào)的設(shè)計(jì),在模糊背景下看起來(lái)絕對(duì)精彩、干凈。至于圖形,你可以使用面或線形的圖形,都能很好地與這樣的圖像進(jìn)行呼應(yīng)。字體也不受其影響,因此,即使超窄的字體也會(huì)顯得清晰易讀。
現(xiàn)在,我們繼續(xù)來(lái)看一些令人驚艷的App界面,用各種實(shí)例和方案來(lái)證明這種強(qiáng)大的效果。
基于模糊背景(blurred backgrounds)的App范例
下面是由Rocket Child正在進(jìn)行的Solar alarm的項(xiàng)目,設(shè)計(jì)方案有個(gè)很可愛(ài),充滿活力的圓形構(gòu)圖。線條分明的設(shè)計(jì)元素與失焦炫光背景完美的融合在一起,使得畫(huà)面看起來(lái)是多么的和諧、精致。
模糊背景設(shè)計(jì)的優(yōu)雅
下面是一個(gè)健身應(yīng)用程序,是呈現(xiàn)半透明玻璃質(zhì)感的圖層和友好控件組合都覆蓋到模糊的背景上的方案,其中綠色景觀的情景增加了一些自然設(shè)計(jì)因素。
模糊背景設(shè)計(jì)的優(yōu)雅
通知面板的設(shè)計(jì)巧妙地利用了溫暖的色彩,以使界面充滿更加積極的外觀。像上面的案例一樣,設(shè)計(jì)師也運(yùn)用了低透明的模糊背景和優(yōu)雅的小部件和諧共生。
模糊背景設(shè)計(jì)的優(yōu)雅
這個(gè)菜單通過(guò)鏡頭流暢的切換,描繪了菜單兩態(tài)的變化,在灰色的模糊背景中,白色的黑體字和時(shí)尚圖形符號(hào)有很好地融合。
模糊背景設(shè)計(jì)的優(yōu)雅
下面是一個(gè)醫(yī)療應(yīng)用,大面積藍(lán)色模糊背景中,運(yùn)用了很好的背景虛化效果,以配合時(shí)尚的綠松石色的功能面板。
模糊背景設(shè)計(jì)的優(yōu)雅
下面的列表設(shè)計(jì)是基于一個(gè)充滿活力的圖像背景,巧妙地散焦效果使得前面的設(shè)計(jì)元素更加突出。因此,所有的文字內(nèi)容和圖形元素都能呈現(xiàn)出一個(gè)很清晰效果。
模糊背景設(shè)計(jì)的優(yōu)雅
接下來(lái)是iOS 7的音樂(lè)應(yīng)用,這個(gè)方案里有個(gè)小而美的CD圖像,很適合放在這里。后面大面積暖色調(diào)的模糊背景為音樂(lè)播放器和控件組,提供了良好的氛圍。
模糊背景設(shè)計(jì)的優(yōu)雅
Extranet 是個(gè)美好光澤和氛圍的應(yīng)用范例,有利的模糊化背景和眾多的控件組成了這樣的理想組合,讓界面變得美觀大方。
模糊背景設(shè)計(jì)的優(yōu)雅
下圖演示了白色銳利圖標(biāo)與城市模糊圖片背景的常規(guī)排版設(shè)計(jì),形成了干脆且精致的側(cè)面菜單設(shè)計(jì)方案。
模糊背景設(shè)計(jì)的優(yōu)雅
天氣應(yīng)用!由 Fueled設(shè)計(jì)的,經(jīng)過(guò)反復(fù)推敲,無(wú)不散發(fā)著精致和匠心的應(yīng)用界面。它有2個(gè)設(shè)計(jì)上的創(chuàng)新:利用模糊背景進(jìn)行巧妙、有效地內(nèi)容詮釋?zhuān)妥煮w與輪廓圖形設(shè)計(jì)的非常匹配。
模糊背景設(shè)計(jì)的優(yōu)雅
由Georg Bednorz 設(shè)計(jì)的設(shè)置界面,設(shè)計(jì)師借力繽紛顏色的萬(wàn)花筒形成了一個(gè)精彩的案例,使得界面看起來(lái)愉快又充滿積極活力。在白色蒙版下五顏六色的模糊背景很好的和前景活潑的元素相呼應(yīng)。
模糊背景設(shè)計(jì)的優(yōu)雅
下面的這個(gè)設(shè)計(jì)傳達(dá)了一個(gè)很溫暖的氛圍。設(shè)計(jì)師讓界面呈現(xiàn)簡(jiǎn)單易懂,其中運(yùn)用到了光滑而模糊的光斑背景,大號(hào)字體和直觀地圖標(biāo)。
模糊背景設(shè)計(jì)的優(yōu)雅
設(shè)計(jì)師完全是通過(guò)調(diào)色板帶來(lái)了成熟的女性氛圍。利落的使用紫羅蘭的時(shí)尚色調(diào)創(chuàng)造了柔和的氛圍,線性的輪廓和優(yōu)雅的形態(tài),使主題看上去十分完整。
模糊背景設(shè)計(jì)的優(yōu)雅
這個(gè)界面看起來(lái)十分的和諧平衡,模糊的自然圖像有效的使原本就小而妙的字體內(nèi)容呈現(xiàn)變得熱鬧起來(lái)。
模糊背景設(shè)計(jì)的優(yōu)雅
設(shè)計(jì)人員需要一個(gè)更傳統(tǒng)的解決方案,下面的設(shè)計(jì),利用黑色和白色兩種顏色之間的鮮明對(duì)比。像常規(guī)那樣,背景有較深的色調(diào)外觀,而使內(nèi)容與圖標(biāo)看起來(lái)突出。
模糊背景設(shè)計(jì)的優(yōu)雅
導(dǎo)航菜單有一個(gè)充滿美感、圓潤(rùn)的外觀,灰色調(diào)背景完美補(bǔ)充著單色的線型字體。
模糊背景設(shè)計(jì)的優(yōu)雅
登錄屏幕目的是有效鼓勵(lì)用戶(hù)登錄。下圖棕色調(diào)背景和灰色輸入框彼此簡(jiǎn)潔地呼應(yīng),使界面變得令人愉悅且不干擾操作。
模糊背景設(shè)計(jì)的優(yōu)雅
下面的iPhone天氣應(yīng)用程序經(jīng)過(guò)了質(zhì)感的處理,變得明亮而優(yōu)雅,設(shè)計(jì)師提供了多種選擇,為用戶(hù)提供各種自定義的天氣模板,來(lái)滿足用戶(hù)的個(gè)性化。
模糊背景設(shè)計(jì)的優(yōu)雅
下圖是iOS 7天氣應(yīng)用 – 底下地圖像立刻給天氣變化帶來(lái)實(shí)時(shí)感,提供了一個(gè)相當(dāng)有價(jià)值的信息界面。輕微模糊的天氣場(chǎng)景增加了一種自然設(shè)計(jì)理念。
模糊背景設(shè)計(jì)的優(yōu)雅
這個(gè)媒體播放器控制中心的樣式是一個(gè)常見(jiàn)形式,模糊的背景有助于有效地突出重要組成部分。
模糊背景設(shè)計(jì)的優(yōu)雅
最少量的布局和模糊的背景,最大化集中有效地引起中央按鈕的注意。
模糊背景設(shè)計(jì)的優(yōu)雅
設(shè)計(jì)思考延展
模糊的背景,無(wú)論它是一張幾乎失焦的圖像,或是比較含糊朦朧的圖片,設(shè)法有效地去除前景元素,而強(qiáng)調(diào)有用的文本,或是微小的圖形。用以創(chuàng)建細(xì)致微妙的強(qiáng)對(duì)比效果,這將會(huì)是一個(gè)完美的搭配。
選擇我們,優(yōu)質(zhì)服務(wù),不容錯(cuò)過(guò)
1. 優(yōu)秀的網(wǎng)絡(luò)資源,強(qiáng)大的網(wǎng)站優(yōu)化技術(shù),穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn),優(yōu)秀的技術(shù)和設(shè)計(jì)水平,更放心
3. 全程省心服務(wù),不必?fù)?dān)心自己不懂網(wǎng)絡(luò),更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話:021-58370032
關(guān)鍵詞標(biāo)簽:上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開(kāi)發(fā)