【網頁動態下篇】 網頁動態效果怎麼選? 應用案例一目了然

網站規劃

【網頁動態下篇】 網頁動態效果怎麼選? 應用案例一目了然

上篇文章:「【網頁動態上篇】 網頁動態效果大全!定義、案例一次看」中,我們細數了網站動態出現的時機與呈現方式,相信許多網站主心中仍有疑惑,所以本篇文章,將會以本公司作品為例,展示實際案例中會出現的動態效果,以及產品與動態效果之間的連結,讓還沒有決定如何呈現動態效果的網站主們,可以更方便、快速的帶入到自己的案例中。

這篇文章除案例分享外,也會運用上一篇文章中提及的動態效果名稱與概念,因此,請還沒看過上一篇文章的你,點擊這邊,上下篇一起看,理解更全面:

案例一、永豐效率投資

金融商品網站,如果以靜態方式製作,大量的金融相關文字可能讓使用者頭暈腦脹,因此,永豐效率投資的一頁式網站就選擇以插圖配合持續動態與按鍵動態,讓網站更加活潑。

由於本次效率投資強調長期資產配置與自動化,所以投資報表的展示也可說是相當重要,於是,我們在頁面中客製化了可動式圖表,有拉桿及按鍵雙種控制,手機、電腦皆可操作。 

大部分一頁式形象網站,容易因執行時間短、預算少等限制,而選擇做純靜態網頁,但其實只要在靜態網站中,再加上一點點簡單動畫,就可以讓網站整體更加豐富,讓文字多的產品頁面更加輕鬆。

案例二、ZEUX

接著看到的這個案例,是金融服務整合app的形象網站,為強調app本身也支援虛擬貨幣的功能,在設計上,加入了科幻的元素,來代表原宇宙的意象,例如首頁背景中星光熠熠的星海。

除首頁的銀河持續動態外,本案例中也用到了載入動畫、hover回饋動態、區塊進場效果以及按鍵動態,以及許多描線動畫,這個案例同樣使用了互動式圖表。

在金融商品的案例中,我們時常能看見圖表的存在,比起靜態的圖表,讓圖表「動起來」,更能表現出資金流動、前景看漲的氛圍,常見的圖表動態效果包括折線圖一點一點連線,柱狀圖由低至高成長等,這類動態圖表也同樣適用任何需要表現圖表走勢的網站。如果想在靜態網站中加入動態效果,讓圖表動起來不妨是一個常見且安全的做法。

案例三、伊甸基金會40週年活動網站

伊甸此專案為成立四十週年籌備的網站,用到的動態效果有互動式進場動態、持續動態、按鍵動態等,「40」大字搭配太陽的輪廓在仔入動態時出現,象徵照耀台灣40年的曙光,這道曙光照向了不斷旋轉的照片動態,此旋轉動態以伊甸基金會logo中的輪椅為出發,有生生不息、不斷向前走的寓意。

在製作客製化的網站時,夏木樂的專案人員會從網站架構開始,替網站主量身打造主視覺設計以及適合動態效果,就像這次的伊甸40週年專案,以有溫度的設計觸碰受眾的心。

案例四、皮爾斯威士忌

皮爾斯威士忌的形象網頁,是夏木樂提供從商品照拍攝到網站設計,一條龍服務的開發網站。

因貴族而生的皮爾斯威士忌,以鋪克牌中的JQK為發想,大量運用帶有貴族意象的線性插畫,以優雅的深啡色、深藍色為背景,加上酒的香氣,如雲朵、迷霧一般似有似無,非常適合淡出淡入的動態效果,能營造出微醺的氛圍感,在本網站的進場動態、區域進場效果等都可以看見此種效果。

除了公司本身的氣質之外,網站的動態也會因為不同的商品性質而受到影響,本次皮爾斯威士忌的案例中,就運用了許多線條動態效果,不僅因為線條動態與插圖的適配性高,更是酒體絲滑、柔順的展現,讓網站與商品的連結更加緊密。

結尾

上述所有案例,都是我們與客戶訪談、詢問需求後共同討論出的呈現方式,商品與動態效果之間沒有絕對關係,也沒有對錯,相同的動態效果搭配不同的網站主題、插畫有可能呈現出截然不同的效果,因此,在實際執行時,請以網頁設計公司的建議與自身需求為準。

有網站規劃需求,歡迎聯絡我們,夏木樂,品牌網頁設計專家,讓我們幫您,從網頁設計開始,提供最好的服務。

Ask Simular