一些懸浮動效的常見玩法

動效是如今UI設(shè)計中的重要組成部分，也是目前最熱門的設(shè)計趨勢之一。動效在不同的環(huán)節(jié)發(fā)揮的作用越越來越大。而今天我們要聊的是光標(biāo)懸停特效，這也是近年動效設(shè)計的熱點之一。

正是由于Material Design 和蘋果所引領(lǐng)的動效設(shè)計風(fēng)潮，許多曾經(jīng)有過的設(shè)計技巧和元素正在逐步回歸，而懸停特效就是其中之一。但是相比于曾經(jīng)那些閃爍彈跳的特效，現(xiàn)如今的光標(biāo)懸停特效來的更加微妙，更加強調(diào)功能性和體驗。

和其他動效相似，光標(biāo)懸停特效讓交互的引導(dǎo)性更強，有的還帶有預(yù)覽的作用，它的使用范圍非常廣，大到全屏，小到提示和導(dǎo)航元素，不一而足。

接下來，我們通過實戰(zhàn)案例看看，光標(biāo)懸停特效目前有哪些創(chuàng)新的玩法。

首頁動效

光標(biāo)懸停特效用的好，能成為你的網(wǎng)頁整體設(shè)計中的大殺器。當(dāng)你光標(biāo)懸停在特定的位置的時候，整頁的動效隨之觸發(fā)，視覺上是相當(dāng)驚艷的。

觸發(fā)全屏幕動畫之后，讓用戶覺得愉悅而不是給用戶帶來壓力。這中間的平衡很難把握。在這個案例中，設(shè)計師讓黑色的背景和白色的非襯線體來構(gòu)成對比，而中間留出空間給動效。這種設(shè)計手法是為了鼓勵用戶在向下滾動前，盡量多和屏幕上的內(nèi)容進(jìn)行互動。

按鈕特效

一個簡單的動效實際上能夠讓用戶的點擊欲望提升一大截?？雌饋恚瑸榘粹o做特效是一件很簡單的事情，是吧？正是因此，按鈕的懸停動效一直都很火，也是設(shè)計師們最快能想到的。

一個設(shè)計良好的按鈕懸停動效，能讓用戶更好的理解按鈕的功能，并吸引用戶觸發(fā)它。

圖庫和輪播圖

網(wǎng)頁中的圖庫和輪播圖也是相當(dāng)常見的控件。幾乎所有的圖庫和輪播圖都帶有動效，從圖片切換的動效到光標(biāo)懸浮顯現(xiàn)的箭頭，圖庫和輪播圖和按鈕的懸浮動效一樣，堪稱這類動效的典范。

不過，動效要設(shè)計合格也是非常講究的，Material Design 對于動效的要求非常值得參考學(xué)習(xí)：

·動效要快速
·動效要清晰
·動效要有凝聚力

導(dǎo)航和菜單

不管你喜歡不喜歡，隱藏式導(dǎo)航是目前最流行的設(shè)計趨勢之一。大量的懸停動效的加入，讓用戶可以在擁有干凈清爽的界面的同時，順暢自然的隨著導(dǎo)航瀏覽不同的內(nèi)容。

懸停動效的加入，讓代表菜單的漢堡圖標(biāo)可以隨著光標(biāo)移動而出現(xiàn)或者消失，用戶可以在菜單或者導(dǎo)航出現(xiàn)的時候點擊內(nèi)容，而無需查看的時候移開光標(biāo)，就能擁有一個開闊的視野。

這些微妙的動效和背景下快速切換的視頻內(nèi)容構(gòu)成了鮮明的對比，用戶會很容易發(fā)現(xiàn)它們的存在，被吸引注意力，并且被引導(dǎo)著去交互。

表單和字段

表單和其中的字段內(nèi)容是使用鼠標(biāo)懸停特效的大戶。幾乎你所訪問的每一個網(wǎng)站都或多或少需要你填寫表單，提交信息。如果表單越容易填寫，獲取用戶信息的成功率就越高。

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

正如同上面所展示出的這個案例。通過動效和圖標(biāo)等信息，用戶被告知了哪些信息是需要被輸入的，當(dāng)他們輸入完成后，點擊登錄，確認(rèn)的動畫立刻就出現(xiàn)了。這個案例是APP的。在桌面端上，你可以讓說明在光標(biāo)懸浮在特定字段上的時候借助動效呈現(xiàn)說明，將說明信息推送到用戶眼前。

如果你不知道從哪里開始下手設(shè)計懸浮動效的話，表單是你的首要選擇。至少在這個環(huán)節(jié)，用戶是有預(yù)期的，而他們的需求也不復(fù)雜：使用簡單的動效給予用戶清晰的說明，和正確的反饋。

結(jié)語

懸停動效看起來很麻煩很棘手，但是實際上很簡單，使用CSS動效，幾乎任何人都可以輕松的在網(wǎng)頁中實現(xiàn)這個功能。它是輕量級的，并且有大量的現(xiàn)成的代碼供你使用。

不過，重點在于你需要把握懸停動效的核心規(guī)則：它是要有用的，而不僅僅是炫酷的效果。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)頁名稱：一些懸浮動效的常見玩法
當(dāng)前路徑：http://bm7419.com/news3/324353.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、微信小程序、網(wǎng)頁設(shè)計公司、網(wǎng)站改版、定制網(wǎng)站、Google

廣告

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