時(shí)尚的幾何形狀是一種不斷流行的網(wǎng)站設(shè)計(jì)趨勢(shì)，這一次的新轉(zhuǎn)折是，形狀和設(shè)計(jì)元素包括動(dòng)畫的觸摸，使形狀和圖案栩栩如生。在網(wǎng)站設(shè)計(jì)上以一種簡(jiǎn)單且得到廣泛支持的方式實(shí)現(xiàn)動(dòng)畫比以往任何時(shí)候都更容易。

這也是一種漂亮的小網(wǎng)站設(shè)計(jì)技巧，可以為幾乎任何東西增加視覺(jué)趣味，適用于所有類型的元素，從標(biāo)志、圖標(biāo)到背景，再到主頁(yè)面圖像。

讓我們來(lái)看看這個(gè)網(wǎng)站設(shè)計(jì)趨勢(shì)吧。

動(dòng)畫地理背景

波浪效果在這個(gè)背景動(dòng)畫編譯的幾何形狀是非常出色的。

它提供了柔軟，微妙的運(yùn)動(dòng)，同時(shí)保持焦點(diǎn)在文字，保持可讀性，并確保行動(dòng)的呼吁是突出的。

幾何形狀和動(dòng)畫的組合因其色彩、時(shí)序和簡(jiǎn)潔而奏效。動(dòng)畫看起來(lái)和行為都像一個(gè)真實(shí)的東西。它并不會(huì)讓人心煩意亂，也不會(huì)妨礙內(nèi)容。（這些是背景動(dòng)畫常見(jiàn)的錯(cuò)誤。）

最好的部分是，雖然幾何形狀是流行的，但在這里，他們與品牌和內(nèi)容。"波浪"的背景是對(duì)oceanstart品牌中"ocean"的創(chuàng)意承接。它是微妙的，并把所有的東西結(jié)合在一起，為一個(gè)時(shí)尚的設(shè)計(jì)，這是在點(diǎn)上。

3D形狀和動(dòng)畫

當(dāng)您想到地質(zhì)形狀作為一種設(shè)計(jì)趨勢(shì)時(shí)，您腦海中出現(xiàn)的可能更像來(lái)自oceanstart的例子，但這種趨勢(shì)并不局限于二維空間。

使形狀與三維動(dòng)畫的生活，在這里，豆類機(jī)構(gòu)使用了單調(diào)的顏色、幾何形狀和豆類特征的組合。

這很簡(jiǎn)單，奇怪，而且非常吸引人。這一趨勢(shì)在這里行得通，因?yàn)樗菍⑺袞|西結(jié)合在一起的設(shè)計(jì)主線。場(chǎng)景中的形狀有助于使角色看起來(lái)和感覺(jué)更真實(shí)。

這就是像地理圖形這樣簡(jiǎn)單的事物的美，它們是您可以在視覺(jué)上抓住并在設(shè)計(jì)中感覺(jué)真實(shí)的元素。

觸覺(jué)運(yùn)動(dòng)

幾乎可以觸及、觸摸和移動(dòng)的幾何形狀是這種趨勢(shì)的一些應(yīng)用程序的焦點(diǎn)。（他們通常都很聰明。）

主頁(yè)上的幸運(yùn)胡須的每個(gè)形狀都有微妙而明顯的運(yùn)動(dòng)。幾何形狀傾斜和移動(dòng)在一個(gè)軸上，扭曲和移動(dòng)向前和向后，甚至脈沖分開(kāi)彼此。

每一種形狀本身似乎都在創(chuàng)造一個(gè)小故事，每個(gè)都植根于觸覺(jué)動(dòng)畫，感覺(jué)如此真實(shí)，您認(rèn)為您可以觸摸它。

關(guān)于幾何圖形的使用，非常有趣的是，這種關(guān)聯(lián)不是您通常會(huì)想到的幾何圖形。它們很少如此明顯地與現(xiàn)實(shí)主義風(fēng)格的動(dòng)作聯(lián)系在一起。但效果很好。

加載圖標(biāo)動(dòng)畫

現(xiàn)在，這是一個(gè)整潔的使用幾何形狀-使用動(dòng)畫版本的徽標(biāo)作為加載動(dòng)畫。繁榮品牌意識(shí)是網(wǎng)站設(shè)計(jì)的一個(gè)快速先導(dǎo)。

