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