做有活力的網(wǎng)站？超實用網(wǎng)頁動畫指南值得收藏 | 分享

時間：2023-10-05 09:48:01 | 來源：網(wǎng)站運營

時間：2023-10-05 09:48:01 來源：網(wǎng)站運營

做有活力的網(wǎng)站？超實用網(wǎng)頁動畫指南值得收藏 | 分享：現(xiàn)如今，動畫對于網(wǎng)頁設(shè)計師已經(jīng)不再新奇，它正在成為最基礎(chǔ)的交互設(shè)計效果。




動畫就是變化，是一種運動。它是我們藝術(shù)創(chuàng)作中最接近真實反映生活的東西。這就是為什么人們總是說“動畫使我們的網(wǎng)站鮮活起來。”這些你聽起來可能是陳詞濫調(diào)了，但這個它卻很優(yōu)美地呈現(xiàn)了動畫在網(wǎng)頁設(shè)計中的目的。




下面就來跟范兒姐一起來了解一下網(wǎng)頁動畫吧~

01 網(wǎng)頁動畫簡史

正所謂，了解一件事物，就要了解它的歷史?；ヂ?lián)網(wǎng)上的動畫是如何發(fā)展到今天這么酷的呢？其實最初一切都誕生于GIF圖。




GIF圖的流行使得人們想要將動畫引入網(wǎng)頁中。（其實一開始大多數(shù)人并沒有從改善可用性的方式考慮動畫。一切都只是為了產(chǎn)生一點個性，表現(xiàn)一點生機(jī)，與其他靜止的網(wǎng)頁區(qū)分開。）當(dāng).gif文件的能力耗盡后，人們想要一種更好的方式，來向網(wǎng)站中添加動畫，這個過程中，人們嘗試過添加音樂、運用Flash等等。

隨后，大多設(shè)計師轉(zhuǎn)移到基于Javascript的動畫上，用于創(chuàng)造一些小東西，比如下拉菜單和其他導(dǎo)航元素。到了00年代中旬，W3C已經(jīng)在努力將動畫加入到CSS規(guī)范中。2009年，首份公開的CSS動畫規(guī)范初稿就發(fā)布了。




現(xiàn)如今的網(wǎng)頁設(shè)計探索出了強(qiáng)制硬件渲染、CSS動畫結(jié)合SVG文件、延伸基本動畫功能的JavaScript庫，等等方式。這不僅僅是為網(wǎng)站增添風(fēng)格，也是在試圖改善可用性，告知并教育用戶，讓用戶更容易了解他們在做什么。




所以對于網(wǎng)頁設(shè)計師，動畫不再是新奇事物。

02 網(wǎng)頁動畫的種類

回到正題，我們不能將動畫效果隨手加于網(wǎng)頁元素之上，然后期盼它能提升轉(zhuǎn)化率。那太傻了，就像設(shè)計的所有其他方面，使用哪種動畫，何時使用，這都需要仔細(xì)考慮。




實際細(xì)節(jié)與實現(xiàn)也是必須考慮的。如果你的動畫過于耗費資源，拖慢用戶的移動設(shè)備，或者更糟的是拖慢他們的桌面設(shè)備，這就有問題了。我們由此入手，看看網(wǎng)頁上幾種典型的動畫：

1.界面元素動畫

這可能是最普通一種動畫，而且也是最有用的動畫類型：這是一種讓用戶了解他們的操作（比如點擊）被記錄的動畫。變化的發(fā)生需要他們的點擊來催化，無論是轉(zhuǎn)向另一個頁面，打開側(cè)邊欄或模態(tài)窗口，還是在客服窗口中發(fā)送電子郵件。




在這個扁平化設(shè)計的世界，反饋信息是十分重要的。人們需要了解界面與裝飾物之間的區(qū)別。讓元素運動起來，簡單微妙的交互方式，給予用戶他們所需的反饋。

2.等待動畫

