設(shè)計(jì)趨勢：網(wǎng)站設(shè)計(jì)中的液態(tài)動畫「成都新易設(shè)計(jì)坊」

【復(fù)試錄取必備】2021年新易設(shè)計(jì)坊寒假精品作品集！10多年經(jīng)驗(yàn)設(shè)計(jì)總監(jiān)級老師授課

令人愉悅的設(shè)計(jì)重點(diǎn)是產(chǎn)生意外的用戶體驗(yàn)并使訪客停留在你的網(wǎng)站或形成持續(xù)的訪問。

而目前可以做到這一點(diǎn)的一種趨勢技術(shù)是在網(wǎng)站設(shè)計(jì)中使用液體動畫。關(guān)于趨勢，你還可以通過多種方式使用它來創(chuàng)建適合你的內(nèi)容的界面。

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

什么是液態(tài)動畫（What is Liquid Animation?）

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

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

這項(xiàng)技術(shù)開始流行起來主要是因?yàn)橛?jì)算機(jī)以及較小的設(shè)備和瀏覽器具有有效地渲染該技術(shù)的能力。

這種趨勢的根源可以追溯到在動畫設(shè)計(jì)中使用斑點(diǎn)形狀。去年頗為流行的許多網(wǎng)站設(shè)計(jì)（包括上面的Fleava）都帶有某種液體動畫元素。

1.液態(tài)層（Liquid Layers）

液態(tài)動畫是網(wǎng)站和創(chuàng)意代理商的一種流行技術(shù)，許多設(shè)計(jì)師都可以輕松進(jìn)行測試并嘗試使用新的設(shè)計(jì)概念。

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

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

背景層似乎是圖像，但是當(dāng)你將鼠標(biāo)懸停在圖片上時(shí)，邊緣將以液體流動的形式移動。

2.液態(tài)懸停效果（Liquid Hover Actions）

液體懸停動畫可能是此趨勢最流行的用途之一。在鼠標(biāo)懸停在具有動畫懸停狀態(tài)的項(xiàng)目上之前，沒有什么可以提示。

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

關(guān)于液態(tài)動畫，這種運(yùn)動是如此逼真和流暢，以至于實(shí)際上鼓勵(lì)人們繼續(xù)玩下去，以觀察運(yùn)動是如何發(fā)生和起作用的。

3.液態(tài)滾動（Liquid Scroll）

液態(tài)動畫是一個(gè)很好的滾動或?qū)Ш焦ぞ摺?/p>

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

然后，當(dāng)你停下來時(shí)，就會出現(xiàn)一小段動畫，隨著運(yùn)動而產(chǎn)生的漣漪和速度似乎會在屏幕上穩(wěn)定下來。

動作令人難以置信的真實(shí)感，將用戶帶入設(shè)計(jì)空間。

4.液態(tài)背景/前景（Liquid Background/Foreground）

液態(tài)動畫可以是設(shè)計(jì)背景或前景中的設(shè)計(jì)元素，并且可以運(yùn)行，而無需用戶交互。

Beyond Beauty的《 The Revolution of Desire》具有背景/前景元素。小斑點(diǎn)在屏幕上移動，甚至相互連接。當(dāng)鼠標(biāo)處于其他懸停狀態(tài)時(shí)，它們會進(jìn)一步進(jìn)行動畫處理和變形。

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

5.液態(tài)電影/攝影元素（Liquid Cinemagraph）

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

這些設(shè)計(jì)包括靜止圖像和運(yùn)動圖像的組合（通常是在背景中），并帶有一些液體運(yùn)動。

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

6.水下運(yùn)動（Underwater Motion）

在上面的示例中暗示了這一點(diǎn)-水下運(yùn)動-這是主要的動畫效果。

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

如果你與設(shè)計(jì)互動，則鼠標(biāo)移動時(shí)還會有其他液態(tài)動畫狀態(tài)。它是微妙的，非常適合其余的界面設(shè)計(jì)。

7.液態(tài)文本（Liquid Typography）

液體動畫效果也可以應(yīng)用于文本。

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

實(shí)現(xiàn)這個(gè)效果可能需要一個(gè)相當(dāng)微妙的平衡，但是如果做得好，觀察和交互會很有趣。文本元素上的液體動畫可以單獨(dú)運(yùn)行，例如上面Myles Ng的示例，也可以用作懸停狀態(tài)。

總結(jié)

液態(tài)動畫是一種目前正在流行的趨勢設(shè)計(jì)技術(shù)。趨勢可以幫助用戶延長對你的網(wǎng)站設(shè)計(jì)的興趣，并提供與內(nèi)容進(jìn)行交互的另一個(gè)原因。

該網(wǎng)站設(shè)計(jì)技術(shù)應(yīng)看起來簡單而現(xiàn)實(shí)。動作過快或顯得過分逼人不會像你期望的液體動畫那樣具有令人愉悅的動作。

非常感謝您讀完創(chuàng)新互聯(lián)的這篇文章："設(shè)計(jì)趨勢：網(wǎng)站設(shè)計(jì)中的液態(tài)動畫「成都新易設(shè)計(jì)坊」"，僅為提供更多信息供用戶參考使用或?yàn)閷W(xué)習(xí)交流的方便。我們公司提供：網(wǎng)站建設(shè)、網(wǎng)站制作、官網(wǎng)建設(shè)、SEO優(yōu)化、小程序制作等服務(wù)，歡迎聯(lián)系我們提供您的需求。

網(wǎng)站題目：設(shè)計(jì)趨勢：網(wǎng)站設(shè)計(jì)中的液態(tài)動畫「成都新易設(shè)計(jì)坊」
文章URL：http://www.bm7419.com/news30/310880.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站排名、關(guān)鍵詞優(yōu)化、做網(wǎng)站、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)