動(dòng)效是如今UI設(shè)計(jì)中的重要組成部分，也是目前最熱門(mén)的設(shè)計(jì)趨勢(shì)之一忍些。今天我們要聊的是光標(biāo)懸停特效鲁猩，這也是近年動(dòng)效的熱點(diǎn)之一。
正是由于Material Design 和蘋(píng)果所引領(lǐng)的動(dòng)效風(fēng)潮罢坝，許多曾經(jīng)有過(guò)的設(shè)計(jì)技巧和元素正在逐步回歸廓握，而懸停特效就是其中之一。但是相比于曾經(jīng)那些閃爍彈跳的特效嘁酿，現(xiàn)如今的光標(biāo)懸停特效來(lái)的更加微妙隙券，更加強(qiáng)調(diào)功能性和體驗(yàn)。
和其他動(dòng)效相似闹司，光標(biāo)懸停特效讓交互的引導(dǎo)性更強(qiáng)娱仔，有的還帶有預(yù)覽的作用，它的使用范圍非常廣游桩，大到全屏牲迫，小到提示和導(dǎo)航元素，不一而足借卧。
接下來(lái)盹憎，我們通過(guò)實(shí)戰(zhàn)案例看看，光標(biāo)懸停特效目前有哪些創(chuàng)新的玩法铐刘。
首頁(yè)動(dòng)效
光標(biāo)懸停特效用的好陪每，能成為你的網(wǎng)頁(yè)整體設(shè)計(jì)中的大殺器。當(dāng)你光標(biāo)懸停在特定的位置的時(shí)候滨达，整頁(yè)的動(dòng)效隨之觸發(fā)奶稠，視覺(jué)上是相當(dāng)驚艷的。
比如Haus 這個(gè)頁(yè)面捡遍，觸發(fā)動(dòng)效之后锌订，整頁(yè)的卡通角色在屏幕上走來(lái)走去，這個(gè)工作量和效果都是相當(dāng)驚人的画株。觸發(fā)動(dòng)效前辆飘，只有標(biāo)題文字會(huì)在屏幕上舞動(dòng)啦辐。
觸發(fā)全屏幕動(dòng)畫(huà)之后，讓用戶(hù)覺(jué)得愉悅而不是給用戶(hù)帶來(lái)壓力蜈项。這中間的平衡很難把握芹关。在這個(gè)案例中，設(shè)計(jì)師讓黑色的背景和白色的非襯線(xiàn)體來(lái)構(gòu)成對(duì)比紧卒，而中間留出空間給動(dòng)效侥衬。這種設(shè)計(jì)手法是為了鼓勵(lì)用戶(hù)在向下滾動(dòng)前，盡量多和屏幕上的內(nèi)容進(jìn)行互動(dòng)跑芳。
按鈕特效
一個(gè)簡(jiǎn)單的動(dòng)效實(shí)際上能夠讓用戶(hù)的點(diǎn)擊欲望提升一大截轴总。看起來(lái)博个，為按鈕做特效是一件很簡(jiǎn)單的事情怀樟，是吧？正是因此盆佣，按鈕的懸停動(dòng)效一直都很火往堡，也是設(shè)計(jì)師們最快能想到的。
一個(gè)設(shè)計(jì)良好的按鈕懸停動(dòng)效共耍，能讓用戶(hù)更好的理解按鈕的功能虑灰，并吸引用戶(hù)觸發(fā)它。上面的案例來(lái)自 Luke Etheridge征堪，當(dāng)光標(biāo)懸停到按鈕上的時(shí)候瘩缆，色彩改變，通過(guò)變化告知用戶(hù)佃蚜，這個(gè)按鈕可以點(diǎn)擊庸娱。
圖庫(kù)和輪播圖
網(wǎng)頁(yè)中的圖庫(kù)和輪播圖也是相當(dāng)常見(jiàn)的控件。幾乎所有的圖庫(kù)和輪播圖都帶有動(dòng)效谐算，從圖片切換的動(dòng)效到光標(biāo)懸浮顯現(xiàn)的箭頭熟尉，圖庫(kù)和輪播圖和按鈕的懸浮動(dòng)效一樣，堪稱(chēng)這類(lèi)動(dòng)效的典范洲脂。
不過(guò)斤儿，動(dòng)效要設(shè)計(jì)合格也是非常講究的，Material Design 對(duì)于動(dòng)效的要求非常值得參考學(xué)習(xí)：
● 動(dòng)效要快速?
● 動(dòng)效要清晰?
● 動(dòng)效要有凝聚力?
上方的這個(gè)動(dòng)效案例源自于設(shè)計(jì)師Baptiste Dumas之手恐锦，所有的這些動(dòng)效都非常的迅速往果，絕不拖泥帶水，所有的內(nèi)容之間都有著明顯的界限一铅，而內(nèi)容和內(nèi)容之間又通過(guò)動(dòng)效相互串在了一起陕贮，如同行云流水一般順暢。
導(dǎo)航和菜單
不管你喜歡不喜歡潘飘，隱藏式導(dǎo)航是目前最流行的設(shè)計(jì)趨勢(shì)之一肮之。大量的懸停動(dòng)效的加入掉缺，讓用戶(hù)可以在擁有干凈清爽的界面的同時(shí)，順暢自然的隨著導(dǎo)航瀏覽不同的內(nèi)容戈擒。
懸停動(dòng)效的加入眶明，讓代表菜單的漢堡圖標(biāo)可以隨著光標(biāo)移動(dòng)而出現(xiàn)或者消失，用戶(hù)可以在菜單或者導(dǎo)航出現(xiàn)的時(shí)候點(diǎn)擊內(nèi)容筐高，而無(wú)需查看的時(shí)候移開(kāi)光標(biāo)搜囱，就能擁有一個(gè)開(kāi)闊的視野。
上面名為Oxen Made 的網(wǎng)站首頁(yè)就有兩個(gè)地方采用了懸停動(dòng)效凯傲，引導(dǎo)用戶(hù)點(diǎn)擊犬辰，右上角的Menu 菜單按鈕在鼠標(biāo)懸停上去的時(shí)候會(huì)改變顏色，點(diǎn)擊呼出菜單冰单；右下方的三角形按鈕采用了同樣的動(dòng)效，引導(dǎo)用戶(hù)向下翻頁(yè)灸促，查看更多的內(nèi)容诫欠。
這些微妙的動(dòng)效和背景下快速切換的視頻內(nèi)容構(gòu)成了鮮明的對(duì)比，用戶(hù)會(huì)很容易發(fā)現(xiàn)它們的存在浴栽，被吸引注意力荒叼，并且被引導(dǎo)著去交互。
表單和字段
表單和其中的字段內(nèi)容是使用鼠標(biāo)懸停特效的大戶(hù)典鸡。幾乎你所訪(fǎng)問(wèn)的每一個(gè)網(wǎng)站都或多或少需要你填寫(xiě)表單被廓，提交信息。如果表單越容易填寫(xiě)萝玷，獲取用戶(hù)信息的成功率就越高嫁乘。
并不是說(shuō)表單本身一定要非常簡(jiǎn)單，或者非常有趣球碉，而是你需要讓用戶(hù)清楚如何填寫(xiě)表單蜓斧，格式是怎樣的，以及是否填寫(xiě)正確睁冬。這個(gè)時(shí)候挎春，光標(biāo)懸停的特效就顯得非常重要了。
正如同上面所展示出的這個(gè)案例豆拨。通過(guò)動(dòng)效和圖標(biāo)等信息直奋，用戶(hù)被告知了哪些信息是需要被輸入的，當(dāng)他們輸入完成后施禾，點(diǎn)擊登錄脚线，確認(rèn)的動(dòng)畫(huà)立刻就出現(xiàn)了。這個(gè)案例是APP的拾积。在桌面端上殉挽，你可以讓說(shuō)明在光標(biāo)懸浮在特定字段上的時(shí)候借助動(dòng)效呈現(xiàn)說(shuō)明丰涉，將說(shuō)明信息推送到用戶(hù)眼前。
如果你不知道從哪里開(kāi)始下手設(shè)計(jì)懸浮動(dòng)效的話(huà)斯碌，表單是你的首要選擇一死。至少在這個(gè)環(huán)節(jié)，用戶(hù)是有預(yù)期的傻唾，而他們的需求也不復(fù)雜：使用簡(jiǎn)單的動(dòng)效給予用戶(hù)清晰的說(shuō)明投慈，和正確的反饋。
結(jié)語(yǔ)
懸停動(dòng)效看起來(lái)很麻煩很棘手冠骄，但是實(shí)際上很簡(jiǎn)單伪煤，使用CSS動(dòng)效，幾乎任何人都可以輕松的在網(wǎng)頁(yè)中實(shí)現(xiàn)這個(gè)功能凛辣。它是輕量級(jí)的抱既，并且有大量的現(xiàn)成的代碼供你使用。
不過(guò)扁誓，重點(diǎn)在于你需要把握懸停動(dòng)效的核心規(guī)則：它是要有用的防泵，而不僅僅是炫酷的效果。
原文地址：designshark
原文作者：CARRIE COUSINS
譯者：陳子木
