UI設計知識點：如何結合動畫的十二基本法則指導UI動效設計

1981年，迪士尼動畫師Ollie Johnston與Frank Thomas在《The Illusion of Life：Disney Animation》一書中提及到「動畫的十二項基本法則」，至今仍深受眾多動畫師遵從與採用。

雖然「動畫的十二項基本法則」是基於二維動畫所衍生出來的原則，卻非常適合應用絕大多數的動畫製作中，包括UI設計動效。下面，小編將簡單說說，如何結合動畫的十二基本法則指導UI動效設計，希望對各位有幫助!

UI設計知識點一：什麼是動效?

眾所周知，動效設計是指基於一定的靜態基本視覺元素，通過動畫軟件將其設計成一種在特定時間內，會發生運動和變化的圖形結果。動效種類繁多，而且應用範圍非常廣泛，包括影視特效、動畫CG、視頻廣告、UI動畫等圖形圖像的藝術設計。

而在UI設計中，動效大多是指UI動畫設計(即UI動效)。動效在UI設計中同樣獲得較為廣泛的應用，比如交互轉場與過度、視覺核心與情感化動畫展示、場景與功能引導、加載與操作反饋等場景都能看到它的身影。

UI設計知識點二：動效常用於哪些UI設計場景?

● 交互場景與過度

UI設計知識點：如何結合動畫的十二基本法則指導UI動效設計
UI設計知識點
轉場過渡類的UI動效常用於頁面間的跳轉、頁面層級的變化，以及使用場景的切換等，它能幫助用戶更清晰地了解頁面間的轉換關係和變化路徑，並使產品能還原現實世界的使用習慣，減輕用戶的認知成本。

● 視覺核心與情感化動畫展示

UI設計知識點：如何結合動畫的十二基本法則指導UI動效設計
UI設計知識點
視覺展示類的UI動效主要運用於KV頭圖、缺省頁、引導頁、開屏動畫以及註冊登陸頁等場景中，它能在第一時間吸引用戶的視覺，更好地突出產品的核心功能和特定，引導用戶的視覺流向，幫助他們更好地理解產品。

● 場景與功能引導

UI設計知識點：如何結合動畫的十二基本法則指導UI動效設計
UI設計知識點
場景與功能引導類的UI動效，是通過頁面中某些元素或模塊的變化，拉開與不同層級之間的時差，降低其他元素或模塊對主要元素的干擾，從而引導用戶進行下一步操作，較常用於如呼吸動效按鈕、新功能引導浮層、懸浮球等場景。

● 加載與操作反饋

UI設計知識點：如何結合動畫的十二基本法則指導UI動效設計
UI設計知識點
加載與操作反饋的UI動效都屬於反饋動效，區別在於：加載動效是用於網絡、數據讀取/緩存等原因，導致頁面元素無法及時作出反應，因而需要加載動效作為過渡;操作反饋動效則是一種即時性的反饋變化，透過動效呈現出符合用戶心理預期的內容。

UI設計知識點三：如何結合動畫的十二基本法則指導UI動效設計

通過以上內容，我們大致清楚UI動效究竟是什麼，以及常用於哪些場景。最後，小編將回歸本文的核心，和大家說說「如何結合動畫的十二基本法則指導UI動效設計」。

◆ 擠壓與拉伸

擠壓與拉伸(Squash and Stretch)是指物體受到力的擠壓，產生拉長或壓扁的形變效果。若加上誇張的表現方式，會讓物體看起更富有彈性和真實感。

UI設計知識點：如何結合動畫的十二基本法則指導UI動效設計
UI設計知識點
* 做拖曳、放大/縮小、下落、彈出等動效時，對於會產生形變的元素，應根據使用場景適當加入擠壓與拉伸效果，使整體更加生動。

◆ 預備動作

預備動作(Anticipation)是指在做某個動作之前會加入一個反向動作，加強正向動作的張力同時，還可預示正要發生的這個動作，給用戶一定的心理預期。

UI設計知識點：如何結合動畫的十二基本法則指導UI動效設計
UI設計知識點
◆ 呈像階段性

呈像階段性是指在同一時間階段或場景中，動畫的畫面構圖、先後次序、位置信息，以及表意內容等都需要有明確的安排，同時去除多餘的干擾元素，使表達的主體更加突出可見。

UI設計知識點：如何結合動畫的十二基本法則指導UI動效設計
UI設計知識點
* 安排主體元素的動畫時，需合理安排，避免出現動畫紊亂的情況。

◆ 連貫法與關鍵法

連貫法(Straight-ahead)即逐幀動畫法，是指一幀一幀去描繪元素的變化，最終結合起來形成動畫，多運用於火焰、閃電、爆炸、灰塵等不規則元素的變化，但因為變化無規則可言，因而較難通過固定幀讓軟件進行補幀，需要手動去完成中間幀的補充。

關鍵法( Pose-to-pose)，則是指將元素動畫的變化拆解成一些重要的定格動作並描繪出這些關鍵動作點的幀，然後再由軟件或手動補充中間的幀，常用於做規律性動畫。由於關鍵幀動畫法能幫助我們確定元素的其實變化，因此過程中若需要插入某種變化，只需在關鍵變化處用軟件自動進行補幀即可。

