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