動畫效果對使用者而言,是帶來獨特體驗的重要手法之一。所以我們除了關心使用者體驗、視覺設計與功能之外,也要開始注重它。2015 年的動畫效果主要有兩大趨勢,其中之一是將有更多改善傳統介面與流程的動畫工具出現,另外就是瀏覽器或裝置上的效能提升。
為何需要動畫效果?
雖然應用動畫在互動設計中已經不是新玩意,但今年開始動畫效果將會更大量的應用於網頁、系統或app上,並帶給我們更多創意的啟發。事實上,有意義的動態效果在介面設計中可扮演許多角色,例如協助引導、提示脈絡、互動性、趣味性與愉悅感。反之,過多的動畫或不協調的轉場效果可能會破壞或失去原本好的體驗。
好的動畫效果有甚麼要點呢?在於使用者是否可藉由真實世界的行為或現象聯結產品的操作行為,如:慣性、速率(speed)、彈性或速度(velocity)。
優秀的作品常運用漸變等動態效果來傳達故事與功能。
動畫效果的導引原則
Google 提出的 material design guidelines 中提出這樣的觀點:開始思考動畫效果能扮演怎樣的角色,是一個改善體驗的起點。
感知物體的具體 (物理) 形式可幫助我們理解如何操作它。觀察物體的動作可以告知我們它是輕是重?是軟是硬?是大是小?
當我們在設計選單系統(menu system)或視覺元素時,這是一個需要關注的點。
物體進行移動時,應該考慮真實世界中的物理現象。
介面不應該讓人感覺明顯地機械性,要應用真實世界的運動法則,這樣有助於使用者認識數位環境並與之互動。
漸變是最基本的動畫手法之一,但一個 app 要能討使用者歡心,其效果必須是協調、不突兀的。
例如:一個選單 icon 協調地變成箭頭播放鍵,就是一個讓使用者驚喜的好方式。這邊有幾個網站,應用不錯的動畫效果與手法,提供大家參考:
- Slavery Footprint
- Apple’s Mac-Pro
- Oakley’s MX Goggles
工具和技巧
儘管我們期待 2015 年有許多新工具的出現,但我們建議參考基礎的 Animator’s Survival Kit – 一個很棒的學習傳統動畫法則的資源。
我們使用 AE(After Effects)去呈現 UI 的操作方式與動畫效果。它可以製作出逼真的效果,來協助團隊理解完成時會如何呈現,同時也幫助我們探索更多概念。另外,也有一些快速製作原型的工具,如:Invision,此工具涵蓋基本的過場效果與動作,協助實現於你的 UI 設計。
後記
如何透過動畫效果,讓使用者獲得更佳的操作體驗 這篇文張提出了判斷動畫效果好壞的原則:若取消動畫效果,使用者應該會感受到過程是不完整(美)的。若不會,則代表動畫效果就是多餘的。以下範例可解釋這原則。
1. 透過動畫效果傳達脈絡:
如果拿掉動畫,是不是會有人不知道要填電話號碼?
資料來源:http://technews.tw
2. 搖頭, say No:
透過與真實世界的動作或現象做聯想,讓使用者更容易且深刻的瞭解網站所想傳達的訊息內容,如下圖透過左右擺動的動態效果來傳達使用者輸入錯誤的訊息,讓使用者馬上聯想到有人向他搖搖頭 say no,除了達到訊息的傳達以外還讓使用者印象深刻,感到良好的使用經驗!
資料來源:http://technews.tw
3. 玩些小技巧:
等待總是漫長的,如何讓使用者有耐心的等待?加入一些動態效果有助於分散等待的注意力,讓等待的“感受”不是那麼的漫長,人們在等某件事時,時間過得非常慢。利用動畫效果讓使用者在等待的情況下,感覺上快一點。
資料來源:http://technews.tw
4. 按鈕變化:
代表操作的狀態也改變,讓使用者可以很清楚地知道現在是什麼情況。
資料來源:http://technews.tw
5. 如虎添翼的動畫:
雖然拿掉它對於功能上是沒有什麼差異的,但在使用者經驗上卻是大有差異。
這個動畫效果看起來很炫,讓使用者感到開發者追求完美並關注細節,情不自禁的會更加相信這家網站。
資料來源:http://technews.tw
延伸閱讀:
- Google Material Design 正體中文版
- UI Animations
- The Highlight 2014 — UI Animations
- Dribbble – Mobile Animations & Interactions
- 動效設計 – 學 ui 網
- 軟件攻略寶典之 Origami
- 移動用戶體驗設計新要素
本篇文章翻譯自 Will animation be the big UI trend of 2015? by Ranzie Anthony
本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知。