客戶常常說：「我要做網站，然後我要做動態！」

確實，適時地在網站中加入動態效果能為網站設計加分。但是，你的動態要放在哪裡？什麼時機點出現？長什麼樣子？你想好了嗎…？

這篇文章將以網頁中的動態所發生的時間點為分類，呈現一篇網頁動態案例大全。給想做動態卻不知道如何下手的你一點方向，給已經知道想要什麼的你一點參考。

廢話不多說，我們開始吧！

一、載入時

載入動態

・定義：在loading時出現，landing前結束的動態。

隨著Google SEO政策不斷推陳出新，網頁的載入速度也開始影響SEO排名。如果網站跑得慢，不但SEO排名會下滑，也容易讓造訪者失去耐心，進而造成跳出率上升。

為避免此情況，近年來網頁設計趨勢中，「載入動態」的重要性逐漸被重視。

載入動畫使用上應注意時間與複雜度，如果動畫太過複雜、太久，光是「『載入』載入動畫」的時間，就有可能讓使用者分心，本末倒置。

最常出現的載入動畫型態有三種：

第一種：進度條，用進度條的方式提醒使用者「我們有在載入喔，即將完成，先別走開」，此種做法是目前市面上的中小行官網中，最經濟實惠且常見的解決方法。

（網站連結：https://www.english4tw.com/）

第二種：Logo延伸動畫，是繼進度條後最簡單直白的做法，不僅增加等待時間的趣味性，在載入網成後也能讓網站更有整體感。

（網站連結：https://demo.simular.co/zeux/v2/）

第三種：與網頁相關的小元素，以下案例是一個遊戲型網站，季節大約是秋季，因此載入動畫中加入了落葉的元素，使網站體驗更加完整，載入時有趣又不出戲。

（網站連結：https://wayfinder.nfb.ca/）

二、抵達時

進場動態

・定義：載入動畫結束後，抵達網頁時，新的物件在畫面中登場的方式。

一張專輯有intro，一本書有序，進場動態就是在進入百貨公司前的大廳，那種華麗的櫥窗陸續出現在眼前的瞬間。

進場動態與載入動態相同，都會影響造訪者對網站的印象，因此，除非是超級3D大炫技的網站，一般網站還是建議以簡單、效果顯著的動態為主。

在市面上的網頁設計中，類似打字機的進場動態使用率頗高，隨著文字的出現，造訪者的目光被引導，跟著文字，默默地讀完網站名稱或主旨。

（網站連結：https://forgepartners.com/）

也有這種描線加上透明度遞增的做法，簡單雅致，卻能達到幫畫面加分的效果。

（網站連結：https://www.liquor-nce.com/）

最經濟實惠且簡單的進場動態，當屬這種單點移動的動態，因為技術穩定不易跑版，深受小型網站愛戴。

（網站連結：https://bank.sinopac.com/sinopacBT/webevents/Bond/index.html）

主要動態

・定義：全網站最靚的仔，技術上與設計上都是豔壓全方的重點存在。

主要動態像是一個樂團中的主唱，佔據的舞台的C位，一個靈魂人物。在網站中，則是技術上、視覺上最匠心獨具的部分。

如下例，許多網站以3D技術來搭建主動態，甚至搭配游標互動，確實足夠特別，讓人記住，但同時也要小心網站速度因此受影響。

（網站連結：https://henriheymans.com/）

許多Loop動態組裝起來的主要動態，配上對比度高的色彩運用，同樣可以達到吸睛的效果。

（網站連結：https://humbleteam.com/）

三、滑動時

持續動態

・定義：一個網站中，不管使用者滑到哪，都會不斷、持續Loop的動態。

持續動態是網頁動態界的NPC，有時用來提示故事前進方向，有時只是自顧自地存在著。

此種動態通常用來增加網站豐富富度，無需觸發，且應用範圍廣泛，前景、背景、小動畫都可以使用，使用時請注意面積與變化幅度，若面積、變化過大可能造成網站速度變慢或喧賓奪主。

持續動態界中的長青樹就是跑馬燈，同時也是技術最成熟、最常見的持續動態。

（網站連結：https://releap.io/）

當持續動態出現在背景填滿空白部分，能讓畫面更有生氣，提升層次感。

（網站連結：https://energypark.org.tw/）

