滑鼠的幾種懸浮動態效果

動態效果是如今UI設計中的重要組成部分，也是目前最熱門的設計趨勢之一。動效在不同的環節發揮的作用也越來越大。

正是由於Material Design 和蘋果所引領的動效設計風潮，許多曾經有過的設計技巧和元素正在逐步回歸，而懸停特效就是其中之一。但是相比於曾經那些閃爍彈跳的特效，現如今的游標懸停特效更加強調功能性和體驗。

和其他動效相似，滑鼠懸停特效讓交互的引導性更強，有的還帶有預覽的作用，它的使用範圍非常廣，大到全屏，小到提示和導航元素，不一而足。

懸停動效主要有以下這幾種有趣的玩法。

首頁動效

懸停特效用的好，能成為網頁整體設計中的大殺器。當滑鼠懸停在特定的位置的時候，整頁的動效隨之觸發，視覺上是相當驚豔的。

比如Haus 這個頁面，觸發動效之後，整頁的卡通角色在螢幕上走來走去，觸發動效前，只有標題文字會在螢幕上舞動。

這個頁面中，設計師讓黑色的背景和白色的非襯線體來構成對比，而中間留出空間給動效。這種設計手法是為了鼓勵用戶在往下滾動滑鼠前，儘量多和螢幕上的內容進行互動。

按鈕特效

一個簡單的動效能夠讓用戶的點擊欲望提升一大截。正是因此，按鈕的懸停動效一直都很火，也是設計師們最容易想到的。

一個設計良好的按鈕懸停動效，能讓使用者更好的理解按鈕的功能，並吸引用戶觸發它。上面的頁面來自 Luke Etheridge，當滑鼠懸停到按鈕上的時候，色彩改變，通過變化告知使用者，這個按鈕可以點擊。這就是簡單的按鈕特效。

導航和菜單

隱藏式導航是目前最流行的設計趨勢之一。大量的懸停動效的加入，讓用戶可以在擁有乾淨清爽的介面的同時，順暢自然的隨著導航流覽不同的內容。使用者可以在功能表或者導航出現的時候點擊內容，而無需查看的時候移開滑鼠標，就能擁有一個開闊的視野。

上面名為Oxen Made 的網站首頁就有兩個地方採用了懸停動效，引導用戶點擊，右上角的Menu 功能表按鈕在滑鼠懸停上去的時候會改變顏色，點擊呼出菜單；右下方的三角形按鈕採用了同樣的動效，引導用戶向下翻頁，查看更多的內容。

這些微妙的動效和背景下快速切換的視頻內容構成了鮮明的對比，用戶會很容易發現它們的存在，被吸引注意力，並且被引導著去點擊。

表單和字段

表單和其中的欄位內容是使用滑鼠懸停特效的大戶。幾乎你所訪問的每一個網站都或多或少需要你填寫表單，提交資訊。如果表單越容易填寫，獲取使用者資訊的成功率就越高。

並不是說表單本身一定要非常簡單，或者非常有趣，而是你需要讓使用者清楚如何填寫表單，格式是怎樣的，以及是否填寫正確。這個時候，游標懸停的特效就顯得非常重要了。

正如同上面所展示出的這個案例。通過動效和圖示等資訊，使用者被告知了哪些資訊是需要被輸入的，當他們輸入完成後，點擊登錄，確認的動畫立刻就出現了。