如何透過 UI Animation 提昇用戶體驗
無論在 Dribbble 或是 Behance，總是充滿著許多令人驚豔的UI 動畫效果。但在欣賞完這些作品之後，更應該思考的是為什麼我們必須在互動設計中去考慮動效？它們應該在何時出現？以及，如何根據目的性去選擇合適的動效？
OK，或許你會覺得 Dribbble 上的 UI Animation 每個都超酷，也超美。但我們似乎很少在真實的 App 上看到它們被實現。技術門檻降低了這些 UI Animation 可行性也許是最大的一個原因；除此之外，設計師們在提出這些UI Animation 時，往往都缺乏了 context，也就是所謂的使用情境；更多時候，這些動畫效果的目的更偏向於一種自我實現、個人品牌建立，或者炫技的手段。
Why UI Animation?
在電影剪接中，有個最基本的手法 － Hard cut。所謂 Hard cut 顧名思義，就是硬剪！由 A 場景直接轉換至 B 場景，其中不使用任何效果（如淡出淡入）。Hard cut 的手法在每部電影中其實都相當常見，尤其是靜態鏡頭的切換，或是透過 Hard cut 來營造速度感與緊張感。
電影由於有較強的故事性與情境包覆，因此剪接師在採取 Hard cut 的手法進行敘事時，觀眾較不會感到混亂。然而，若這樣的手法被應用到了介面設計的狀態更新，使用者往往會因為跟不上腳步而感到困惑。在認知科學中，將這樣的現象稱之為 － change blindness。可以看看下方這部影片來體會一下，何謂 change blindness。
既然了解到由於 change blindness，我們無法在 App 的使用流程中透過「硬剪」的方式將兩個 UI 串接在一塊兒，我們勢必需要利用所謂的轉場動畫，來讓無論是介面狀態的更新，或是頁面的推進合理化。透過功能性的動畫效果來彌補使用者認知的落差。
How To Use UI Animation?
基於 UI Animation 的應用場景，大約能夠分成以下幾種形式：
- 導航（Navigation）
- 回饋（Feedback）
- 引導與暗示（Guide and Hint）
- 愉悅（Delight）
以下我會根據上述的分類進行說明，與範例 Demo。
導航（Navigation）
在現實世界，我們有所謂的路痴；相當然爾，在數位的世界裡也存在著許多經常在頁面之間迷了路，而無法順利抵達目的地的使用者。導航的功能就在於，時時刻刻去提醒使用者其當下的位置，從何而來，又將從何而去。iOS 原生的 Push View 與 Modal View 就是相當道地的導航式動效，利用頁面的滑入以及堆疊，削弱前後介面變化的生硬感，幫助使用者在認知中組織資訊架構，進而形成方向感和場景的連貫性。
回饋（Feedback）
回饋的目的在於傳達使用者當前系統的狀態資訊、減緩用戶焦慮。以一般情況而言，一個按鈕應該至少具備三種狀態：可觸發（Enable）、已觸發（Pressed），以及無法觸發（Disable）。當使用者點擊按鈕之後，該觸控元件應該透過變色、高光（Highlight）等方式，來告知使用者該元件已經被觸發，藉此避免二次點擊、錯誤操作的情況發生。另外，若使用者在執行操作後，系統無法立即回饋而必須等待時，也必須視情況加入加載動畫（Loading Animation）和進度條（Progress Bar）做為系統當前狀態的表達。就我而言，通常等候時間介於1 ~ 3秒的畫面我會採用 Loading Animation 作為回饋，多於三秒以上我會建議採用進度條的方式，並適時地加入一些有趣的動畫效果來減緩用戶焦慮。
引導與暗示（Guide and Hint）
關於引導與暗示的動畫效果，我想最經典的莫過於 iPhone 解鎖時的「slide to unlock」，利用由左而右的微光動效來引導使用者以滑動手勢來為裝置進行解鎖。這類的動畫效果主要是應用在當使用者進入到一個陌生的介面場景，或者設計師想提出一個全新的互動方式時，透過畫面控件簡單的位移或形態變化，引導使用者進行下一步操作，另外一個例子則是 Google 的 Primer。
在使用這類型的動畫效果時，必須優先考慮其精簡並且不會影響到使用者在頁面上的操作行為，或干擾了其他資訊在頁面上的呈現。
愉悅（Delight）
嚴格上來說，Delightful 不應該是設計師在思考動畫效果時，所要滿足的主要目標。設計師必須優先考慮導航、回饋、引導與暗示已經為使用者提供了足夠的互動輔助，使用者能夠順利的在各個頁面中操作、往返，而不會感到困惑與遭遇障礙，其次才是為這些 UI Animation 加上愉悅的性質。
Delightful 的動畫可能會有一些特性例如：卡通式的形象、現實世界的擬真化、戲劇化的效果等等。其目的在於減緩用戶在等待時的焦慮，並增加操作時的驚喜感；這類型的動畫效果往往會更加的 Emotional，藉此觸動使用者的心理層面。
Conclusion
能夠引導使用者、降低使用者認知負擔、帶給他們愉悅體驗的 UI Animation 才能夠顯現出其價值。今後，我們在使用任何的數位產品與服務同時，我們或許能夠以分析的角度去檢視這些介面上的動畫效果，並將其內化成為自己往後設計產品時的養分。
