在過去幾年中,運動設計在 WooCommerce 獨立站網頁設計行業中已經大幅度提升。大多數著陸頁和屢獲殊榮的 WordPress 網站設計都包含了運動的某些方面,無論是通過插圖,視頻,動畫 GIF,還是微妙的自定義表情。
有些網站甚至在其產品中使用動畫設計,例如 Apple 使用垂直滾動作為將動畫應用於其產品模型的觸發器。
深圳 WordPress 網站設計有一些非凡的例子可以説明將動畫設計元素應用到網站時可以實現的目標。在本文中,我們將彙總最佳選擇。
1.Pipefy
Pipefy 在其網站的重要部分使用動畫設計。它顯示了其產品的多用户界面演示,其中假設多用户與平台進行互動並展示平台。
2.Figma
Figma 的主要賣點是設計合作。因此,它使用重要部分中的有效屏幕捕獲視頻素材進行演示。
3.Zendesk
ZenDesk 的答案 Bot 在他們的網站上使用一個簡單的動畫設計示例進行了演示。
4.Museum of Science + Industry
Museum of Science + Industry 在其網站的重要部分使用動畫和視頻來説明每個活躍的展覽。它增加了很多視覺興趣和效果。
5.Adidas
Adidas Climazone 的登陸頁面使用動畫設計,通過多用户滾動作為觸發器。當多用户沿著頁面向下移動時,圖形和影像會變形和變化。
6.Stripe Sigma
在最令人印象深刻的例子中,Stripe 在多個例項中使用運動設計。英雄部分使用視頻來説明產品的執行情況,而在常見問題解答卡片的滾動代碼下方從右到左,隨著時間的推移改變顏色。
7.Snappd
Snappd 的主頁滾動瀏覽一系列視頻故事。當一個人與 iPhone 模型對齊時,它會觸發視頻播放。
8.ZKIPSTER
ZKIPSTER 使用了一種更傳統的動畫設計實現:全尺寸背景視頻。 它具有很好的效果,在頂部應用過濾器可以獲得更大的對比度和細微之處。
9.Shopify
Shopify 通過其產品影像使用動作。 在這種情況下,多用户的滾動位置用作觸發器,以擴充套件產品模型並在簡單設計中顯示其複雜性。
10.An Interesting Day
“有趣的一天” 網站通過實施視差效果來應用運動,該視差效果跟蹤多用户遊標的點以產生深度效果。 它是微妙但高效且令人滿意的體驗。