設計趨勢:網站設計中的液態動畫 - 素馬網站設計

設計趨勢:網站設計中的液態動畫

By:limo- 2020-07-15 10:55:17

令人愉悅的網站設計重點可能是產生意外的用戶體驗并使訪客吸引您的網站的原因之一。一個趨勢技術就是在網站設計中使用液體動畫。他的趨勢的創意之處在于,您可以通過多種方式使用它來創建適合您的內容的網站設計界面。


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


什么是液體動畫?




液體動畫是屏幕上的運動,有一種水一樣的感覺。這些動畫通常有一個緩慢的,流動的運動,可能波動或潮起潮落。(這就是它工作的原因;液體動畫必須感覺真實。)


液體動畫可以作為懸停狀態或視頻或滾動動畫的一部分發揮作用。您甚至可以在卷軸上激活一個液體動畫。


這項技術已經開始迅速流行起來,主要是因為計算機和較小的web設備以及瀏覽器能夠有效地呈現這項技術。


這種趨勢的根源可以追溯到在動畫設計中使用斑點形狀。去年相當流行的許多設計(包括上面的Fleava)都帶有某種液態動畫元素。


液體層




液體動畫是一個流行的技術與組合網站和創意機構,可能因為這是一個地方,許多網站設計師感到舒適的測試和玩新的設計概念。


液體動畫的工作與其他趨勢,如分層效果。(您還將在這里的大多數示例中看到其他趨勢。)


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


背景層似乎是一個圖像,但當您懸停在圖片的邊緣移動在液體流動。圖像隨著鼠標移動而移動,并像水一樣懸浮。


液體懸停動作



液體懸停動畫狀態可能是這種趨勢最流行的應用之一,沒有任何東西可以提示您進入液體動畫,直到鼠標以動畫懸停狀態移動到項目上。


這是一個簡單又討人喜歡的工具,可以吸引用戶。


關于流動動畫的事情是運動是如此真實和流動,它實際上鼓勵人們不斷地玩它來看看運動是如何發生和工作的。


液體“滾動”




液體動畫是一個創意的“滾動”或導航工具。(您肯定想點擊上面的例子。)


通過在屏幕上拖動和拖動鼠標,圖像的移動感覺就像在水族箱中旋轉。您可以看到所有的元素在您周圍移動而不移動。


然后,當您停下來的時候,就會有一小段動畫,隨著您的動作而來的波紋和速度似乎都在屏幕上定格了。


運動感覺難以置信的真實,并把用戶帶到設計的空間。


液體背景/前景




液體動畫可以作為設計的背景或前景的設計元素,在沒有用戶交互的情況下“運行”。


在《欲望的革命》之外,還有一個背景/前景元素,就是這樣做的。這些小斑點在屏幕上移動,甚至相互連接。當鼠標處于額外的懸停狀態時,它們會進一步產生動畫和變形。


這個指針也有一種液體的感覺,以博客作為光標,在屏幕上的運動有一種真實的感覺。blob指針幾乎變慢以匹配其他元素的運動。


液體電影


?



電影圖像作為一種趨勢來了又去,然后隨著更流暢的動畫重新出現。


這些設計包括靜態和動態圖像的組合——通常在背景中——有一些流動的運動。


在上面1-1的例子中,由于裙子的運動,圖片中的女子看起來像是在水下。它很簡單,但在視覺上很吸引人。網站設計使用了各種各樣的其他動畫技術下滾動,以及。


水下運動




在上面的例子中有暗示-水下風格的運動-這里它是主要的動畫效果。


水下運動,一種緩慢的,流動的運動是使用這項技術的一種流行方式。Les Animals使用了一個動畫插圖,看起來像在水下移動的植物。形狀在一種舒緩、緩慢的模式中移動和流動。


如果您與設計互動,有一個額外的液體動畫狀態鼠標移動。它是微妙的,完全適合其余的界面設計。


液體印刷




我們已經看到了一點,但是液體動畫效果也可以應用到排版上。


使這種技術在字母上工作的訣竅是保持單詞的可讀性。如果在任何時候文本被拉伸或拉到不可讀的程度,則表示動畫走得太遠了。


這可能是一種相當微妙的平衡,但如果做得好,看著和互動會很有趣。文本元素上的液體動畫可以自己運行,比如上面Myles Ng的例子,也可以作為懸停狀態運行。


結論


液體動畫是一種主流的設計技術。動態可以讓用戶對您的網站設計更感興趣,并提供更多與內容互動的理由。


這個網站設計技巧應該看起來簡單和現實。動作太快或看起來是被迫的,不會有同樣的令人愉快的吸引力,您期望從一個液體動畫中細微的運動。


?
开心飞鹰