網站設計趨勢篇:地理形狀和圖案(帶有動畫)
時尚的幾何形狀是一種不斷流行的網站設計趨勢,這一次的新轉折是,形狀和設計元素包括動畫的觸摸,使形狀和圖案栩栩如生。在網站設計上以一種簡單且得到廣泛支持的方式實現動畫比以往任何時候都更容易。
這也是一種漂亮的小網站設計技巧,可以為幾乎任何東西增加視覺趣味,適用于所有類型的元素,從標志、圖標到背景,再到主頁面圖像。
讓我們來看看這個網站設計趨勢吧。
動畫地理背景
波浪效果在這個背景動畫編譯的幾何形狀是非常出色的。
它提供了柔軟,微妙的運動,同時保持焦點在文字,保持可讀性,并確保行動的呼吁是突出的。
幾何形狀和動畫的組合因其色彩、時序和簡潔而奏效。動畫看起來和行為都像一個真實的東西。它并不會讓人心煩意亂,也不會妨礙內容。(這些是背景動畫常見的錯誤。)
最好的部分是,雖然幾何形狀是流行的,但在這里,他們與品牌和內容。"波浪"的背景是對oceanstart品牌中"ocean"的創(chuàng)意承接。它是微妙的,并把所有的東西結合在一起,為一個時尚的設計,這是在點上。
3D形狀和動畫
當您想到地質形狀作為一種設計趨勢時,您腦海中出現的可能更像來自oceanstart的例子,但這種趨勢并不局限于二維空間。
使形狀與三維動畫的生活,在這里,豆類機構使用了單調的顏色、幾何形狀和豆類特征的組合。
這很簡單,奇怪,而且非常吸引人。這一趨勢在這里行得通,因為它是將所有東西結合在一起的設計主線。場景中的形狀有助于使角色看起來和感覺更真實。
這就是像地理圖形這樣簡單的事物的美,它們是您可以在視覺上抓住并在設計中感覺真實的元素。
觸覺運動
幾乎可以觸及、觸摸和移動的幾何形狀是這種趨勢的一些應用程序的焦點。(他們通常都很聰明。)
主頁上的幸運胡須的每個形狀都有微妙而明顯的運動。幾何形狀傾斜和移動在一個軸上,扭曲和移動向前和向后,甚至脈沖分開彼此。
每一種形狀本身似乎都在創(chuàng)造一個小故事,每個都植根于觸覺動畫,感覺如此真實,您認為您可以觸摸它。
關于幾何圖形的使用,非常有趣的是,這種關聯不是您通常會想到的幾何圖形。它們很少如此明顯地與現實主義風格的動作聯系在一起。但效果很好。
加載圖標動畫
現在,這是一個整潔的使用幾何形狀-使用動畫版本的徽標作為加載動畫。繁榮品牌意識是網站設計的一個快速先導。
幾何徽標在設計的其他部分也有動畫效果,比如在滾動期間。
這種趨勢的唯一缺點是使用幾何標識可能會更持久或長期使用。只有當您真的喜歡幾何圖形并且打算用一段時間的時候,才可以使用這種方法。(好消息是,這是一種經久不衰的趨勢。)
視差滾動和地理形狀
另一種方法,結合動畫幾何形狀和模式到您的網站設計是視差滾動。這種類型的滾動動畫可以為幾何背景和前景層創(chuàng)建一個很好的運動元素。
實現這一目標的訣竅很微妙。圖層移動太快或移動太多會讓網站訪問者感到惡心(像暈動?。?。一個好的簡單的動作感覺更自然,不會讓用戶感到刺耳。
上面的例子使用了視差滾動和線條填充形狀,填充和移動當您向下導航頁面。這個動作是如此微妙,如果您滾動得太慢,您甚至可能會錯過它。
幾何盤旋動畫
為動作和動畫確定正確的速度本身就是一門藝術。對某些用戶來說太快的東西可能對其他用戶來說太慢。有很多個人偏好涉及到動畫的速度。
防止這成為一個幾何形狀和動畫連接懸停狀態(tài)和光標位置的問題。這給每個使用完全控制運動的設計。
KDCAP在這方面做得很好,它提供了多層的懸停動畫,很容易看到光標在接近可點擊元素時"爆炸"。
Geo形狀作為一個設計主題
幾乎任何東西都可以轉換成幾何形式,德拉薩斯小組的視覺顯示證明了這一點。主頁面滑塊中的每個元素都有公共對象,這些對象都被制作成幾何圖形。
這里有兩部分的運動:
反彈懸停狀態(tài)的對象在屏幕上
自動播放的幻燈片
讓這個設計脫穎而出的是對這些物品的熟悉,以及被應用到這些物品上的新風格。單調的幻燈片也有助于聚焦移動的物體。
時間軸動畫
這里有一種使用幾何形狀的方法,您可能沒有考慮:創(chuàng)建一個時間軸動畫與形狀為焦點。
結合形狀和顏色元素可以為缺乏其他選項的項目創(chuàng)建視覺圖像,比如照片或視頻?;旌闲螤詈皖伾梢允敲匀撕陀腥さ?。動畫把這一切都變成了生活。
結論
一些網站設計趨勢應該至少在您的一個項目中嘗試,使用幾何形狀和動畫是其中之一。
這是一個通用性很強的選項,可以處理各種內容類型,并與其他美學原則很好地融合。另外,幾何形狀的使用似乎是一種趨勢。使用這個概念不會讓您的網站看起來過時。
想了解更多網站技術的內容,請訪問:網站技術