令人愉悅的網(wǎng)站設(shè)計(jì)重點(diǎn)可能是產(chǎn)生意外的用戶體驗(yàn)并使訪客吸引您的網(wǎng)站的原因之一。一個(gè)趨勢技術(shù)就是在網(wǎng)站設(shè)計(jì)中使用液體動(dòng)畫。他的趨勢的創(chuàng)意之處在于，您可以通過多種方式使用它來創(chuàng)建適合您的內(nèi)容的網(wǎng)站設(shè)計(jì)界面。

在這里，我們將看一下這種趨勢的各種例子，以及如何讓它為您服務(wù)。

什么是液體動(dòng)畫？

液體動(dòng)畫是屏幕上的運(yùn)動(dòng)，有一種水一樣的感覺。這些動(dòng)畫通常有一個(gè)緩慢的，流動(dòng)的運(yùn)動(dòng)，可能波動(dòng)或潮起潮落。（這就是它工作的原因；液體動(dòng)畫必須感覺真實(shí)。）

液體動(dòng)畫可以作為懸停狀態(tài)或視頻或滾動(dòng)動(dòng)畫的一部分發(fā)揮作用。您甚至可以在卷軸上激活一個(gè)液體動(dòng)畫。

這項(xiàng)技術(shù)已經(jīng)開始迅速流行起來，主要是因?yàn)橛?jì)算機(jī)和較小的web設(shè)備以及瀏覽器能夠有效地呈現(xiàn)這項(xiàng)技術(shù)。

這種趨勢的根源可以追溯到在動(dòng)畫設(shè)計(jì)中使用斑點(diǎn)形狀。去年相當(dāng)流行的許多設(shè)計(jì)（包括上面的Fleava）都帶有某種液態(tài)動(dòng)畫元素。

液體層

液體動(dòng)畫是一個(gè)流行的技術(shù)與組合網(wǎng)站和創(chuàng)意機(jī)構(gòu)，可能因?yàn)檫@是一個(gè)地方，許多網(wǎng)站設(shè)計(jì)師感到舒適的測試和玩新的設(shè)計(jì)概念。

液體動(dòng)畫的工作與其他趨勢，如分層效果。（您還將在這里的大多數(shù)示例中看到其他趨勢。）

Ilya Kulbachny以兩種不同的方式使用了兩層液體動(dòng)畫，為簡單的設(shè)計(jì)增加了很多視覺效果。頂層包括以不受用戶交互影響的液體動(dòng)畫和速度移動(dòng)的文本。

背景層似乎是一個(gè)圖像，但當(dāng)您懸停在圖片的邊緣移動(dòng)在液體流動(dòng)。圖像隨著鼠標(biāo)移動(dòng)而移動(dòng)，并像水一樣懸浮。

液體懸停動(dòng)作

液體懸停動(dòng)畫狀態(tài)可能是這種趨勢最流行的應(yīng)用之一，沒有任何東西可以提示您進(jìn)入液體動(dòng)畫，直到鼠標(biāo)以動(dòng)畫懸停狀態(tài)移動(dòng)到項(xiàng)目上。

這是一個(gè)簡單又討人喜歡的工具，可以吸引用戶。

關(guān)于流動(dòng)動(dòng)畫的事情是運(yùn)動(dòng)是如此真實(shí)和流動(dòng)，它實(shí)際上鼓勵(lì)人們不斷地玩它來看看運(yùn)動(dòng)是如何發(fā)生和工作的。

液體“滾動(dòng)”

液體動(dòng)畫是一個(gè)創(chuàng)意的“滾動(dòng)”或?qū)Ш焦ぞ?。（您肯定想點(diǎn)擊上面的例子。）

通過在屏幕上拖動(dòng)和拖動(dòng)鼠標(biāo)，圖像的移動(dòng)感覺就像在水族箱中旋轉(zhuǎn)。您可以看到所有的元素在您周圍移動(dòng)而不移動(dòng)。

然后，當(dāng)您停下來的時(shí)候，就會(huì)有一小段動(dòng)畫，隨著您的動(dòng)作而來的波紋和速度似乎都在屏幕上定格了。

運(yùn)動(dòng)感覺難以置信的真實(shí)，并把用戶帶到設(shè)計(jì)的空間。

液體背景/前景

液體動(dòng)畫可以作為設(shè)計(jì)的背景或前景的設(shè)計(jì)元素，在沒有用戶交互的情況下“運(yùn)行”。

在《欲望的革命》之外，還有一個(gè)背景/前景元素，就是這樣做的。這些小斑點(diǎn)在屏幕上移動(dòng)，甚至相互連接。當(dāng)鼠標(biāo)處于額外的懸停狀態(tài)時(shí)，它們會(huì)進(jìn)一步產(chǎn)生動(dòng)畫和變形。

這個(gè)指針也有一種液體的感覺，以博客作為光標(biāo)，在屏幕上的運(yùn)動(dòng)有一種真實(shí)的感覺。blob指針幾乎變慢以匹配其他元素的運(yùn)動(dòng)。

液體電影

?

電影圖像作為一種趨勢來了又去，然后隨著更流暢的動(dòng)畫重新出現(xiàn)。

這些設(shè)計(jì)包括靜態(tài)和動(dòng)態(tài)圖像的組合——通常在背景中——有一些流動(dòng)的運(yùn)動(dòng)。

在上面1-1的例子中，由于裙子的運(yùn)動(dòng)，圖片中的女子看起來像是在水下。它很簡單，但在視覺上很吸引人。網(wǎng)站設(shè)計(jì)使用了各種各樣的其他動(dòng)畫技術(shù)下滾動(dòng)，以及。

水下運(yùn)動(dòng)

在上面的例子中有暗示-水下風(fēng)格的運(yùn)動(dòng)-這里它是主要的動(dòng)畫效果。

水下運(yùn)動(dòng)，一種緩慢的，流動(dòng)的運(yùn)動(dòng)是使用這項(xiàng)技術(shù)的一種流行方式。Les Animals使用了一個(gè)動(dòng)畫插圖，看起來像在水下移動(dòng)的植物。形狀在一種舒緩、緩慢的模式中移動(dòng)和流動(dòng)。

如果您與設(shè)計(jì)互動(dòng)，有一個(gè)額外的液體動(dòng)畫狀態(tài)鼠標(biāo)移動(dòng)。它是微妙的，完全適合其余的界面設(shè)計(jì)。

液體印刷

我們已經(jīng)看到了一點(diǎn)，但是液體動(dòng)畫效果也可以應(yīng)用到排版上。

使這種技術(shù)在字母上工作的訣竅是保持單詞的可讀性。如果在任何時(shí)候文本被拉伸或拉到不可讀的程度，則表示動(dòng)畫走得太遠(yuǎn)了。

這可能是一種相當(dāng)微妙的平衡，但如果做得好，看著和互動(dòng)會(huì)很有趣。文本元素上的液體動(dòng)畫可以自己運(yùn)行，比如上面Myles Ng的例子，也可以作為懸停狀態(tài)運(yùn)行。

結(jié)論

液體動(dòng)畫是一種主流的設(shè)計(jì)技術(shù)。動(dòng)態(tài)可以讓用戶對您的網(wǎng)站設(shè)計(jì)更感興趣，并提供更多與內(nèi)容互動(dòng)的理由。

這個(gè)網(wǎng)站設(shè)計(jì)技巧應(yīng)該看起來簡單和現(xiàn)實(shí)。動(dòng)作太快或看起來是被迫的，不會(huì)有同樣的令人愉快的吸引力，您期望從一個(gè)液體動(dòng)畫中細(xì)微的運(yùn)動(dòng)。