介面動畫的微小細節：壓縮與伸展效果

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

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

壓縮與伸展

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

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

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

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

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

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

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

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

也可以堅硬地像個木箱：

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

製作時不妨注意以下幾點：

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

參考文獻：