評價強變身超強視覺設計師！介面設計趨勢─動畫效果

錚／巨匠電腦課程評價好！

變身超強視覺設計師！介面設計趨勢─動畫效果　巨匠電腦課程評價好！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. 搖頭, say No：

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

3. 玩些小技巧：

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

4. 按鈕變化：

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

5. 如虎添翼的動畫：

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

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

巨匠電腦開設了視覺設計課程，教你響應式跨平台網頁設計、使用者介面設計等等，快來巨匠電腦輕鬆學！巨匠電腦課程評價好！

文章與圖片出處: http://goo.gl/Fe2OWJ