幾何徽標(biāo)在設(shè)計(jì)的其他部分也有動(dòng)畫效果，比如在滾動(dòng)期間。

這種趨勢(shì)的唯一缺點(diǎn)是使用幾何標(biāo)識(shí)可能會(huì)更持久或長(zhǎng)期使用。只有當(dāng)您真的喜歡幾何圖形并且打算用一段時(shí)間的時(shí)候，才可以使用這種方法。（好消息是，這是一種經(jīng)久不衰的趨勢(shì)。）

視差滾動(dòng)和地理形狀

另一種方法，結(jié)合動(dòng)畫幾何形狀和模式到您的網(wǎng)站設(shè)計(jì)是視差滾動(dòng)。這種類型的滾動(dòng)動(dòng)畫可以為幾何背景和前景層創(chuàng)建一個(gè)很好的運(yùn)動(dòng)元素。

實(shí)現(xiàn)這一目標(biāo)的訣竅很微妙。圖層移動(dòng)太快或移動(dòng)太多會(huì)讓網(wǎng)站訪問(wèn)者感到惡心（像暈動(dòng)?。Ｒ粋€(gè)好的簡(jiǎn)單的動(dòng)作感覺(jué)更自然，不會(huì)讓用戶感到刺耳。

上面的例子使用了視差滾動(dòng)和線條填充形狀，填充和移動(dòng)當(dāng)您向下導(dǎo)航頁(yè)面。這個(gè)動(dòng)作是如此微妙，如果您滾動(dòng)得太慢，您甚至可能會(huì)錯(cuò)過(guò)它。

幾何盤旋動(dòng)畫

為動(dòng)作和動(dòng)畫確定正確的速度本身就是一門藝術(shù)。對(duì)某些用戶來(lái)說(shuō)太快的東西可能對(duì)其他用戶來(lái)說(shuō)太慢。有很多個(gè)人偏好涉及到動(dòng)畫的速度。

防止這成為一個(gè)幾何形狀和動(dòng)畫連接懸停狀態(tài)和光標(biāo)位置的問(wèn)題。這給每個(gè)使用完全控制運(yùn)動(dòng)的設(shè)計(jì)。

KDCAP在這方面做得很好，它提供了多層的懸停動(dòng)畫，很容易看到光標(biāo)在接近可點(diǎn)擊元素時(shí)"爆炸"。

Geo形狀作為一個(gè)設(shè)計(jì)主題

幾乎任何東西都可以轉(zhuǎn)換成幾何形式，德拉薩斯小組的視覺(jué)顯示證明了這一點(diǎn)。主頁(yè)面滑塊中的每個(gè)元素都有公共對(duì)象，這些對(duì)象都被制作成幾何圖形。

這里有兩部分的運(yùn)動(dòng)：

反彈懸停狀態(tài)的對(duì)象在屏幕上

自動(dòng)播放的幻燈片

讓這個(gè)設(shè)計(jì)脫穎而出的是對(duì)這些物品的熟悉，以及被應(yīng)用到這些物品上的新風(fēng)格。單調(diào)的幻燈片也有助于聚焦移動(dòng)的物體。

時(shí)間軸動(dòng)畫

這里有一種使用幾何形狀的方法，您可能沒(méi)有考慮：創(chuàng)建一個(gè)時(shí)間軸動(dòng)畫與形狀為焦點(diǎn)。

結(jié)合形狀和顏色元素可以為缺乏其他選項(xiàng)的項(xiàng)目創(chuàng)建視覺(jué)圖像，比如照片或視頻?；旌闲螤詈皖伾梢允敲匀撕陀腥さ摹?dòng)畫把這一切都變成了生活。

結(jié)論

一些網(wǎng)站設(shè)計(jì)趨勢(shì)應(yīng)該至少在您的一個(gè)項(xiàng)目中嘗試，使用幾何形狀和動(dòng)畫是其中之一。

這是一個(gè)通用性很強(qiáng)的選項(xiàng)，可以處理各種內(nèi)容類型，并與其他美學(xué)原則很好地融合。另外，幾何形狀的使用似乎是一種趨勢(shì)。使用這個(gè)概念不會(huì)讓您的網(wǎng)站看起來(lái)過(guò)時(shí)。