UI設計知識點：如何結合動畫的十二基本法則指導UI動效設計
UI設計知識點
◆ 慣性跟隨和重疊

慣性跟隨和重疊(Follow-through and Overlapping Action)是指元素的運動會受到慣性而產生慣性跟隨。在UI設計中，跟隨回彈(即彈性動畫)是較為常見的慣性跟隨和重疊效果，即在某個元素跟隨某個指令運動後，在停止時會給予一定的回彈效果，使元素運動更符合物理邏輯，也讓動畫呈現更加生動自然。

UI設計知識點：如何結合動畫的十二基本法則指導UI動效設計
UI設計知識點
◆ 緩入與緩出

緩入與緩出(Slow-in and Slow-out)指，動作在開始與結束時，速度會比較慢，而中間過程的速度會較快些。這是因為受空氣阻力、摩擦力等因素存在，大部分元素都不會產生勻速運動現象，而是靜止的物體開始移動時由慢而快;將要停止的物體則會由快變慢。若動效以勻速方式開始或結束，則會跟人一種唐突而不自然的感受。

UI設計知識點：如何結合動畫的十二基本法則指導UI動效設計
UI設計知識點
緩入與緩出是非常重要的動畫屬性，是決定動畫自然的關鍵所在。製作緩入與緩出動效時，可通過調節貝塞爾曲線達到想要的效果。

◆ 弧形運動軌跡

弧形運動軌跡(Arcs)是指在生物運動過程中，幾乎不會有直來直去的情況，這種運動軌跡只會出現在機械上，但凡所有會動的生物，其組成任何部位的運動軌跡皆為平滑的弧形曲線。

UI設計知識點：如何結合動畫的十二基本法則指導UI動效設計
UI設計知識點
雖然UI元素的運動，嚴格上說並不屬於生物運動，但為了使UI的運動變得更加自然，我們有需要遵循這一生物運動規律。

◆ 附屬運動

附屬運動(Secondary Action)是指依附在主要運動之下的細微動作，用於強化主要動作，為主要動作帶來畫龍點睛的效果，以及給動畫帶來生機感。

UI設計知識點：如何結合動畫的十二基本法則指導UI動效設計
UI設計知識點
製作主要元素的動畫是，可以時刻考慮在不影響主要元素動畫的表意前提下，加入某些動畫以達到畫龍點睛的效果。

◆ 時間控制

時間控制(Timing)，也較節奏控制，指元素運動的時間與頻率。優秀的節奏控制，能讓動畫的持續時間，以用戶能注意到而不用等待的方式進行。

UI設計知識點：如何結合動畫的十二基本法則指導UI動效設計
UI設計知識點
UI動效的節奏也取決於時間的控制，過快或過慢的時間都會讓動作看起來不自然，而不同元素的變化節奏也不同，它會影響畫面給予用戶的反饋，以及動畫的自然。

◆ 誇張

誇張(Exaggeration)是指利用擠壓與伸展的效果誇大肢體動作，或利用加快或放慢動作加強角色的情緒及反應，

UI設計知識點：如何結合動畫的十二基本法則指導UI動效設計
UI設計知識點
在UI元素運動中，使用過於誇張的運動顯然是不合適，但我們可以在一些展示場景中(如加載動畫)運用，使動畫變得有趣味性，以及緩解加載時所帶來的焦慮感。

◆ 視覺科學

視覺科學(Solid drawing)是指在動畫中，為了使物體看起來更具有體積感、質量感和平衡感，更加註重物體的透視和呈現姿態，使其更生動立體。

UI設計知識點：如何結合動畫的十二基本法則指導UI動效設計
UI設計知識點
在UI設計中，視覺科學的運用相當廣泛，我們會運用投影、遮罩、透視等方式賦予元素視覺差的感受，比如當我們在移動同一層級某個元素時，會將其抬高至另一層級，之後才能在其他元素之上移動，否則會和其他元素發生碰撞推移。

◆ 吸引力

吸引力(Appeale)是指在動畫中，無論是角色設計，亦或是角色動畫呈現，都是人為所創作，因此可以更加靈動有趣，更能吸引人們的關注。

UI設計知識點：如何結合動畫的十二基本法則指導UI動效設計
UI設計知識點
同樣，在構思UI動效時，我們無需一開始就拘束於條條框框之內，而是放肆地發揮我們的想像力，隨後再根據法則一步一步落地使用，使動畫的創意更具吸引力。

動畫是一種感性大於理性的感受，因此UI設計動效時無需太過刻意地表現，除了遵循一定的法則外，更多可以依靠自身的想像力，創作更多更有趣的動畫。



香港網頁提供一站式數碼營商方案服務，包括、網頁設計、網絡推廣、網頁管理與寄存、系統開發及其它增值服務，全方位滿足客戶的業務需要，歡迎隨時聯絡我們，香港網頁是您開拓網路商機的最佳伙伴。

聯絡電話: 37499734
電郵地址: info@hkweb.com.hk
網址: www.hkweb.com.hk