這些懸浮動效的常見玩法你都知道嗎？
來源：http://www.uisdc.com/design-trend-innovative-hover-effects
動效是如今UI設計中的重要組成部分，也是目前最熱門的設計趨勢之一。在之前的《在現代網頁設計中，動效有哪些常見的用法》這篇文章中，我們探討了動效對於交互…
動效是如今UI設計中的重要組成部分，也是目前最熱門的設計趨勢之一。在之前的《在現代網頁設計中，動效有哪些常見的用法》這篇文章中，我們探討了動效對於交互和用戶的重要意義，動效在不同的環節發揮的作用越越來越大。而今天我們要聊的是光標懸停特效，這也是近年動效設計的熱點之一。
正是由於Material Design 和蘋果所引領的動效設計風潮，許多曾經有過的設計技巧和元素正在逐步迴歸，而懸停特效就是其中之一。但是相比於曾經那些閃爍彈跳的特效，現如今的光標懸停特效來的更加微妙，更加強調功能性和體驗。
和其他動效相似，光標懸停特效讓交互的引導性更強，有的還帶有預覽的作用，它的使用範圍非常廣，大到全屏，小到提示和導航元素，不一而足。
接下來，我們通過實戰案例看看，光標懸停特效目前有哪些創新的玩法。
首頁動效
光標懸停特效用的好，能成爲你的網頁整體設計中的大殺器。當你光標懸停在特定的位置的時候，整頁的動效隨之觸發，視覺上是相當驚豔的。
比如Haus 這個頁面，觸發動效之後，整頁的卡通角色在屏幕上走來走去，這個工作量和效果都是相當驚人的。觸發動效前，只有標題文字會在屏幕上舞動。
觸發全屏幕動畫之後，讓用戶覺得愉悅而不是給用戶帶來壓力。這中間的平衡很難把握。在這個案例中，設計師讓黑色的背景和白色的非襯線體來構成對比，而中間留出空間給動效。這種設計手法是爲了鼓勵用戶在向下滾動前，儘量多和屏幕上的內容進行互動。
按鈕特效
一個簡單的動效實際上能夠讓用戶的點擊慾望提升一大截。看起來，爲按鈕做特效是一件很簡單的事情，是吧？正是因此，按鈕的懸停動效一直都很火，也是設計師們最快能想到的。
一個設計良好的按鈕懸停動效，能讓用戶更好的理解按鈕的功能，並吸引用戶觸發它。上面的案例來自 Luke Etheridge，當光標懸停到按鈕上的時候，色彩改變，通過變化告知用戶，這個按鈕可以點擊。
圖庫和輪播圖
網頁中的圖庫和輪播圖也是相當常見的控件。幾乎所有的圖庫和輪播圖都帶有動效，從圖片切換的動效到光標懸浮顯現的箭頭，圖庫和輪播圖和按鈕的懸浮動效一樣，堪稱這類動效的典範。
不過，動效要設計合格也是非常講究的，Material Design 對於動效的要求非常值得參考學習：
·動效要快速
·動效要清晰
·動效要有凝聚力
上方的這個動效案例源自於設計師Baptiste Dumas之手，所有的這些動效都非常的迅速，絕不拖泥帶水，所有的內容之間都有着明顯的界限，而內容和內容之間又通過動效相互串在了一起，如同行雲流水一般順暢。
導航和菜單
不管你喜歡不喜歡，隱藏式導航是目前最流行的設計趨勢之一。大量的懸停動效的加入，讓用戶可以在擁有乾淨清爽的界面的同時，順暢自然的隨着導航瀏覽不同的內容。
懸停動效的加入，讓代表菜單的漢堡圖標可以隨着光標移動而出現或者消失，用戶可以在菜單或者導航出現的時候點擊內容，而無需查看的時候移開光標，就能擁有一個開闊的視野。
上面名爲Oxen Made 的網站首頁就有兩個地方採用了懸停動效，引導用戶點擊，右上角的Menu 菜單按鈕在鼠標懸停上去的時候會改變顏色，點擊呼出菜單；右下方的三角形按鈕採用了同樣的動效，引導用戶向下翻頁，查看更多的內容。
這些微妙的動效和背景下快速切換的視頻內容構成了鮮明的對比，用戶會很容易發現它們的存在，被吸引注意力，並且被引導着去交互。
表單和字段
表單和其中的字段內容是使用鼠標懸停特效的大戶。幾乎你所訪問的每一個網站都或多或少需要你填寫表單，提交信息。如果表單越容易填寫，獲取用戶信息的成功率就越高。
並不是說表單本身一定要非常簡單，或者非常有趣，而是你需要讓用戶清楚如何填寫表單，格式是怎樣的，以及是否填寫正確。這個時候，光標懸停的特效就顯得非常重要了。
正如同上面所展示出的這個案例。通過動效和圖標等信息，用戶被告知了哪些信息是需要被輸入的，當他們輸入完成後，點擊登錄，確認的動畫立刻就出現了。這個案例是APP的。在桌面端上，你可以讓說明在光標懸浮在特定字段上的時候藉助動效呈現說明，將說明信息推送到用戶眼前。
如果你不知道從哪裏開始下手設計懸浮動效的話，表單是你的首要選擇。至少在這個環節，用戶是有預期的，而他們的需求也不復雜：使用簡單的動效給予用戶清晰的說明，和正確的反饋。
相關資源
如果你想立刻馬上動手試一試懸浮動效的話，下面的資源可以實現你的願望：
·Hover.css: 這是一組使用CSS3實現的懸浮特效，它可以應用到按鈕、鏈接、LOGO、SVG、圖片等元素上。它還提供了CSS、Sass和Less的版本。
·Image hover effects: 這是一組幫你實現圖片懸浮特效的代碼。
·Icon hover effects: 這是一組簡單的懸浮特效，它會讓圓形的圖標看起來更加顯眼。
·Amazing WordPress hover effects: 這是爲WordPress 用戶所準備的光標懸浮特效，純CSS3，不依賴其他組件。這個合集包含了幾十個備選樣式。
·W3Schools – CSS3 Transitions: 從0開始學習CSS3過渡特效。
結語
懸停動效看起來很麻煩很棘手，但是實際上很簡單，使用CSS動效，幾乎任何人都可以輕鬆的在網頁中實現這個功能。它是輕量級的，並且有大量的現成的代碼供你使用。
不過，重點在於你需要把握懸停動效的核心規則：它是要有用的，而不僅僅是炫酷的效果。
【這些最佳實踐幫你在UI設計上更上一層樓】
- 《網頁設計中，如何突破柵格的限制又保持協調？》
- 《幫你搞定長滾動網頁的設計最佳實踐》
- 《覺得自己學了假設計？真正的新用戶引導應該這麼設計》
- 《老生常談！設計高素質的UI應該掌握這7個關鍵屬性》
- 《這8個要點，能讓你的網頁首圖抓住用戶注意力》
原文地址：designshack
原文作者：CARRIE COUSINS
優設譯文：@陳子木
本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。
【優設網 原創文章 投稿郵箱：[email protected]】
================關於優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com