持續動態也經常讓小插圖動起來，使文字多的網站更加活潑。

（網站連結：https://bank.sinopac.com/sinopacBT/webevents/retire/index.html）

Hover回饋動態

・定義：對使用者在網頁中滑動的動作做出動態變化。

像是Youtube影片下方的進度條，一種隨著使用者的前進速度、範圍或位置而產生變化的動態效果。與載入動畫、進場動畫等不同，Hover回饋動態並不會跑完就停止，這種動態效果通常是「可逆的」。

最常出現的是閱讀進度條，提示造訪者閱讀進度，或是不斷變化的背景，讓平鋪直述的靜態網站內頁多出一點小心機。

（網站連結：https://blog.hubspot.com/?_ga=2.246900615.2068945020.1649228750-182353800.1649228750）

（網站連結：https://guiacirugiacardiaca.com/）

（網站連結：https://www.mitake.com.tw/cht/mitake_index.htm）

除展現小心機外，Hover回饋動態也常被使用在線性敘事的網站中，擔任說故事幫手，讓畫面連貫，像番故事書一樣，搭建出沈浸式的畫面。

（網站連結：https://www.editorx.com/?_gl=1*ecg7y3*_ga*NzgzMzQzNTIwLjE2NDkyMTYzODM.）

（網站連結：https://atelier.net/social-mobility/）

區塊進場效果

・定義：透過使用者的滑動，被分段的資訊依序出現的過程。

資訊如果過多，容易讓使用者分心、感到疲憊。區域進場效果所扮演的就是每一個樂團演出之間負責講笑話得主持人，讓使用者在讀取資訊時，不會資訊過量，給予段落與段落之間的喘息空間。

區塊進場效果中，最常被使用的是淡入以及飛入效果。

（網站連結：https://simular.co/）

（網站連結：https://www.liquor-nce.com/）

（網站連結：https://formulaauto.dk/）

四、點擊時

按鍵動態

・定義：按鍵本身，隨著游標放至、經過或點按，產生主動或被動的變化。

按鍵動態是為了提醒使用者哪些按鍵是可點擊、有意義的。

網頁設計人員在編寫網站動線或CTA時，也時常搭配按鍵動態來標示動線或引導決策，讓使用者朝我們規劃的路線前進。

（網站連結：https://le-lab.io/）

（網站連結：https://www.datavideo.com/）

（網站連結：https://www.leofoovillage.com.tw/）

游標特效

・定義：游標本身，因進入網站或在網站中移動、點擊而出現的視覺效果。

游標特效分成游標本人型態轉變，或是點擊時出現的效果，有些兩者都有，甚至在不同的頁面點擊會出現不同的效果，像是用第一人稱打遊戲，激發好奇心，是一個增加使用者參與感的方式。

（網站連結：https://mediabirds.nl/cases-mediabirds/）

（網站連結：https://www.magnetism.fr/en/）

轉場效果

・定義：網站的內頁與內頁之間切換時會出現的動態。

前段介紹過載入特效，轉場效果就好像是網站內頁與內頁之間的載入特效，讓載入時間變得更有趣。

轉場效果使用上需注意秒數，越簡短越好，設計上最好是網站主色延伸，與網站有視覺連結，避免讓人有文章讀到一半被切斷的感覺。

（網站連結：https://conference.awwwards.com/）

（網站連結：https://www.cathydolle.com/works/project-x-paris）

（網站連結：https://www.leofoovillage.com.tw/）

・結語

近年來，因網路技術的進步以及疫情的雙重加持，網站動態市場可以說是百花齊放，有非常多好的、新的動態形式問世，但還是建議各位網站主，挑選自己適合的動態效果即可。試想，一個賣腸胃保健食品網站，做了整整三頁的超大爆閃3D迪斯可球，不僅不能讓網站加分，更容易使人眼花撩亂。

想看「【網頁動態下篇】 動態效果怎麼選？華麗vs簡單？」，歡迎點擊連結：

【網頁動態下篇】 網頁動態效果怎麼選？ 應用案例一目了然 | 夏木樂網頁設計

如果你已經知道自己喜歡什麼，卻不知道適不適合，請將您的參考資料整理好，找網頁設計公司諮詢，或聯絡我們，夏木樂，品牌網頁設計專家，讓我們幫您，從網頁設計開始，提供最好的服務。