2015 動畫效果會是介面設計的趨勢嗎?

動畫效果對使用者而言,是帶來獨特體驗的重要手法之一。所以我們除了關心使用者體驗、視覺設計與功能之外,也要開始注重它。2015 年的動畫效果主要有兩大趨勢,其中之一是將有更多改善傳統介面與流程的動畫工具出現,另外就是瀏覽器或裝置上的效能提升。

2015 動畫效果會是介面設計的趨勢嗎? |

為何需要動畫效果?

雖然應用動畫在互動設計中已經不是新玩意,但今年開始動畫效果將會更大量的應用於網頁、系統或app上,並帶給我們更多創意的啟發。事實上,有意義的動態效果在介面設計中可扮演許多角色,例如協助引導、提示脈絡、互動性、趣味性與愉悅感。反之,過多的動畫或不協調的轉場效果可能會破壞或失去原本好的體驗。

好的動畫效果有甚麼要點呢?在於使用者是否可藉由真實世界的行為或現象聯結產品的操作行為,如:慣性、速率(speed)、彈性或速度(velocity)。

2015 動畫效果會是介面設計的趨勢嗎? |

 

優秀的作品常運用漸變等動態效果來傳達故事與功能。

 

動畫效果的導引原則

Google 提出的 material design guidelines 中提出這樣的觀點:開始思考動畫效果能扮演怎樣的角色,是一個改善體驗的起點。

感知物體的具體 (物理) 形式可幫助我們理解如何操作它。觀察物體的動作可以告知我們它是輕是重?是軟是硬?是大是小?

 

當我們在設計選單系統(menu system)或視覺元素時,這是一個需要關注的點。

物體進行移動時,應該考慮真實世界中的物理現象。

 

介面不應該讓人感覺明顯地機械性,要應用真實世界的運動法則,這樣有助於使用者認識數位環境並與之互動。

2015 動畫效果會是介面設計的趨勢嗎? |

 

漸變是最基本的動畫手法之一,但一個 app 要能討使用者歡心,其效果必須是協調、不突兀的。

 

例如:一個選單 icon 協調地變成箭頭播放鍵,就是一個讓使用者驚喜的好方式。這邊有幾個網站,應用不錯的動畫效果與手法,提供大家參考:

  1. Slavery Footprint
  2. Apple’s Mac-Pro
  3. Oakley’s MX Goggles

 

工具和技巧

儘管我們期待 2015 年有許多新工具的出現,但我們建議參考基礎的 Animator’s Survival Kit – 一個很棒的學習傳統動畫法則的資源。

2015 動畫效果會是介面設計的趨勢嗎? |

 

我們使用 AE(After Effects)去呈現 UI 的操作方式與動畫效果。它可以製作出逼真的效果,來協助團隊理解完成時會如何呈現,同時也幫助我們探索更多概念。另外,也有一些快速製作原型的工具,如:Invision,此工具涵蓋基本的過場效果與動作,協助實現於你的 UI 設計。

 

後記

如何透過動畫效果,讓使用者獲得更佳的操作體驗 這篇文張提出了判斷動畫效果好壞的原則:若取消動畫效果,使用者應該會感受到過程是不完整(美)的。若不會,則代表動畫效果就是多餘的。以下範例可解釋這原則。

 

1. 透過動畫效果傳達脈絡:

如果拿掉動畫,是不是會有人不知道要填電話號碼?

2015 動畫效果會是介面設計的趨勢嗎? |

資料來源:http://technews.tw

 

2. 搖頭, say No:

透過與真實世界的動作或現象做聯想,讓使用者更容易且深刻的瞭解網站所想傳達的訊息內容,如下圖透過左右擺動的動態效果來傳達使用者輸入錯誤的訊息,讓使用者馬上聯想到有人向他搖搖頭 say no,除了達到訊息的傳達以外還讓使用者印象深刻,感到良好的使用經驗!

2015 動畫效果會是介面設計的趨勢嗎? |

資料來源:http://technews.tw

 

3. 玩些小技巧:

等待總是漫長的,如何讓使用者有耐心的等待?加入一些動態效果有助於分散等待的注意力,讓等待的“感受”不是那麼的漫長,人們在等某件事時,時間過得非常慢。利用動畫效果讓使用者在等待的情況下,感覺上快一點。

2015 動畫效果會是介面設計的趨勢嗎? |

資料來源:http://technews.tw

 

4. 按鈕變化:

代表操作的狀態也改變,讓使用者可以很清楚地知道現在是什麼情況。

2015 動畫效果會是介面設計的趨勢嗎? |

資料來源:http://technews.tw

 

5. 如虎添翼的動畫:

雖然拿掉它對於功能上是沒有什麼差異的,但在使用者經驗上卻是大有差異。

這個動畫效果看起來很炫,讓使用者感到開發者追求完美並關注細節,情不自禁的會更加相信這家網站。

2015 動畫效果會是介面設計的趨勢嗎? |

資料來源:http://technews.tw

 

延伸閱讀:

本篇文章翻譯自 Will animation be the big UI trend of 2015? by Ranzie Anthony

 

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

訂閱設計大舌頭

隨時關注第一手 UX、UI、科技、設計新知

Facebook
LinkedIn
Telegram
Twitter