幾個融合細微動畫的優秀網頁設計欣賞

网页设计欣赏:AQUATILIS EXPEDITION

目前很多網頁設計已經運用新的HTML5視頻以及CSS3+JS來實現很棒的動畫效果,不過我們在使用動畫時也不能太弦,可以適當的並且有意義的去使用,這才不會分散網站訪客的注意力。

網頁設計中如何合理使用動畫效果呢?我們可以參考今天整理的20個融合細微動畫的優秀網頁設計作品,這些網頁使用了簡單並不復雜的動畫效果,在擁有好看界面同時用戶也不會被無關的動畫而分心。

AQUATILIS EXPEDITION

使用了HTML5視頻作為網頁背景,視頻內容為簡單的波浪動畫,網站整體為暗調風格,其中有個邊框背景
网页设计欣赏:AQUATILIS EXPEDITION
瀏覽網址:http://aquatilis.tv/

Little Forge

网页设计欣赏:Little Forge

瀏覽網址:http://littleforge.com/

 

BarCamp Omaha 2014

這網站的動畫僅僅是背景上的雲彩,但裡面的插畫相當好看,so… 網頁設計師還是要學習點繪畫功能更好。
网页设计欣赏:BarCamp Omaha 2014
瀏覽網址:http://barcampomaha.org/

Nerisson

网页设计欣赏:Nerisson

瀏覽網址:http://www.nerisson.fr/

 

Blu Homes

网页设计欣赏:Blu Homes

瀏覽網址:http://www.bluhomes.com/

 

LETTERS, INC.

网页设计欣赏:LETTERS, INC.

瀏覽網址:http://letters-inc.jp/

 

INDUSTRY

网页设计欣赏:INDUSTRY

瀏覽網址:http://www.industrypdx.com/

 

Thermodo

网页设计欣赏:Thermodo

瀏覽網址:http://thermodo.com/

 

Bellroy

這個網站的產品處理很特別,都給它們加上雨水、雪、冰碎來增加真實感,也能體現產品“防水防雪防沙”功效?
网页设计欣赏:Bellroy
瀏覽網址:http://bellroy.com/pages/live-life-outside/

Siberia

雲霧動畫用得很好,能過banner文字來做出空間感。
网页设计欣赏:Siberia
瀏覽網址:http://siberia.io/

Carbure Digital Workshop

裡面的圖標可以用鼠標拖動
网页设计欣赏:Carbure Digital Workshop
瀏覽網址:http://carbure.co/

The Fernway

网页设计欣赏:The Fernway

瀏覽網址:http://thefernway.com/

 
總結

網站界面很好看是吧?但設計的背景設計師是花了多少心思我想就只有他們知道了。接下來的品牌網站建設,我建議同學們可以從這裡獲取些靈感,嘗試這些使用一些細微動畫美化網頁,增加氛圍喔!

 

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s