SPARKFUL

Blog

SPARKFUL 團隊心得與生活點滴

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

Decill Changuser-interface-design
name

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

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

壓縮與伸展

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),比起均速移動的物體要來得更活潑、更具生命力:

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

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

也可以堅硬地像個木箱:

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

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

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

參考文獻:

  1. http://en.wikipedia.org/wiki/12\_basic\_principles\_of\_animation
Decill Chang
Decill Chang
Principal Designer
A しばいぬ lover.
divider
相關文章
name

電影色彩學:這些經典電影如何運用「色彩」引導觀眾情緒

電影裡的弦外之音無論是電影、圖畫或任何形式的創作中,「色彩」都是非常基本且重要的元素。好的色彩運用可以讓人一眼看出創作者想表達的情緒。因此,如何恰當的運用色彩是一項相當重要的課題。平常在看電影的時候,除了關心劇情,也可以...閱讀更多
name

藏於字句間的創作:產品中的在地化翻譯

產品辛苦開發了,但要吸引其他語言使用者的使用,並不是那麼簡單的一件事。即使產品已經在某個國家(例如台灣)有了足夠的使用者數量,也不是翻譯成日文,就會憑空冒出許多日本的使用者。網路是連結的,但社群不是許多人...閱讀更多
name

為使用者撒下「麵包屑」

大家小時候應該都有看過或聽過《糖果屋》(收錄於格林童話)的故事吧?故事裡的小兄妹在森林裡面邊走邊撒下麵包屑,希望可以在迷路的時候沿著麵包屑回到家,結果麵包屑被森林裡的小動物吃掉,這對小兄妹也就在森林裡面...閱讀更多