支招|如何巧用氣泡類元素，讓單調死板的網頁馬上活起來？

+ 查看更多

最近，網站設計領域似乎又刮起了一股”氣泡”風，越來越多的設計師傾向于在網站中使用氣泡、斑點等流體元素。從簡單的圓圈，到互相連接的環狀，再到結合動效的色塊，各種形式層出不窮。的確，作為非常規的幾何圖形，氣泡、斑點等流體元素不僅能讓網站顯得更富活力與趣味，還在吸引用戶注意方面有很大優勢。今天小飛就結合9個設計實例，和大家分享幾個實用的設計技巧。

Wed’ze在主頁上使用了炫酷、明亮的氣泡元素來突出它的產品（滑雪護目鏡）。當訪客停在首頁時，產品的圖片和名稱會自動更換，而其旁邊的氣泡元素也會隨之變成相應的顏色。這有助于將用戶的注意力集中到網站產品上，幫助提升網站轉化率。

啟示：在簡約的背景之上，使用色彩鮮艷的氣泡元素可以幫助營造視覺焦點，將用戶的視線有效地吸引到關鍵元素上。

Liber Finance Group網站上的氣泡元素十分簡約，更有幾何特征（差不多相當于圓形）。當用戶向下滾動時，這些帶有動效的氣泡元素會發生有趨向地轉變，這能吸引用戶持續向下滾動、瀏覽更多內容。一些氣泡的下方還設置了點擊元素（比如箭頭），以引導用戶與網站發生交互。

啟示：氣泡元素與動效的結合，一方面可以讓網頁呈現更加有趣，另一方面還能驅動交互，提高用戶參與度。

Drip Pop首頁是典型的粗野主義設計，關于粗野主義可以點擊《粗野主義：冉冉升起的網站設計新趨勢》了解。在如此斑斕的背景之上，Drip Pop使用了淺色、不規則的涂鴉斑點與其形成鮮明的對比，很好地凸顯了品牌標識。更重要的是，這里斑點元素的不規則形狀十分契合網站的品牌氣質，能夠幫助用戶更快更直接地get到品牌的獨特氛圍和精髓。

啟發：斑斕的背景和簡約的斑點元素搭配，也是構建視覺焦點的一種有效策略。

Josh Dring網站將多個充滿流動感的色塊疊加拼接在一起，賦予了首頁以獨特的美感和極強的視覺張力。即便訪客不能百分百確定這個設計師具體從事哪個領域（設計比較抽象），還是會被吸引過去進行瀏覽。

啟示：在背景上使用氣泡、斑點或其他色塊時，不妨考慮將多個元素疊加使用，這能給網站帶來與眾不同的視覺深度，讓設計看上去更引人入勝。

Andy Patrick這個設計師作品集網站同樣也使用了明亮的氣泡元素，但在應用方法上卻大有不同。與上一個網站靜態的色塊相比，Andy Patrick在不少氣泡元素上使用了動效，讓其可以不停的移動、變化。除此以外，由于漸變色的使用，網站上的氣泡元素很有三維立體感。

啟示：如果你想要讓氣泡元素有一定的3D立體感（景深更明顯、層次更分明），微妙的漸變色是個不錯的選擇。

在Iqor這個網站上，細長的氣泡元素零星地點綴在背景之上，盡管這些元素沒有任何動效，但由于人們看到它會聯想到天空中的云朵，還是提供了一定的動作指向。白色的氣泡元素和淡藍色的背景搭配，也讓頁面顯得十分清爽。

啟示：在許多純扁平化的網站頁面中，氣泡類元素同樣能夠起到很好的裝飾作用。

盡管大多數人認為氣泡類元素只能用于網頁裝飾，但它其實還可以作為圖片的承載容器。Studio Volbloed就在自己的關于頁面中使用了靜態的氣泡形狀來展示公司創始人的照片。

啟示：和常見的矩形、三角形等相比，氣泡類元素在作為圖片或其他元素的載體，能夠給用戶留下更加深刻的視覺體驗。

Unter Freiem Himmel在氣泡元素的應用上很是獨出心裁。它只將氣泡元素用于頁面加載上，但值得注意的是這個網站有3種不同的加載效果。用戶在不同時候打開網站，可以看見不同的氣泡動效，但它們的最終呈現形式都是兩個圓圈停在網站名稱之上。在這里移動光標也是呈現圓形。

啟示：氣泡類元素可以用在加載或轉場頁面中，賦予網站更多趣味感。

乍一看，你可能覺得這個網站沒有什么氣泡元素。但只要仔細觀察，你就會發現：多個小的氣泡元素組合在一起構成了企業的Logo。重要的是這里還使用了連續的動畫效果，這些小的氣泡就像水和油一樣，一會分離、一會融合，最終形成圖中的Logo。這是氣泡類元素應用的一個典型栗子，盡管它沒有用于整個設計之中。

啟示：將帶有動效的氣泡元素加持在Logo上，可以給用戶留下更深刻的印象，巧妙地完成品牌宣傳；氣泡類元素并不一定要用在網站的多個地方，只是布局在細節處也是OK的。

從上面這些栗子中我們看出，目前氣泡類元素在網站中已有很多應用。不過，具體到單個設計，氣泡類元素的角色又都不盡相同。如果你也想在自己的網站中使用這一趨勢，不妨勇敢的嘗試一下吧！