使用者介面中,有很大的一個部分的比例是屬於動畫效果呈現的部份,但是由於在討論的過程中,我們很難僅透過圖片或文字來解釋與描述動畫效果的呈現方式,因此這些細節常常最容易被忽略或是草草了事。

優秀的動畫效果在使用者介面設計中是不可缺少的,除了有趣、好看、增加介面的質感以外,更可以增添介面上的邏輯性。像是在電腦作業系統中,當使用者縮小程式視窗時,都會有一個該視窗縮小的動畫,使用者透過餘光便可以確認視窗被縮小到哪裡去了。

 

壓縮與伸展

Disney 動畫師透過長時間的經驗累積,整理出了 12 項的動畫最高指導原則。而其中第一條便是壓縮與伸展(Squash and Stretch) ,同時也是影響最深遠的一項動畫法則:「在物件的運動過程中,拉扯與碰撞等動作都會形成壓縮與伸展;而透過這個壓縮與伸展的特性,便可以表現出物體的質量特徵。」

關於 12 法則大家可以參考由 SVA 的畢業學生 Panop Koonwat 所示範的這段影片,其中第一項的彈跳球即是展示 squash and stretch;亦是每個動畫師都會練習的項目之一:

[youtube http://www.youtube.com/watch?v=_d_78KtNmCk]

iOS系統中的 Google+ App 中的 Refresh 動畫即利用了這個原則,雖然只是四條彩色色塊,卻讓人感覺像是橡皮筋般的彈性質感。iOS6 系統中Mail App 的Refresh 特效也同樣應用了一樣的原理,看起來就像是一顆充滿彈性的彈力球,為整個動畫增添了不少細節:

 

漸快與漸慢與時間控制

同樣是屬於 12 法則,漸快與漸慢(Slow-in and Slow-out)以及時間控制(Timing)都在描述形成動畫的最基本要素:時間與節奏。

我們在製作動畫時發現,當物體移動相同距離的狀態下,當我們給予越長時間的時候,動畫所表演的速度就越慢,也就是說時間的分配,決定了動畫的節奏感。

而物體在運動的時候並不一定要等速運動,在花費相同時間、移動相同距離的情況下,高速移動再慢慢靜止的物體(Slow-out),比起均速移動的物體要來得更活潑、更具生命力:

[youtube http://www.youtube.com/watch?v=6M5Y91izMWU]

這便是最基本的時間控制與掌握,而如何掌握動畫所需要的步調與節奏、並透過這些技巧,賦予物件實際的動畫效果,則是製作動畫時最重要的一個部分。

同樣的一個方塊掉落的效果,可以是如布丁般地柔軟有彈性:

[youtube http://www.youtube.com/watch?v=imrHhrYVgaA]

也可以堅硬地像個木箱:

[youtube http://www.youtube.com/watch?v=zHaCQThDhhQ]

雖然動畫效果可以讓你的介面看起來既酷又炫,但是在製作時還是得小心別做過頭了。太過冗長、浪費使用者時間的動態效果一點也不受歡迎。

製作時不訪注意以下幾點:

  • 別浪費使用者的時間:如果可以用 0.2 秒的動畫達到你的效果,哪就別花 0.5 秒去表演它,如果因而沒達成你預期的效果,試著考慮移除它。
  • 如果是介面中必須頻繁使用的功能,在大多數的情況下,並不適合做動畫效果:舉例來說,今天如果是一個相簿瀏覽程式,如果瀏覽每張照片時都來個放大滑入、縮小滑出的動畫,那可真是讓人吃不消!
  • 如果你真的覺得這個效果很酷!我一定要放!那麼試著不要每一次都執行那個動畫效果。
  • 動畫要符合產品所想呈現的味道:就像任何一個設計元素一樣,動畫效果也具有它們不同的調性,你不會在柔軟的介面情境中放入超酷炫的滑入效果,即使你覺得效果很酷,但是不適合你的產品就不該擺放進去。
  • 永遠記得站在使用者的立場來思考

 

Desiring Clicks 是一個專門介紹使用者介面、使用者經驗、視覺設計、資訊架構和網路行為的網誌。歡迎你一起參與介面設計,讓這個世界變得更美好。

 

延伸閱讀

淺談色彩學:同一色系中的變化

【資訊視覺化】資訊視覺化與工程的應用

像魔術師一樣的視覺盲點

 

 參考文獻

[1] http://en.wikipedia.org/wiki/12_basic_principles_of_animation

誠摯邀請你成為好朋友-->
        

About The Author

Fourdesire Blog http://blog.fourdesire.com 是一個專門介紹使用者介面、使用者經驗、視覺設計、資訊架構和網路行為的網誌。我們相信任何設計、工程都必須由人的角度出發,更貼近人性與心靈!

Related Posts

留下你的看法: