Li-git
上篇文章：「【網頁動態上篇】 網頁動態效果大全！定義、案例一次看」中，我們細數了網站動態出現的時機與呈現方式，相信許多網站主心中仍有疑惑，所以本篇文章，將會以本公司作品為例，展示實際案例中會出現的動態效果，以及產品與動態效果之間的連結，讓還沒有決定如何呈現動態效果的網站主們，可以更方便、快速的帶入到自己的案例中。
這篇文章除案例分享外，也會運用上一篇文章中提及的動態效果名稱與概念，因此，請還沒看過上一篇文章的你，點擊這邊，上下篇一起看，理解更全面：
案例一、永豐效率投資
金融商品網站，如果以靜態方式製作，大量的金融相關文字可能讓使用者頭暈腦脹，因此，永豐效率投資的一頁式網站就選擇以插圖配合持續動態與按鍵動態，讓網站更加活潑。
由於本次效率投資強調長期資產配置與自動化，所以投資報表的展示也可說是相當重要，於是，我們在頁面中客製化了可動式圖表，有拉桿及按鍵雙種控制，手機、電腦皆可操作。
大部分一頁式形象網站，容易因執行時間短、預算少等限制，而選擇做純靜態網頁，但其實只要在靜態網站中，再加上一點點簡單動畫，就可以讓網站整體更加豐富，讓文字多的產品頁面更加輕鬆。
案例二、ZEUX
接著看到的這個案例，是金融服務整合app的形象網站，為強調app本身也支援虛擬貨幣的功能，在設計上，加入了科幻的元素，來代表原宇宙的意象，例如首頁背景中星光熠熠的星海。
除首頁的銀河持續動態外，本案例中也用到了載入動畫、hover回饋動態、區塊進場效果以及按鍵動態，以及許多描線動畫，這個案例同樣使用了互動式圖表。
在金融商品的案例中，我們時常能看見圖表的存在，比起靜態的圖表，讓圖表「動起來」，更能表現出資金流動、前景看漲的氛圍，常見的圖表動態效果包括折線圖一點一點連線，柱狀圖由低至高成長等，這類動態圖表也同樣適用任何需要表現圖表走勢的網站。如果想在靜態網站中加入動態效果，讓圖表動起來不妨是一個常見且安全的做法。
案例三、伊甸基金會40週年活動網站
伊甸此專案為成立四十週年籌備的網站，用到的動態效果有互動式進場動態、持續動態、按鍵動態等，「40」大字搭配太陽的輪廓在仔入動態時出現，象徵照耀台灣40年的曙光，這道曙光照向了不斷旋轉的照片動態，此旋轉動態以伊甸基金會logo中的輪椅為出發，有生生不息、不斷向前走的寓意。
在製作客製化的網站時，夏木樂的專案人員會從網站架構開始，替網站主量身打造主視覺設計以及適合動態效果，就像這次的伊甸40週年專案，以有溫度的設計觸碰受眾的心。
案例四、皮爾斯威士忌
皮爾斯威士忌的形象網頁，是夏木樂提供從商品照拍攝到網站設計，一條龍服務的開發網站。
因貴族而生的皮爾斯威士忌，以鋪克牌中的JQK為發想，大量運用帶有貴族意象的線性插畫，以優雅的深啡色、深藍色為背景，加上酒的香氣，如雲朵、迷霧一般似有似無，非常適合淡出淡入的動態效果，能營造出微醺的氛圍感，在本網站的進場動態、區域進場效果等都可以看見此種效果。
除了公司本身的氣質之外，網站的動態也會因為不同的商品性質而受到影響，本次皮爾斯威士忌的案例中，就運用了許多線條動態效果，不僅因為線條動態與插圖的適配性高，更是酒體絲滑、柔順的展現，讓網站與商品的連結更加緊密。
結尾
上述所有案例，都是我們與客戶訪談、詢問需求後共同討論出的呈現方式，商品與動態效果之間沒有絕對關係，也沒有對錯，相同的動態效果搭配不同的網站主題、插畫有可能呈現出截然不同的效果，因此，在實際執行時，請以網頁設計公司的建議與自身需求為準。
有網站規劃需求，歡迎聯絡我們，夏木樂，品牌網頁設計專家，讓我們幫您，從網頁設計開始，提供最好的服務。
