想讓網(wǎng)頁更性感?來試試加點(diǎn)透明效果

2013-11-11    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   www.bouu.cn  )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

來源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,   請點(diǎn)這里

隨著CSS的廣泛應(yīng)用,透明元素在網(wǎng)頁設(shè)計(jì)中大量采用。

通過添加透明效果,可以增添頁面的對照感和可讀性,同時(shí)對整體的效果妨礙又不大,可謂一舉兩得。

一般來說,采用透明效果顯示區(qū)塊、展現(xiàn)數(shù)據(jù),透明效果出現(xiàn)在很多輔佐元素當(dāng)中,這樣前景元素就顯得非常突出。
讓我們來看看透明效果,這種優(yōu)雅而又華麗的效果。

Wavefront

整體構(gòu)成比較不拘一格,音樂節(jié)一般的氛圍。霓虹色彩,半透明區(qū)塊,讓色彩更加動(dòng)感,很好的支持了主題。

Wavefront

Advies

頁面中含有很多透明條紋,中間的大區(qū)塊既不影響背景圖像的效果,也能很好的展現(xiàn)信息。

Advies

Medialink

風(fēng)格很怪,真實(shí)感的玻璃背景,透明的圓環(huán)導(dǎo)航元素以及中心區(qū)域的圓環(huán),和整個(gè)網(wǎng)頁的主題很相符(What you Image is what you get)

medialink

Bullhead.

主頁中歡迎新用戶的透明區(qū)塊非常的突出,微件中采用透明效果的范例。

Bullhead

Unknown Croatia

透明區(qū)塊做導(dǎo)航,同時(shí)又不影響背景圖片的展現(xiàn),整體看起來現(xiàn)代感無窮。

Bouquet Restaurant

氛圍感十足,提供了類別廣泛的導(dǎo)航,以便用戶進(jìn)行深度探索。左邊的兩欄側(cè)邊欄——展現(xiàn)了最重要的信息,而第二個(gè)側(cè)邊欄,擁有非常優(yōu)秀的透明效果,增強(qiáng)了整體的氛圍感。

Bouquet Restaurant

He and She Photography

整體的色彩非常明亮,因此,網(wǎng)站沒用采用純色的按鈕,而是采用透明按鈕。

He and She Photography

SYNC

全屏式垂直條紋導(dǎo)航,為了增加整體的可用性,設(shè)計(jì)師利用透明效果來區(qū)分懸停選項(xiàng)和未懸停選項(xiàng)。

SYNC

Mitsubishi Electric

主頁的中心部分打上了三棱的Logo,低不透明度。每個(gè)棱形都代表了自己的象形含義。又不妨礙整體效果。

Mitsubishi Electric

Abby Putinski

這個(gè)網(wǎng)站的透明效果很可愛,看看這個(gè)彈出式歡迎窗口。

Abby Putinski

Marmoset

設(shè)計(jì)師用大圖做背景,采用了精致的透明效果,整體顯得高貴典雅。

Marmoset

Kidwell

對角線式的透明效果,顯得異常粗野,但是很好的貼近了建筑的主題。

Kidwell

JoyLab

全屏大圖照片,通過透明效果很好的展現(xiàn)了導(dǎo)航、Logo以及標(biāo)題,透明的拿捏很有分寸。

JoyLab

La robe fendue

模糊背景,透明的功能區(qū),整體具有一種精致的觸感。

La robe fendue

Cinnamon Toast

小小的底部藍(lán)色舉行快塊,很符合整體明快的風(fēng)格。

Cinnamon Toast

NBC. The Million Second Quiz

整體頁面以內(nèi)容為主,每個(gè)微件都做了透明處理,這讓背景和前景很好的融合。

NBC

Greats Brand

垂直風(fēng)格,對半布局,在其中一邊懸停時(shí),另一邊便透明,很好的集中了用戶的注意力。

Greats Brand

Desktime App

干凈整潔,透明的效果是:既能顯得簡約,又能顯得精致。非常好的平衡。

Desktime

Tom Edwards

這是一個(gè)和流行相關(guān)的網(wǎng)站,這里的透明效果做的很棒,下面有一個(gè)優(yōu)雅的徽章,透明框中的綠色使用,透明度都很有分寸,不錯(cuò)的設(shè)計(jì)!

Tom Edwards

Décor im Augarten

明快、整齊的視覺風(fēng)格,每幅圖像的中心都采用了薄紗式的圓環(huán),整體的感覺很和諧。

Decor im Augarten

Red Fish Apparel

設(shè)計(jì)師使用幾何風(fēng)設(shè)計(jì),讓整體設(shè)計(jì)異常吸引人。圓環(huán)、方塊、矩形混雜其中。透明部分加強(qiáng)了設(shè)計(jì)的深度感。

Red Fish Apparel

結(jié)論

隨著iOS7的流行,相信透明效果和模糊效果會(huì)越來越受歡迎,如何在不損失背景元素顯示效果的情況下展現(xiàn)前景元素,如何讓頁面即簡約又精致,透明效果是個(gè)不錯(cuò)的選擇。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