2026年10月8日 下午 5:41
動態設計MOTION DESIGN · 2026
QUICK ANSWER
動態設計十二法則，源自迪士尼動畫師 Ollie Johnston 與 Frank Thomas 1981 年出版的《The Illusion of Life》，原本是手繪角色動畫的十二條原則，從擠壓與伸展、預備動作到吸引力。它們解釋了東西為什麼動得自然，所以動態設計和介面動效至今都照著用。
CONTENTS
01
動畫十二法則是什麼？四十五年前寫給手繪動畫師的規則
02
動態設計為什麼也要懂？會動跟動得好看的差別
03
十二法則有哪些？逐條圖解
04
介面動效最常用哪幾條？
05
新手該從哪幾條開始練？
06
什麼時候該收手？
07
十二法則重點整理
滑社群的時候，偶爾會有一支動態作品讓人停下來重播。再滑到下一支，畫面一樣在動，卻一秒就滑走了。
兩支用的軟體可能一模一樣，差別多半出在迪士尼動畫師四十五年前寫下的十二條規則。我把這十二條做成一支 70 秒的示範動畫，每一條一個小場景：
▲ 動態設計十二法則示範動畫，十二條法則各用一個小場景示範
影片的畫面全部用程式碼繪製，程式是請 Claude 寫的，做法跟之前那篇純程式碼動畫怎麼做一樣。下面逐條拆開，每一條的配圖都是這支動畫的截圖，並說明放到動態設計和介面動效上該怎麼用。
CHAPTER 01 · WHAT IS IT
動畫十二法則，出自迪士尼動畫師 Ollie Johnston 與 Frank Thomas 在 1981 年出版的《The Illusion of Life: Disney Animation》。兩位作者都是迪士尼「九大元老」（Nine Old Men）的成員，書裡把迪士尼動畫師從 1930 年代累積下來的做法，整理成十二條原則。
這十二條的目的很單純：讓角色看起來遵守物理定律，再往上處理情緒的節奏和角色的魅力。這本書後來常被稱為「動畫聖經」，1999 年在 Animation World Network 的線上票選裡，被選為史上最佳的動畫書。
1981
《The Illusion of Life》出版
12 條
原則，順序沿用至今
1930s
迪士尼動畫師開始累積做法
這些原則原本談的是手繪角色。拿到動態設計上，主角從卡通人物換成按鈕、卡片、Logo 和文字，觀眾的眼睛判斷重量和意圖的方式卻沒有變，所以整套規則幾乎可以原封不動搬過來。
CHAPTER 02 · WHY LEARN IT
現在要讓東西動起來很容易。Figma Motion 拉兩個關鍵影格就有動效，Rive 能做可互動的動畫，連 AI 都能直接把動畫寫出來。門檻降下來之後，差別反而更明顯。
東西等速滑進來。
落地不會壓扁。
主體停了，尾巴也同一格停住。
每個元素同時到位，曲線全是預設值。
這些畫面都會動，看起來卻像投影片轉場。十二法則給的是一套判斷的語彙：哪裡該蓄力、哪裡該放慢、誰先停誰後停。會用工具的人很多，說得出哪裡不對的人比較少。
“
工具決定東西能不能動，法則決定它動得像不像活的。
CHAPTER 03 · THE TWELVE
順序照原書。每一條先講它在說什麼，再講動效上怎麼用。
THE TWELVE · 十二法則總覽
01
擠壓與伸展
Squash & Stretch
02
預備動作
Anticipation
03
演出佈局
Staging
04
連續動作與
關鍵姿勢
Straight Ahead & Pose to Pose
05
跟隨與
重疊動作
Follow Through & Overlapping Action
06
漸快與漸慢
Slow In & Slow Out
07
弧形軌跡
Arcs
08
附屬動作
Secondary Action
09
時間控制
Timing
10
誇張
Exaggeration
11
立體造型
Solid Drawing
12
吸引力
Appeal
PRINCIPLE 01 · SQUASH & STRETCH
這條在說什麼
物體受力時會變形，但體積要保持不變。球落地的瞬間被壓扁，高速下墜時被拉長，壓得越扁就要越寬。它讓觀眾看得出重量和軟硬：變形越大，東西越軟、越有彈性。
動效上怎麼用
按鈕按下時微微縮小、鬆開時回彈；通知氣泡彈出時先拉長再落定。介面上幅度要小，通常幾個百分點就夠，太大會像果凍。
PRINCIPLE 02 · ANTICIPATION
這條在說什麼
大動作之前，先往反方向做一個小動作。投球前手往後拉，起跳前先蹲下。這個準備讓觀眾預期接下來要發生的事，主要動作才不會顯得突然。
動效上怎麼用
元素飛出畫面前先往回縮一點；卡片翻面前先微微後傾。對應到緩動曲線，就是 back 這一類先退後進的曲線。預備的時間要短，介面上拖太久會讓人覺得反應慢。
PRINCIPLE 03 · STAGING
這條在說什麼
把最重要的事，擺在觀眾一定會看到的位置。用構圖、明暗、大小和動作的先後，確保每個瞬間只有一個焦點。
動效上怎麼用
同一時間只讓一個主要元素在動，其他元素靜止或降低對比。轉場時先讓舊內容退場，新內容再進來。畫面上同時有五樣東西在動，等於沒有重點。
PRINCIPLE 04 · STRAIGHT AHEAD & POSE TO POSE
這條在說什麼
這一條講的是做法。連續動作從第一格一路往下畫，動作自由、常有意外的驚喜，但難控制比例和時間。關鍵姿勢先定幾個重要的姿勢再補中間格，結構清楚、容易修改。
動效上怎麼用
平常在時間軸上打關鍵影格，就是關鍵姿勢的做法。粒子、流體、物理模擬這類一格接一格算出來的效果，屬於連續動作。實務上兩種混用：先用關鍵影格定結構，再讓細節自由發展。
PRINCIPLE 05 · FOLLOW THROUGH & OVERLAPPING ACTION
這條在說什麼
主體停下之後，附著在上面的部分會因為慣性再動一下，這是跟隨。各部位的動作時間彼此錯開，不會同時開始、同時結束，這是重疊。兩者加起來，動作才有鬆緊。
動效上怎麼用
一排卡片進場時，每張延遲幾十毫秒依序到位；視窗滑到定點時稍微超過再彈回來。只要把「同時停」改成「先後停」，畫面就會活起來。
PRINCIPLE 06 · SLOW IN & SLOW OUT
這條在說什麼
真實的物體啟動要加速，停下要減速。動作在起點和終點附近的格數多、中段的格數少，看起來才有重量。等速移動最不自然。
動效上怎麼用
這就是緩動曲線。元素進場用漸慢（ease-out），離場用漸快（ease-in），在畫面內移動用兩頭都慢的曲線（ease-in-out）。等速留給旋轉的讀取圖示、進度條這類本來就該等速的東西。
PRINCIPLE 07 · ARCS
這條在說什麼
生物的關節繞著軸轉，被拋出去的東西受重力影響，所以自然的動作大多沿著弧線。走直線的東西，看起來像機械。
動效上怎麼用
元素從一處移到另一處時，讓路徑帶一點弧度，例如加入購物車的商品沿拋物線飛向圖示。短距離的介面位移走直線就好，弧線留給距離長、想強調的動作。
PRINCIPLE 08 · SECONDARY ACTION
這條在說什麼
在主要動作之外，加上一個輔助的小動作，讓角色更有生命。走路時擺動的手、說話時的眨眼都是。條件是它不能搶走主要動作的焦點。
動效上怎麼用
按讚時愛心放大是主要動作，旁邊散開的小光點是附屬動作。完成任務時打勾是主要動作，背景輕輕閃一下是附屬動作。拿掉附屬動作，主要動作還要能單獨成立。
PRINCIPLE 09 · TIMING
這條在說什麼
同樣的距離，用的格數不同，重量感就不同。格數少，動作快，東西看起來輕；格數多，動作慢，東西看起來重。時間也決定情緒：同一個轉頭，快是驚訝，慢是遲疑。
動效上怎麼用
對應的是動效的時長。Nielsen Norman Group 的建議是，多數介面動畫落在 100 到 500 毫秒之間，移動距離越遠可以越長。拖得太久，使用者會覺得被動畫擋住。
PRINCIPLE 10 · EXAGGERATION
這條在說什麼
完全照現實做，動畫會顯得僵硬。把動作、表情、變形推得比現實更遠一點，觀眾才能在短短幾格裡讀懂發生了什麼事。誇張是為了讓動作更清楚。
動效上怎麼用
回彈的幅度、縮放的比例、快慢的對比都可以誇張。程度看品牌性格：兒童產品和遊戲可以放大很多，金融和醫療產品只要比現實多一點點。
PRINCIPLE 11 · SOLID DRAWING
這條在說什麼
把角色當成有體積、有重量、站在空間裡的立體物，注意透視、結構和平衡。這樣角色轉到任何角度，形體都不會垮掉。
動效上怎麼用
就算是平面圖形，也要有一致的光源、陰影和透視。卡片翻轉時厚度和陰影要跟著變；物件前後移動時，大小和速度要符合透視。忽略這一條，畫面會有紙片感。
PRINCIPLE 12 · APPEAL
這條在說什麼
吸引力指的是角色好看、好懂，有讓人想繼續看的魅力。它不限於可愛的角色，反派也需要吸引力。清楚的造型、簡單的輪廓和明確的表情，是最可靠的做法。
動效上怎麼用
對動態設計來說，吸引力是整體的性格：節奏一致，形狀要圓潤還是銳利有明確的選擇，每個動作都看得懂用意。前面十一條做對了，吸引力多半會自己出現。
CHAPTER 04 · IN PRACTICE
十二條不需要每次都用滿。做介面動效時，最常出場的是下面這六條，對應的做法也最固定：
IN PRACTICE · 介面動效最常用的六條
法則
常見做法
用在哪裡
時間控制
時長抓在 100 到 500 毫秒
所有動效
漸快與漸慢
進場用 ease-out，離場用 ease-in
位移、縮放、淡入淡出
預備動作
先往反方向動一點再出發
按鈕、彈出元素
跟隨與重疊動作
依序延遲進場，到位後輕微回彈
清單、卡片、選單
演出佈局
一次只讓一個主角在動
轉場、導覽
擠壓與伸展
按下縮小，鬆開回彈
按鈕、開關、圖示
剩下的弧形軌跡、附屬動作和誇張，比較常出現在品牌動態、插畫動畫和遊戲裡。立體造型和吸引力，則是所有動態的底層要求。
CHAPTER 05 · START HERE
十二條一次全上，很容易每一條都做一點、每一條都沒做好。我的建議是照下面的順序，一次只加一條：
PRACTICE ORDER · 先練這四條
1
時間控制
先決定每個動作要多長
2
漸快與漸慢
把所有等速的動作換成緩動曲線
3
跟隨與重疊動作
把同時停改成先後停
4
預備動作
在大動作之前加一個小小的反向動作
練習的題目用最經典的彈跳球就好：一顆球落地、彈三下、停住。第一版只處理時間，第二版加緩動，第三版加擠壓與伸展。三個版本放在一起看，每一條法則的效果會非常明顯。
想看角色動畫的版本，AlanBeckerTutorials 頻道的這支影片把十二條各用一小段示範過一遍，適合搭配這篇一起看：
▲ AlanBeckerTutorials〈12 Principles of Animation (Official Full Series)〉，用角色動畫示範同樣的十二條
CHAPTER 06 · LIMITS
法則的用途是讓動作更清楚。動效太多，介面反而變慢、變吵。有三種情況要克制。
使用者每天要重複很多次的操作，動效越短越好，有時候乾脆不要。第一次看覺得精緻的轉場，第一百次看只剩下等待。
功能型的產品裡，誇張和擠壓與伸展用一點點就夠。報稅、看診、轉帳的畫面，使用者要的是確定感。
有些人看到大幅度的動態會不舒服。網頁可以用 prefers-reduced-motion 偵測使用者是否在系統裡要求減少動態，並提供簡化的版本。
CHAPTER 07 · TAKEAWAYS
01
十二法則出自 1981 年的《The Illusion of Life》，作者是迪士尼動畫師 Ollie Johnston 與 Frank Thomas。
02
它處理的是動得自然這件事，所以從手繪動畫、動態設計到介面動效都通用。
03
介面動效最常用六條：時間控制、漸快與漸慢、預備動作、跟隨與重疊動作、演出佈局、擠壓與伸展。
04
新手先練時間控制和漸快與漸慢，題目用彈跳球。
05
動效是為了清楚。重複頻率高的操作和功能型產品，要克制。
這十二條寫下來的時候，動畫師手上拿的是鉛筆。後來鉛筆換成時間軸，時間軸又換成一句指令，規則一條都沒改。工具會繼續換，判斷動得好不好的那雙眼睛，還是要靠這十二條練出來。
RELATED READS · 延伸閱讀
純程式碼動畫怎麼做？用 Claude Code 拆解 12 種動態效果
這支示範動畫用的是同一套做法：把每一格畫面寫成時間的函數。
閱讀文章 →AI 動畫怎麼做？拆解 Claude Opus 5.5 首週爆紅的像素巫師、沙畫與 3D 城堡
四種常見做法、prompt 寫法，以及該用哪個工具。
閱讀文章 →Figma Motion 怎麼用？核心能力、製作流程與把動效做好看的實戰原則
把這十二條直接用在介面動效上的工具。
閱讀文章 →Rive 是什麼？Flash 收掉十五年，設計師終於等到能寫程式的動效工具
想把預備、跟隨這些細節做進可互動的元件，看這篇。
閱讀文章 →Seedance 2.5 能做 motion graphics 嗎？30 秒一鏡到底動畫的完整 prompt 與十一版修稿實錄
用影片生成模型做動態圖像，修稿時靠的也是這套語彙。
閱讀文章 →Framer 是什麼？2026 年設計師為什麼該認真考慮這個工具
把動效直接做進網站的設計工具。
閱讀文章 →EXTRA · LINKS
這篇配圖的來源，70 秒完整版
十二條原則的原始說明與出處（英文）
原書的出版背景與評價（英文）
100 到 500 毫秒這個範圍的原文（英文）
各種緩動曲線的說明（英文）
偵測使用者是否要求減少動態的 CSS 寫法（英文）
A：迪士尼動畫師 Ollie Johnston 與 Frank Thomas，在 1981 年出版的《The Illusion of Life: Disney Animation》裡提出。內容來自迪士尼動畫師從 1930 年代開始累積的做法。
A：不用。十二條是一份檢查清單，多數介面動效只會用到時間控制、漸快與漸慢、預備動作、跟隨與重疊動作這幾條。先把這幾條做好，再看風格決定要不要加上誇張或附屬動作。
A：緩動曲線是「漸快與漸慢」的實作方式：ease-in 是漸快，ease-out 是漸慢。帶回彈的 back 或 elastic 曲線，則同時用到了預備動作和跟隨動作。
A：Nielsen Norman Group 建議多數動畫落在 100 到 500 毫秒之間，移動距離越遠可以越長。使用者重複頻率高的操作，時間要更短。
A：從時間控制和漸快與漸慢開始，題目用彈跳球。先只調時間，再加緩動曲線，最後加擠壓與伸展，三個版本對照著看最有感。
A：需要。AI 可以把動畫做出來，但要它改哪裡、怎麼改，得靠你說得出「這裡少了預備動作」「落地沒有擠壓」。十二法則就是下指令和修稿時用的語彙。
