移動互聯網時代來臨，App 如繁星數不清。手機硬體升級讓炫酷流暢動效不再是夢。App 達人會發現：越來越多 App 動效化。真正的「美」需內外兼修——外在美：生動有趣、好看流暢；內在美：非可有可無，具優化交互、提升體驗實質作用。

一、APP 動效的外在美：賦予生命力

1.1 模擬慣性

現實物體運動有慣性（公車急剎乘客前傾）。觀察下圖：圖像變化（放大、縮小、翻轉）末端皆「超出」一點再「反彈」回來，賦予動效活力，生動有趣。

1.2 模擬重力

重力同樣存在。一般 App 刪除卡片為橫向滑動消失，下例加入重力：卡片橫向滑動同時翻轉下墜，如現實傾倒垃圾。生動有趣同時便於理解操作含義。

1.3 均勻變速

優秀動效非勻速——勻速顯生硬死板如機器人。需對速度「設計」：觀察下圖，不同元素速度不同但遵循原則，核心是均勻變速，切記「急起」——初始速度為 0，勻加速開始，結束階段可急停。

1.4 碎片化運動

讓 App 個性十足的好方法：炫酷動效。碎片化運動常用手法：將界面圖像拆解為碎片，不同時序運動，利用時間間隔與變速製造效果。下圖不同元素有節奏呈現，利用時間差製造效果。

二、APP 動效的內在美：三大核心價值

2.1 引導

圖形介面抽象難懂，增強引導降低操作難度、提升體驗。

2.1.1 動態聚焦
動態化處理引導用戶聚焦關鍵部位。青蛙捕捉移動物體，人眼同樣關注運動物體。下圖螢幕上方數字非直接顯示，而是從 0 遞增至目標值，吸引目光聚焦。支付寶錢包同樣應用。

2.1.2 示意過渡
過渡動效給界面變化加流暢過渡，引導理解發生什麼，避免不知所措。下圖添加卡片過程生動模擬，輕易理解。若無滑動效果直接硬跳轉，體驗差多少？

2.1.3 空間轉場
轉場動效被設計師重視，引導用戶理解頁面跳轉、知曉所在。下圖漂亮轉場填補頁面間中間過程，體驗更流暢自然。

2.2 簡化

優秀設計即出色簡化。簡化資訊與交互層級降低難度、提升體驗。

2.2.1 隱藏二級操作項
動效隱藏部分資訊，操作後動態展開，簡化初始界面，簡潔大氣。

2.2.2 按鈕動效化
重要資訊動態浮現同一按鈕，目光鎖定按鈕，弱化頁面跳轉干擾，體驗更流暢。

2.3 增強回饋

軟體回饋對體驗至關重要，增強回饋起更好提示作用，過程更輕鬆愉悅。抖動是增強回饋之一：用動效替代靜態圖文提示，更自然引人注目。下圖蘋果 Pages 進入編輯態後對象持續抖動，引導作用極佳。

三、總結

動效化成移動互聯網產品新趨勢，設計有趣吸引人動效成新課題。不同產品適合不同動效，切記勿設計成華而不實的花架子，應視其為提升用戶體驗的新方法。