無論你看什么，都有一個很酷的新動畫效果。如果動畫是2018年必備的設計元素，那么創新的懸停效果是2019年即將到來的設計趨勢。

部分原因是材料設計和蘋果的動畫指導方針的流行以及小動作的關注，懸停效果正在卷土重來。但與過去的俗氣，閃爍，彈跳和旋轉效果相比，動畫非常簡單，銳利而令人愉悅。最好的懸停效果可以幫助用戶并增強體驗。

懸停效果的范圍可以從對整個屏幕有影響的動作到像方向提示或導航元素一樣小的動作。

主頁運動

 

懸停效果可能是介紹性用戶體驗的關鍵部分。隨著充滿屏幕的動畫，額外的懸停效果可能會非常迷人。

上面的Haus在卡通人物的屏幕上移動時的表現非常出色。你可能沒有想到動畫中的任何東西，但有一個懸停，角色爆炸成另一個動作。沒有懸停，每個角色都會在屏幕上圓舞曲。

當使用像這樣的全屏幕懸停動畫時，訣竅在于取悅用戶，而不是壓倒他們。這是一個相當棘手的中間地帶。通過保持設計的其余部分簡單 - 黑色，平坦的背景和白色易讀的無襯線字體 - 動畫是允許的空間。這是屏幕上的一個技巧，它鼓勵用戶在滾動到后續屏幕之前進行交互。

按鈕效果

 

一個簡單的動畫實際上可以鼓勵用戶點擊或點擊設計中的按鈕。似乎很簡單，對吧？

這是這類動畫如此受歡迎的部分原因。

設計一個按鈕效果，幫助用戶更好地理解設計以獲得最大的影響力。Luke Etheridge上面的例子顯示了一種狀態，它改變顏色并告訴用戶點擊會發生什么。這是一個有用的功能懸停動畫，功能和看起來不錯。

畫廊和幻燈片

 

網頁上擠滿了各種畫廊和幻燈片。幾乎所有這些功能都包含多個動畫效果，從幻燈片到箭頭之間的移動或其他指示用戶如何前進或后退的divots。

設計現代動作的關鍵可以從意派Coolsite360 的各種模塊中制作。

動作很快

動議很明確

運動具有凝聚力

這個動議是來自Baptiste Dumas所做的所有這些事情。運動的發生方式不會讓用戶詢問接下來會發生什么，它會在內容元素之間創建明顯的線條，并且所有內容都與類似且無縫的運動流程結合在一起。

導航和菜單

 

不管喜不喜歡，隱藏的導航風格都是流行的設計元素。大量的動畫或懸停效果可以幫助用戶更好地瀏覽內容并在設計中移動。

從隨著彈出或擺出屏幕的信息而增長或消失的漢堡圖標，動畫菜單項可以作為強有力的定向工具。

上面的Oxen Made通過兩種方式在主頁上使用懸停動畫來引導用戶采取他們應該采取的行動。“菜單”在懸停時更改顏色，以便讓用戶知道它是可點擊的元素。完整的菜單然后從頁面的左側搖擺出來。此外，一個小三角形箭頭在右上角反射，使用活動菜單按鈕中的相同黃色，表示滾動上有更多內容。

這些微妙的動作發生在相對繁忙的背景視頻播放時。較軟的運動與背景恰好對比，以吸引用戶的注意力，并提供充足的站點方向和導航。

表單和字段

 

懸停效果的一些最好的例子是使用表單和字段。幾乎所有您訪問的網站都要求提供某種行為或信息。用戶提供這些信息越容易，您實際收集信息的可能性就越大。

這并不意味著表單必須枯燥無味。諸如工具提示之類的視覺提示可幫助用戶記住在字段中輸入什么（以何種格式）以及確認成功是非常重要的。

上面的例子完成了這兩件事。用戶被告知要輸入什么信息，他們可以看到輸入的內容，只需單擊“登錄”按鈕，屏幕上就會出現一個快速動畫確認。用戶無需再次猜測他們的信息是否正確輸入，并通過屏幕上的快速檢查知道他們可以繼續進行下一步操作。

如果您不確定從簡單的懸停效果或動畫開始，表單可能是一個很好的起點。用戶已經期望網站的這部分是互動的。他們會用這種形式做些事情; 用簡單的動畫提供適當的反饋。

準備添加一些動畫效果到你的設計？有很多很棒的資源可以幫助你入門

意派Coolsite360交互式線網頁編輯系統

“創意不該受技術束縛，交互可以變得簡單有趣”