這個也同樣是為了給用戶提供反饋。你可以在某些操作正在后臺進(jìn)行時呈現(xiàn)給用戶。

其實這類動畫的作用在圖形化用戶界面首次發(fā)明的時候就得到了印證。最早的方式是鼠標(biāo)指針變成沙漏以及進(jìn)度條：Apple在采用了“旋轉(zhuǎn)的沙灘排球”，而windows則呈現(xiàn)了文件優(yōu)雅地從一個文件夾飛向另一個。

3.講故事的動畫

如今，用動畫來講故事的這種形式已經(jīng)超越了卡通，當(dāng)然啦，這里提及到的動畫是那些被設(shè)計出來與用戶互動（比如向下滾動）的網(wǎng)站，操作引發(fā)了動畫并講述了故事。




有些普遍例子，那些頁面會在你眼前將產(chǎn)品“裝配”起來，以此展現(xiàn)新產(chǎn)品。其他則更像卡通片，或者有個小卡通形象跟隨你到頁面的每個地方。這些動畫的作用存在爭議；通常它們并沒有提升可用性的意圖，只是為了讓用戶印象深刻，為他們提供頁面主題相應(yīng)的環(huán)境。它們可能是在試圖呈現(xiàn)一件產(chǎn)品的工藝，或是分享打造這件創(chuàng)造物的經(jīng)歷。




動畫能否做到這點，取決于它們本身的質(zhì)量。你要考慮的是其是否過度影響了網(wǎng)站的性能，或是影響了頁面內(nèi)容本身。如果用戶在網(wǎng)站上找不到自己要的東西，世上所有的動畫效果都救不了它。

4.純裝飾動畫

對于這種沒有目的的動畫你要學(xué)會盡量避免，因為它可能會使人分心。你應(yīng)該想辦法讓人們的視線集中在商品信息和購買按鈕上讓他們來此達(dá)成目的。如果網(wǎng)站沒有提供特定的目標(biāo)，或者確定目標(biāo)時過于使人分心，他們就不會再回來了。





裝飾性的動畫應(yīng)該完全隱藏起來。在人們完成行動召喚后再展現(xiàn)出來。還可以包含微妙的動畫，只在用戶觸發(fā)某個特殊操作時才展現(xiàn)，比如鼠標(biāo)懸停在頁頭和頁尾的某個小物件上面。例如http://photojojo.com：

在任何頁面一路滾動到最底部，會出現(xiàn)一只友善的恐龍“給你拍照”。而且在有氣球的頁面上，畫面中的氣球會微妙地來回飄浮。

5.廣告中的動畫

廣告對于某些網(wǎng)站來說就是他們收入來源（咳咳），但是對于另一些網(wǎng)站則如同瘟神，所以廣告成為了很多網(wǎng)頁設(shè)計安排中令人頭疼的一件事。如果想讓人看廣告，讓它動起來就是個好方法。這可能在某些自我標(biāo)榜“不喧賓奪主”的廣告平臺那里不受歡迎，但如果動畫廣告不起作用，我們就不需要它們了。




不過這種動畫也有著與裝飾性動畫相同的問題：將用戶的注意力從主要任務(wù)上分散開。這個在線銷售的世界，分心就意味著死亡。最終，衡量利弊還取決于你。沒有廣告、低調(diào)的廣告、或是動畫廣告，都需要權(quán)衡。

03 動畫的實現(xiàn)

技術(shù)實現(xiàn)方面也很重要，但無論你用.gif圖、視頻、CSS、SVG、甚至Flash，都有一些更重要的原則。暫時忘掉你打算使用的技術(shù)與技巧，再多做一些理論儲備，用戶會感謝你的。

1.性能，性能，還是性能

提到性能，你會想：“當(dāng)然，這很明顯。動畫應(yīng)當(dāng)運行流暢，不能卡頓?！闭_，這在理論上確實顯而易見。但問題是我仍然能看到一些網(wǎng)站，雖然用最新技術(shù)構(gòu)建，動畫卻很卡。




