微互動動畫設計與概念
在我們會繪製基本UI介面後，可以透過增加動畫來為我們的作品增添豐富度，這些動態細節就像調味料，能夠讓整體使用體驗更完善、突出產品特色、並讓使用者感到愉悅，之前介紹的視差滾動也是常見的網頁互動動態之一。本文著重於微互動動畫的部分，它們是很簡單的動畫，可能不容易被感知到，卻在介面設計中扮演著重要的角色。
微互動動畫是什麼？
微互動動畫常被用以給予使用者適當的回饋，因為使用者需要知道現在的行為將造成什麼結果。不知道大家有沒有相同的經驗，在按下按鈕時、開啟某功能時、刪除東西時，系統沒有給予即時的反饋，所以我們多按了好幾次，以確認系統有收到我們的指令。微互動動畫除了能產生反饋、讓使用感受愉悅、吸引注意力，另一方面，我們也可以透過微互動動畫，指引初次使用的使用者，避免錯誤發生。
介面動畫可以分為三個面向，但一項設計是可以包含多種面向的。
功能
像是按鈕的hover & click states，或是drag時的動態，適時的添加可以提升體驗感受。
結構
像是物件變大以展示細節、dropdown、tooltips、視差滾動。
情感
常使用角色或是插畫，為使用者帶來樂趣。
如何設計微互動動畫？
設計微互動動畫時，我們需要站在使用者的角度思考，這些動畫是輕鬆點綴，同時具備功能性與美感，不宜打斷使用體驗，微互動動畫的發生應是非常自然的，這需要所有物件的動態變化搭配得宜。
介面動畫包含了四個設計項目：
觸發
使用者會透過什麼方式觸動動畫。常見的形式有click、swipe、drag、hover、scroll等。
回饋
接收到觸發後，介面會產生什麼樣的變化。像是翻轉、位移、顏色、透明度、大小變化、序列，這些都能幫助使用者明白自己目前做了什麼樣的動作，確保體驗流暢。
歷時
整個動畫需花費多少時間完成。若是用在微互動設計上，顯然只需要較短的時間，太長的動態反而會影響體驗，相反地，若要使用在較大面積、較具視覺衝擊的部分，則可以拉長動態時間。
速度變化
動畫期間的速度是否維持一致。舉例來說，球從高處落下再反彈的過程中，每秒的位移量是不同的，若是毫無速度緩和或加速的運動情況，則稱為線性，使用easing能夠幫助我們模擬物體運動的實際情形。
不知道大家在剛接觸速度變化這一塊時，是否也對ease in、ease out等名詞感到陌生，Figma製作了一系列的圖解釋了各項詞彙。簡單來說，ease in就是加速，ease out則是減速，另外還有一種是elastic（spring），看起來有趣，但是切記太複雜的動態不要過度使用，同時需要控制彈跳幅度以免反而干擾體驗。
製作工具
動畫
- After Effects
- Keynote
- Animate
原型
- Figma
- Xd
- Sketch
- Principle
- Flinto
- Framer
- Origami
- Protopie
- Kite
- Studio
開發
- After Effects + plugins
- Google’s Motion Library
- CSS and Animation Libraries
- Swift for iOS
- Javascript
- WebFlow
微互動動畫實際應用例子
Progress
Counting
Swipe& Parallax
3D Animation
Feedback Reaction
Onboarding
Wrong Message
這個項目明明沒有任何錯誤訊息的文字提示，我們卻能從點點的動態跟顏色明白意思，左右晃動的點點就像人在搖頭一樣。
參考資料
UI Animation, Motion Design, Micro Interaction Basics
Practical Tips for Great UI Animation | Pablo Stanley | Design Lead InVision Studio Platform
