令人愉悅的設計重點是產生意外的用戶體驗并使訪客停留在你的網站或形成持續的訪問。



而目前可以做到這一點的一種趨勢技術是在網站設計中使用液體動畫。 關于趨勢，你還可以通過多種方式使用它來創建適合你的內容的界面。

今天，我們將來討論這種趨勢的各種示例，以及如何使其適用于你的設計。


什么是液態動畫（What is Liquid Animation?）



液體動畫是在屏幕上具有類似水的運動的感覺效果。 這些動畫通常會緩慢地運動，可能會產生波紋或起伏（這就是使其起作用的原因；液體動畫必須具有逼真的感覺）。

液態動畫可能會作為懸停狀態或視頻或滾動動畫的一部分。 你甚至可以在滾動條上激活液體動畫。

這項技術開始流行起來主要是因為計算機以及較小的設備和瀏覽器具有有效地渲染該技術的能力。

這種趨勢的根源可以追溯到在動畫設計中使用斑點形狀。 去年頗為流行的許多網頁設計（包括上面的Fleava）都帶有某種液體動畫元素。


1.液態層（Liquid Layers）



液態動畫是網站和創意代理商的一種流行技術，許多設計師都可以輕松進行測試并嘗試使用新的設計概念。

液態動畫與其他趨勢（例如分層效果）可以協同工作（你還會在這里的大多數示例中看到其他趨勢的概況）。

Ilya Kulbachny以兩種不同的方式使用兩層液態動畫，從而為簡單的設計增加了很多視覺趣味。 頂層包含以流暢的動畫和速度移動的文本，不受用戶交互的影響。

背景層似乎是圖像，但是當你將鼠標懸停在圖片上時，邊緣將以液體流動的形式移動。



2.液態懸停效果（Liquid Hover Actions）



液體懸停動畫可能是此趨勢最流行的用途之一。 在鼠標懸停在具有動畫懸停狀態的項目上之前，沒有什么可以提示。

這是一種簡單有趣的工具，可以吸引用戶。

關于液態動畫，這種運動是如此逼真和流暢，以至于實際上鼓勵人們繼續玩下去，以觀察運動是如何發生和起作用的。



3.液態“滾動”（Liquid “Scroll”）



液態動畫是一個很好的“滾動”或導航工具。

通過在屏幕上拖拉鼠標，圖像的運動感覺就像你在水族館中觀賞一樣。 你可以看到所有元素在你周圍移動，而無需走動。

然后，當你停下來時，就會出現一小段動畫，隨著運動而產生的漣漪和速度似乎會在屏幕上穩定下來。

動作令人難以置信的真實感，將用戶帶入設計空間。



4.液態背景/前景（Liquid Background/Foreground）



液態動畫可以是設計背景或前景中的設計元素，并且可以“運行”，而無需用戶交互。

Beyond Beauty的《 The Revolution of Desire》具有背景/前景元素。 小斑點在屏幕上移動，甚至相互連接。 當鼠標處于其他懸停狀態時，它們會進一步進行動畫處理和變形。

指針也具有作為光標的流暢感覺，并且對屏幕上的動作具有逼真的感覺。



5.液態電影/攝影元素（Liquid Cinemagraph）



電影膠片風格的圖像已成為一種趨勢，并且隨著更多的液體動畫而重新出現。

這些設計包括靜止圖像和運動圖像的組合（通常是在背景中），并帶有一些液體運動。

在上面的示例中，由于衣服的移動，圖像中的女人似乎在水下。 很簡單，但在視覺上很有趣。 網站設計還使用了滾動條下方的各種其他動畫技術。



6.水下運動（Underwater Motion）



在上面的示例中暗示了這一點-水下運動-這是主要的動畫效果。

水下運動是一種緩慢的運動，是使用此技術的一種流行方法。 Les Animals使用動畫插圖，看起來就像植物在水下移動。 形狀以舒緩，緩慢的方式移動和流動。

如果你與設計互動，則鼠標移動時還會有其他液態動畫狀態。 它是微妙的，非常適合其余的界面設計。



7.液態文本（Liquid Typography）



液體動畫效果也可以應用于文本。

使此技術適用于字母的技巧是保持單詞的可讀性。 如果在任何時候文本被拉伸到無法閱讀的程度，則動畫就太過了。

實現這個效果可能需要一個相當微妙的平衡，但是如果做得好，觀察和交互會很有趣。 文本元素上的液體動畫可以單獨運行，例如上面Myles Ng的示例，也可以用作懸停狀態。



總結

液態動畫是一種目前正在流行的趨勢設計技術。 趨勢可以幫助用戶延長對你的網站設計的興趣，并提供與內容進行交互的另一個原因。

該網站設計技術應看起來簡單而現實。 動作過快或顯得過分逼人不會像你期望的液體動畫那樣具有令人愉悅的動作。