隨著蘋果、谷歌等國際大廠引領，國內公司愈發重視動效設計，團隊意識到其在產品用戶體驗中的關鍵性，更多設計師投身此領域。（文中案例含設計師個人作品與線上產品，均為筆者欣賞之作，如有冒犯請告知替換）

一、加強體驗舒適度——讓用戶更爽地用產品

1. 表現層級關係

展現層與層關係：抽屜、打開、平級切換等，讓用戶知曉界面前後關聯。這是最常見應用。

2. 結合手勢，更自然的動畫表現

用戶手勢操作時，界面動態走向順應手指運動，賦予用戶「自己控制界面」的感受，而非機械跳轉。

City guide app：手勢左右扔卡片

3. 愉快的提示功能

需提醒時吸引注意，又不生硬，符合預期自然出現。

Action button feedback 出錯提示

City Guides 啟動提示用戶可左右滑動卡片

4. 額外增加界面活力

用戶預期之外的驚喜：帥氣、賣萌、物理屬性，讓用戶感知產品生命力。

readme.io 萌萌輸入框

amazon Q彈菜單

tumblr 不喜歡我，心都碎了~

5. 吸引用戶持久注意力

屬於增加驚喜感，數據量大界面中添加動效，保持用戶注意力。

Bubbles 以動態形式展現數據點

二、減弱不可避免的不適感——彌補體驗下降的補丁

產品、交互、設計、工程再努力，總有無法避免的問題、Bug、外界條件導致體驗下降。適當動效可彌補這些不適。

1. 讓等待更愉快

常見於加載、刷新、發送界面，讓等待可視化、不再無聊。

Download Progress 讓下載不再枯燥

App loader 有趣的 loading 動畫

gear-powered 拉了還想拉的下拉刷新

2. 失敗界面的動效

刷新失敗、頁面錯誤、未聯網提示等。

download 就算失敗了還是感覺萌萌噠~

3. 增加界面銜接延續感

界面跳轉不可避免，但讓原本獨立的兩界面/事件擁有特定聯繫，更好玩，非生硬跳轉。

iOS Animation Download 界面跳轉保留部分元素到下一界面

Filter Menu 保留需要條目 移走不再用的

Elevate

三、不易被察覺的動效——細節成就極致

單獨列出此類，因不易被發現，普通用戶常忽略，但許多小細節讓交互更有趣。

1. 默默增加反饋感

為用戶操作提供有趣的正反饋。

Twitter 收藏點擊反饋

2. 去除用戶不再需要的元素

隨操作，部分內容不再被關注，可隱藏之。

CityHour Calendar Animated Interaction

Steller

上述例子特色鮮明，但實際優秀動效常同時滿足多點。總之動效為用戶體驗服務，動效設計師尤其要注意交互邏輯，才能作品不只帥氣更發揮實際作用。

最後提醒：千萬別犧牲用戶寶貴時間看毫無目的的動效。

文章總結個人思考，不足之處請指正~