2016年不管是網(wǎng)站還是移動(dòng)端，我們隨處可見一些扁平的動(dòng)畫元素，他們顏色清爽視覺感覺很新穎。2017年，動(dòng)效依然還是今年的主流設(shè)計(jì)元素，但跟去年相比又有些許不同。
要說到動(dòng)畫的流行其實(shí)還是得益于，過去蘋果設(shè)計(jì)的扁平風(fēng)格以及動(dòng)效部分，他們對(duì)于那些小細(xì)節(jié)的追求真的達(dá)到了極致，而今天懸停效果再次卷土重來。但并不是過去的那種俗氣，閃爍的效果，或者是簡(jiǎn)單彈跳和旋轉(zhuǎn)動(dòng)效，如今的懸停效果將給用戶帶來更好的幫助和體驗(yàn)。
懸停效果的設(shè)計(jì)范圍真的很廣，大到整個(gè)屏幕的視覺效果，小到導(dǎo)航元素都可以看到他不俗的表現(xiàn)。
.........
▼
會(huì)動(dòng)的首頁(yè)
懸停效果可以是你用戶體驗(yàn)的最關(guān)鍵的部分哦。當(dāng)你的首屏被動(dòng)畫元素充斥的時(shí)候，額外的一些懸停效果可以讓你首頁(yè)的魅力值直線UP。
HAUS，這個(gè)網(wǎng)站的設(shè)計(jì)著實(shí)讓人驚喜，屏幕上有許多卡通人物在屏幕上移動(dòng)，你可能完全無法把這些動(dòng)畫效果跟懸停效果聯(lián)系到一起，看起來知識(shí)一個(gè)動(dòng)作變換了另外一個(gè)動(dòng)作而已。但是我負(fù)責(zé)任的告訴你，如果沒有懸停效果，每個(gè)元素也就是單純的在屏幕上規(guī)律的畫圈圈罷了。
當(dāng)你使用全屏懸停動(dòng)畫這樣的效果時(shí)，訣竅是取悅用戶，而不是讓他們感到壓抑，這是一個(gè)相當(dāng)棘手的問題。如何讓他們感到新奇又不至于太過于花哨？通過讓其他設(shè)計(jì)元素簡(jiǎn)單例如例子中的黑色背景，一個(gè)再簡(jiǎn)單不過的背景與一個(gè)易于閱讀的無襯線白色字體就十分合適了。這是一個(gè)用在首屏上的技巧，可以讓用戶去和體驗(yàn)，讓他們更有興趣滾動(dòng)翻看下面的內(nèi)容。
.........
▼
按鈕效果
一個(gè)簡(jiǎn)單的動(dòng)畫設(shè)計(jì)實(shí)際上可以鼓勵(lì)用戶去點(diǎn)擊按鈕的。這看起來很簡(jiǎn)單，對(duì)吧？這其實(shí)也是這種類型的動(dòng)畫如此受歡迎的原因之一。
設(shè)計(jì)一個(gè)好的按鈕效果，可以幫助用戶更好地了解你想讓他知道的東西。上面的例子就來自Luke Etheridge，當(dāng)你鼠標(biāo)移動(dòng)到按鈕上時(shí)，他就會(huì)改變顏色，并告訴用戶點(diǎn)擊后會(huì)發(fā)生什么。這個(gè)懸停動(dòng)畫效果，它不僅很有用并且也很好看哈～
.........
▼
幻燈片效果
網(wǎng)頁(yè)很多時(shí)候是被各種圖片和內(nèi)容堆積起來的，他們經(jīng)?？雌饋砗軗頂D。所以幾乎所有的網(wǎng)站設(shè)計(jì)的時(shí)候都會(huì)選用一些滾動(dòng)動(dòng)畫效果來平衡。在多個(gè)圖片中設(shè)計(jì)上箭頭和其他指示按鈕，告訴用戶如何前進(jìn)或返回，這樣的設(shè)計(jì)其實(shí)是很多見的。
而如今設(shè)計(jì)現(xiàn)代運(yùn)動(dòng)動(dòng)畫的的關(guān)鍵是：
1. 動(dòng)作要快
2. 軌跡明確
3. 動(dòng)作一致
以上這個(gè)動(dòng)效案例是來自Baptiste Dumas。你根本不知道鼠標(biāo)點(diǎn)擊它后，下一步會(huì)怎么發(fā)生，它會(huì)在內(nèi)容元素之間創(chuàng)建一條明顯的線，所有的東西都被這條線連接在了一起，形成一個(gè)類似無縫銜接的運(yùn)動(dòng)流程，是不是很神奇。
.........
▼
導(dǎo)航菜單
不管你喜歡與否，隱藏的導(dǎo)航風(fēng)格一直是是一個(gè)很受歡迎的設(shè)計(jì)元素哦。這個(gè)動(dòng)畫懸停效果可以幫助用戶更好地瀏覽內(nèi)容，也能讓主頁(yè)視覺更簡(jiǎn)潔。
隨著指示圖標(biāo)的顯示和隱藏，菜單信息可以輕松的在屏幕上彈出和隱藏甚至是移動(dòng)，動(dòng)畫效果的目錄，是是個(gè)非常強(qiáng)大的指示工具。
Oxen Made，這個(gè)案例就使用了懸停效果和動(dòng)畫效果兩種方式在主頁(yè)上，為了指導(dǎo)用戶如何使用網(wǎng)站，他們把右上角的菜單按鈕設(shè)計(jì)成可以更改年色的懸停效果，讓用戶知道這是一個(gè)可以點(diǎn)擊的元素。點(diǎn)擊后彈出完整的菜單，是從頁(yè)面的左側(cè)擺動(dòng)出來非常顯眼。此外，右下角一個(gè)小三角形箭頭，使用和菜單按鈕相同的效果，讓用戶知道還有更多的內(nèi)容可以滾動(dòng)，不得不說你們真的好貼心哦～
這些微妙的動(dòng)效設(shè)計(jì)，和相對(duì)復(fù)雜的背景視頻搭配在一起，確實(shí)是十分合適的。在背景視頻強(qiáng)烈的運(yùn)動(dòng)襯托下，按鈕的那些柔和的動(dòng)效更容易吸引用戶的注意力，讓用戶更好的使用網(wǎng)站，按鈕也充分起到了導(dǎo)航的作用。
.........
▼
表格和字段
還有一些使用懸停效果優(yōu)秀案例，例如把表格融入其中。幾乎每一個(gè)你訪問的網(wǎng)站都會(huì)要求你注冊(cè)或者填寫一些問題信息。這確實(shí)是一個(gè)很讓人討厭的步驟，因?yàn)檎娴暮芊爆?，所以如果用戶提供這些信息越容易，你就越容易得到那些對(duì)你有用的信息。
但如果讓這些列表信息不那么乏味呢？一些視覺線索可以幫助用戶記住如何進(jìn)入一個(gè)領(lǐng)域，并指引他們確認(rèn)提交是非常重要的。
上面的這個(gè)例子它做了兩件事。第一個(gè)是用戶被告知要輸入什么信息，他們可以看到整個(gè)操作過程，以及點(diǎn)擊登錄按鈕后，我將要填寫的信息是什么，這樣用戶就不必猜的我這一步操作完成后，下一步我要做什么了。
如果你還不知道如何去應(yīng)用懸停效果的話，這個(gè)效果可以作為一個(gè)很好的起點(diǎn)哦。其實(shí)在這樣簡(jiǎn)單的引導(dǎo)下，用戶是享受跟網(wǎng)站進(jìn)行互動(dòng)的，這樣簡(jiǎn)單的動(dòng)畫就能讓我們收獲到不錯(cuò)的反饋哦。
.........
▼
結(jié)論
在我們看來懸停動(dòng)畫是十分棘手和復(fù)雜的設(shè)計(jì)技術(shù)，但實(shí)際情況卻是，利用CSS，幾乎任何人都可以輕松添加一個(gè)簡(jiǎn)單的動(dòng)畫效果。他們其實(shí)很簡(jiǎn)單，在網(wǎng)絡(luò)上有很多動(dòng)畫師會(huì)分享一些代碼，讓你去體驗(yàn)研究。
最后分享給你一些使用這些技巧的關(guān)鍵：它需要有它存在的意義。不要過于頻繁的使用這些效果，只在添加內(nèi)容時(shí)使用懸停效果或者動(dòng)畫；不要讓這些效果分散用戶本來應(yīng)該執(zhí)行的行為哦。
