動畫不再只能運用在卡通中了!到處都可見全螢幕的動態圖片,和小範圍的觸控動畫懸停特效。讓我們看看如何將動畫巧妙地運用在網頁設計中。

隨著大部分使用者的緊密連結和輕易就能製作出簡易的動態圖片,或是數分鐘的動畫,動畫儼然已變成實用且方便的網頁設計工具。

基本動畫

2

3

4

動畫是讓靜止或2D的圖片動起來,且隨著一定的定律運動。像是卡通人物在畫面中走路,或是在電腦桌面中,載入網頁時,應用程式的圖示像球一樣跳出來,這些都是動畫的應用。

迪士尼幾乎等同於動畫的代名詞。1980年代初期,迪士尼的兩位頂尖動畫師,詳細地寫了關於動畫的12項基本法則一書。Frank Thomas和Ollie Johnston在「Illusion of Life: Disney Animation」llusion of Life: Disney Animation」中,為今日的動畫做了大略架構。

  1. 擠壓與伸展

  2. 預期動作

  3. 演出方式

  4. 接續動作與關鍵動作

  5. 跟隨動作與重疊動作

  6. 漸快與漸慢

  7. 弧形

  8. 附屬動作

  9. 時間控制

  10. 誇張

  11. 純熟的手繪技巧

  12. 吸引力

網頁動畫通常以GIF, CSS, SVG, WebGL或影片存在。當你的滑鼠從一個字滑動到全螢幕的影片或背景影像時,動畫可以以簡單的底線呈現。當有其他設計技巧同時存在時,動畫可能很難發現,但也可能讓你很難忽略它。

5

2015年的動畫潮流

6

7

8

網頁設計的動畫在我們每天的生活中很常見。其中的設計流行關鍵就是溫和(Moderation)。簡單且迷你的動畫是最新熱潮,人們甚至不易發現那是動畫。大規模的動畫可以利用視覺效果,讓你融入設計中。但是如果使用太多特效,可能會造成視覺上的混亂。

大動畫VS.小動畫

9

 10

大動畫通常在螢幕上具有一定的大小。而小動畫則是只有佔據螢幕一小部分,而大部分都出現在網站的一開始畫面。

使用時機

11

12

13

 

動畫可以讓你的設計更加完美,但並不是每一個設計都適用。動畫的呈現應是流暢的,且不突兀。動畫應該是為了使用上的方便而存在,並不是為了存在而設計出來。

 

原文出處:An Introduction to Animation in Web Design

 

 

 

 

 

 

 

客戶推薦


最新文章

原創、翻譯及轉貼的資訊都在這裡。

作品
川本國際包裝有限公司

14 十一月 2022 - 78 Views

作品:澳洲-ATSPACE太空科技

08 十一月 2022 - 180 Views

作品:918建材庫-建材聯盟網站+APP

08 十一月 2022 - 93 Views

作品:鳳山體育足球學院

23 八月 2022 - 193 Views

桃園市政府地方稅務局-兒童網

03 七月 2022 - 4075 Views

國立台北大學招生形象網

20 五 2021 - 1629 Views

程式設計開發
響應式設計為什麼要錢?

08 三月 2019 - 3379 Views

網站製作方案比較表

18 一月 2017 - 3842 Views

軟體開發規格書的重要性

01 十一月 2016 - 12748 Views

階層式設計

21 十月 2016 - 6145 Views

Joomla!教學
joomla 4 安裝教學

06 八月 2022 - 283 Views

【SEO優化】舊語法更新刪除

13 十二月 2017 - 3462 Views

Joomla-Website Builder簡易操作教學

22 三月 2017 - 9071 Views

WORDPRESS
wordpress佈景主題安裝

26 八月 2022 - 193 Views

wordpress外掛安裝

24 七月 2022 - 277 Views

wordpress安裝教學

23 七月 2022 - 267 Views

網頁
【電商PM】-內容管理系統CMS

02 一月 2018 - 4612 Views

網頁動畫設計入門

27 三月 2017 - 9728 Views

行銷
LOUIS VUITTON 線上購物網站設計分析

12 十一月 2022 - 102 Views

SEO及PPC關鍵字行銷

20 七月 2017 - 4174 Views

把握消費力!節慶行銷必學4招大公開

22 十一月 2016 - 5335 Views

網站是實現夢想的工具! 開始準備建置您的網站了嗎? 加Line好友
 

我們重視設計質感與行銷價值

。網頁設計。程式設計。Joomla教學。

聯絡資訊


ring@des13.com

 @igodos 加line好友

因應疫情,我們實施居家辦公,辦公室及會議室不開放

04-23174836 /  0931-303767 

thedes13 

 
Our website is protected by DMC Firewall!