
擠壓裝水氣球,形變展示彈性。物體運動變形反映剛性/彈性:書架椅子剛性強,衣服樹葉彈性好。移動體驗中,剛毅效果用剛性界面+精準動畫;喚起有機記憶用柔性界面+優雅動畫。
案例:Flipboard 剛毅切換;iBooks 複雜柔和翻頁模仿真實閱讀。



投擲保齡球前甩臂即預備動作。設計運動需考慮:預備、動作、結果。預備動作提供線索(棒球甩臂、彈簧反沖),暗示元素用法。App 打開動畫多為優秀預備動作案例。



右圖狀態釋義性強,清楚表現對話狀態;左圖失敗。移動端狀態原則涉及屏幕切換與 UI 交互,通過顏色、亮度、元素、動畫引導注意力分配,創造流暢體驗、增強易用性。
案例:Keynote 讓用戶清晰理解正在處理的文件。


連貫:逐幀繪製捕捉快速特殊動作。
關鍵幀:繪製關鍵點 + 補間,簡單、適合簡單動作。移動端多用關鍵幀;複雜動作(如遊戲)需連貫技術。
案例:《水果忍者》iPad 版用逐幀渲染;《植物大戰僵屍》iPad 版用關鍵幀。



小狗搖頭,耳朵下巴擺動速度不一致 = 順勢與疊加。動作非突發突停,各部位速度不同、停止時間不同。UI 元素協同形成整體疊加動畫,幫助用戶理解操作。
案例:WP 色塊圖標以不同速度重疊運動。


汽車、短跑選手皆需加減速。動畫首尾增加幀數創造真實效果。移動端滾動列表等微妙動畫運用緩進緩出,體驗更真實。
案例:滾動列表收尾增加幀數,符合真實規律。


物體運動非隨機,有可預知路徑。機械物體(火車、車)傾向直線;有機物體(動植物、人)傾向曲線。移動端設計需決定元素遵循哪種規律。
案例:iOS 魚/水曲線運動;Android 界面元素直線軌跡,營造科技感。



松鼠跑跳:身體腳是主動作,尾巴次動作支持增強真實感。iOS 郵箱點擊鏈接:瀏覽器出現是主動作,郵箱退後變背景是次動作,增強體驗不喧賓奪主。
案例:兩應用切換動畫運用次動作原則。


奔跑速度不同能表現角色體重、身高、動作幅度與情緒。動畫速度太慢/太快均引人反感,速度設計至關重要……