萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 軟體知識 >  >> 影像處理 >> 平面設計理論

移動端動畫設計 12 大原則(上):從擠壓變形到速度控制

1. 擠壓變形:傳達材質剛柔

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

2. 預備動作:為即將發生的事預告

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

3. 狀態:清晰表達動畫核心思想

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

4. 連貫與關鍵幀:兩種動畫製作路徑

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

5. 順勢與疊加:細微差異成就真實感

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

6. 緩慢出現與結束:符合客觀加減速規律

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

7. 運動路徑:機械直線 vs 有機曲線

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

8. 次動作:增強主動作不喧賓奪主

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

9. 速度:表達體重、身高、情緒

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

copyright © 萬盛學電腦網 all rights reserved