現(xiàn)在，想象一下在低分辨率的平板或手機(jī)上，瀏覽那些網(wǎng)站是什么樣子。一方面，這是個檢驗個性的方法，但另一方面，它無法給這些龜速網(wǎng)站帶來任何業(yè)務(wù)。如果你的印象中只有卡頓的動畫，或者壓根沒有動畫，那還不如讓界面元素直接各就各位。




這就是證明了，那些加入了諸多動畫和特效的網(wǎng)站也不怎么樣，它們需要加載界面和進(jìn)度條。沒有人在看到想要的信息前，有義務(wù)等待動畫加載。




EZEQUIEL BRUNI 在這里給出一點技術(shù)層面的建議：考慮了硬件加速和性能之后，CSS幾乎總是優(yōu)于JavaScript。有選擇時，使用基于CSS的動畫，將JS作為備選。

2.從細(xì)微處開始

將動畫當(dāng)作設(shè)計工具而非樣式表現(xiàn)時，最好從細(xì)微處著手。比如，微小低調(diào)的動畫表現(xiàn)更好。第二，巨大炫目的動畫必須帶有實用的目的，不能只為了“好看”。




除了那些讓UI元素感覺“真實”和接近自然的動畫，多數(shù)網(wǎng)站都不需要任何動畫。問問自己：巨大炫目的東西在屏幕上四處移動，比常規(guī)文字和美麗的圖片更能告知和引導(dǎo)用戶嗎？




多數(shù)情況下，答案很可能都是“不”。當(dāng)然也會有例外，例外總是會有。但多數(shù)時候，讓按鈕動起來，讓隱藏的導(dǎo)航條滑入，用動畫移除發(fā)送客服郵件后的成功提示，這就足夠了。




微妙是好設(shè)計的關(guān)鍵，這點往往被低估。以此為起點，然后如果你能確信，更大更閃耀的東西在用戶體驗方面更符合你的目標(biāo)，那么再全力以赴！

3.持續(xù)時間要短

動畫要快，準(zhǔn)確的說，應(yīng)該發(fā)生得快。這里我不是在說性能，而是一個物體在運動過程中實際耗費的時間。




在我們度量界面動畫時，“毫秒”是最通常的度量單位。再長的話，人們就會開始對機(jī)器或產(chǎn)品、或是兩者失去耐心。得確保它夠短，不然讓人感覺遲鈍。




對于人們反復(fù)使用的產(chǎn)品，即使相當(dāng)有趣好玩，第10次看到時也會失去吸引力。你要明白的事，它只是個跳動的按鈕或是滑動菜單，而不是你最愛的電視節(jié)目的片頭，沒有人會為此隨聲附和。

4.有時要讓物體具有彈性

雖然有些并不明顯，但基本上所有的物體都有一點彈性。如果將它從足夠高的地方扔向堅硬的表面，而且如果沒有太大的空氣阻力的話……總之你懂我意思。




與UI元素交互就像在操作硬質(zhì)的小物體。將它們拋到一邊，它們回彈一點。扔下去，也會回彈一點。因此這很有幫助，適當(dāng)時候讓你的動畫“回彈”，尤其是當(dāng)它們垂直移動的時候，這都是在維持運動感。

5.物體不會突然停止

移動中的物體需要一些時間才能靜止。靜止物體需要一定時間加速。ok，物理現(xiàn)象！所以，當(dāng)你使物體移動或停止時，記得給他們一些時間（以毫秒計）來減速或加速。這個叫做“緩動”，這個功能被置入了CSS中。

---

以上相關(guān)內(nèi)容來自：https://www.webdesignerdepot.com

相關(guān)歷史推送：







好啦~今日分享就到這里啦，想要了解更多內(nèi)容可以留言或者私信給我哈~

更多藝術(shù)留學(xué)/作品集相關(guān)干貨請關(guān)注個人公眾號：artfans_study