--- title: "動態設計十二法則是什麼？迪士尼動畫 12 原則逐條圖解，動效怎麼用一次看懂" slug: 12-principles-of-motion-design-guide url: https://rar.design/posts/12-principles-of-motion-design-guide published_at: 2026-10-08 modified_at: 2026-10-08 author: "設計師 Riven" category: "動態設計" tags: ["迪士尼動畫", "Motion Graphics", "緩動曲線", "介面動效", "動畫原則", "動畫十二法則", "動態設計"] access: public_access --- # 動態設計十二法則是什麼？迪士尼動畫 12 原則逐條圖解，動效怎麼用一次看懂 > 從擠壓與伸展到吸引力，十二張圖看懂「會動」跟「動得好看」差在哪 By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-10-08 MOTION DESIGN · 2026▲ 動態設計十二法則示範動畫的開場畫面。十二條法則各用一個小場景示範，下面的配圖都是其中的截圖QUICK ANSWER動態設計十二法則，源自迪士尼動畫師 Ollie Johnston 與 Frank Thomas 1981 年出版的《The Illusion of Life》，原本是手繪角色動畫的十二條原則，從擠壓與伸展、預備動作到吸引力。它們解釋了東西為什麼動得自然，所以動態設計和介面動效至今都照著用。CONTENTS01動畫十二法則是什麼？四十五年前寫給手繪動畫師的規則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 & Stretch02預備動作Anticipation03演出佈局Staging04連續動作與關鍵姿勢Straight Ahead & Pose to Pose05跟隨與重疊動作Follow Through & Overlapping Action06漸快與漸慢Slow In & Slow Out07弧形軌跡Arcs08附屬動作Secondary Action09時間控制Timing10誇張Exaggeration11立體造型Solid Drawing12吸引力AppealPRINCIPLE 01 · SQUASH & STRETCH01 擠壓與伸展：會變形，但體積不變▲ 球在下墜段沿著運動方向被拉長，落地瞬間壓扁，體積維持不變這條在說什麼物體受力時會變形，但體積要保持不變。球落地的瞬間被壓扁，高速下墜時被拉長，壓得越扁就要越寬。它讓觀眾看得出重量和軟硬：變形越大，東西越軟、越有彈性。動效上怎麼用按鈕按下時微微縮小、鬆開時回彈；通知氣泡彈出時先拉長再落定。介面上幅度要小，通常幾個百分點就夠，太大會像果凍。PRINCIPLE 02 · ANTICIPATION02 預備動作：往前衝之前，先往後蓄力▲ 方塊往右衝出去之前，先往左後方傾斜蓄力，左下角是先退後進的 back 緩動曲線這條在說什麼大動作之前，先往反方向做一個小動作。投球前手往後拉，起跳前先蹲下。這個準備讓觀眾預期接下來要發生的事，主要動作才不會顯得突然。動效上怎麼用元素飛出畫面前先往回縮一點；卡片翻面前先微微後傾。對應到緩動曲線，就是 back 這一類先退後進的曲線。預備的時間要短，介面上拖太久會讓人覺得反應慢。PRINCIPLE 03 · STAGING03 演出佈局：一次只讓觀眾看一件事▲ 灰白物件退到背景，只有黃色方塊保留顏色，並落在三分線的交點上這條在說什麼把最重要的事，擺在觀眾一定會看到的位置。用構圖、明暗、大小和動作的先後，確保每個瞬間只有一個焦點。動效上怎麼用同一時間只讓一個主要元素在動，其他元素靜止或降低對比。轉場時先讓舊內容退場，新內容再進來。畫面上同時有五樣東西在動，等於沒有重點。PRINCIPLE 04 · STRAIGHT AHEAD & POSE TO POSE04 連續動作與關鍵姿勢：兩種做動畫的方法▲ 左邊的線條逐格往下畫，右邊先定 K1、K2、K3 三個關鍵姿勢，再補上中間格這條在說什麼這一條講的是做法。連續動作從第一格一路往下畫，動作自由、常有意外的驚喜，但難控制比例和時間。關鍵姿勢先定幾個重要的姿勢再補中間格，結構清楚、容易修改。動效上怎麼用平常在時間軸上打關鍵影格，就是關鍵姿勢的做法。粒子、流體、物理模擬這類一格接一格算出來的效果，屬於連續動作。實務上兩種混用：先用關鍵影格定結構，再讓細節自由發展。PRINCIPLE 05 · FOLLOW THROUGH & OVERLAPPING ACTION05 跟隨與重疊動作：主體停了，其他部分還沒停▲ 藍色方塊已經停下，上方那串珠子和紅球還在繼續擺動這條在說什麼主體停下之後，附著在上面的部分會因為慣性再動一下，這是跟隨。各部位的動作時間彼此錯開，不會同時開始、同時結束，這是重疊。兩者加起來，動作才有鬆緊。動效上怎麼用一排卡片進場時，每張延遲幾十毫秒依序到位；視窗滑到定點時稍微超過再彈回來。只要把「同時停」改成「先後停」，畫面就會活起來。PRINCIPLE 06 · SLOW IN & SLOW OUT06 漸快與漸慢：起點和終點放慢，中段加速▲ 上方的球等速移動，下方的球漸快漸慢。刻度越密的地方，球走得越慢這條在說什麼真實的物體啟動要加速，停下要減速。動作在起點和終點附近的格數多、中段的格數少，看起來才有重量。等速移動最不自然。動效上怎麼用這就是緩動曲線。元素進場用漸慢（ease-out），離場用漸快（ease-in），在畫面內移動用兩頭都慢的曲線（ease-in-out）。等速留給旋轉的讀取圖示、進度條這類本來就該等速的東西。PRINCIPLE 07 · ARCS07 弧形軌跡：自然的動作走弧線▲ 單擺沿弧線擺動。紅色虛線是同樣起點和終點的直線路徑，看起來像機械這條在說什麼生物的關節繞著軸轉，被拋出去的東西受重力影響，所以自然的動作大多沿著弧線。走直線的東西，看起來像機械。動效上怎麼用元素從一處移到另一處時，讓路徑帶一點弧度，例如加入購物車的商品沿拋物線飛向圖示。短距離的介面位移走直線就好，弧線留給距離長、想強調的動作。PRINCIPLE 08 · SECONDARY ACTION08 附屬動作：幫主要動作加分的小動作▲ 方塊跳躍是主要動作，套在身上轉圈的黃色圓環是附屬動作這條在說什麼在主要動作之外，加上一個輔助的小動作，讓角色更有生命。走路時擺動的手、說話時的眨眼都是。條件是它不能搶走主要動作的焦點。動效上怎麼用按讚時愛心放大是主要動作，旁邊散開的小光點是附屬動作。完成任務時打勾是主要動作，背景輕輕閃一下是附屬動作。拿掉附屬動作，主要動作還要能單獨成立。PRINCIPLE 09 · TIMING09 時間控制：格數決定重量感▲ 三顆球落下同樣的距離，分別用 6 格、12 格、24 格，重量感完全不同這條在說什麼同樣的距離，用的格數不同，重量感就不同。格數少，動作快，東西看起來輕；格數多，動作慢，東西看起來重。時間也決定情緒：同一個轉頭，快是驚訝，慢是遲疑。動效上怎麼用對應的是動效的時長。Nielsen Norman Group 的建議是，多數介面動畫落在 100 到 500 毫秒之間，移動距離越遠可以越長。拖得太久，使用者會覺得被動畫擋住。PRINCIPLE 10 · EXAGGERATION10 誇張：推得比現實更遠，才讀得清楚▲ 左邊照現實落地，右邊把同一個動作放大三倍：壓得更深、跳得更高、回彈更久這條在說什麼完全照現實做，動畫會顯得僵硬。把動作、表情、變形推得比現實更遠一點，觀眾才能在短短幾格裡讀懂發生了什麼事。誇張是為了讓動作更清楚。動效上怎麼用回彈的幅度、縮放的比例、快慢的對比都可以誇張。程度看品牌性格：兒童產品和遊戲可以放大很多，金融和醫療產品只要比現實多一點點。PRINCIPLE 11 · SOLID DRAWING11 立體造型：把形體當成有體積的東西▲ 轉台上的方塊、圓柱和球，疊上透視線與結構線，轉到任何角度形體都成立這條在說什麼把角色當成有體積、有重量、站在空間裡的立體物，注意透視、結構和平衡。這樣角色轉到任何角度，形體都不會垮掉。動效上怎麼用就算是平面圖形，也要有一致的光源、陰影和透視。卡片翻轉時厚度和陰影要跟著變；物件前後移動時，大小和速度要符合透視。忽略這一條，畫面會有紙片感。PRINCIPLE 12 · APPEAL12 吸引力：讓人想一直看下去▲ 示範動畫最後一段的藍色機器貓：圓潤的造型、清楚的表情，眨眼時胸口的螢幕會跳出愛心這條在說什麼吸引力指的是角色好看、好懂，有讓人想繼續看的魅力。它不限於可愛的角色，反派也需要吸引力。清楚的造型、簡單的輪廓和明確的表情，是最可靠的做法。動效上怎麼用對動態設計來說，吸引力是整體的性格：節奏一致，形狀要圓潤還是銳利有明確的選擇，每個動作都看得懂用意。前面十一條做對了，吸引力多半會自己出現。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 秒完整版十二法則的維基百科條目十二條原則的原始說明與出處（英文）《The Illusion of Life》的維基百科條目原書的出版背景與評價（英文）NN/g：介面動畫的時長建議100 到 500 毫秒這個範圍的原文（英文）GSAP 緩動曲線文件各種緩動曲線的說明（英文）MDN：prefers-reduced-motion偵測使用者是否要求減少動態的 CSS 寫法（英文）COURSEClaude 能幫你做的 100 件事這篇的示範動畫，就是請 Claude 做的。100 個工作與生活場景，帶你一件一件交給它。了解課程 →SUBSCRIPTIONAI 覺醒設計應用攻略AI 工具每週都在更新，我幫你過濾雜訊，只留對設計師真正有用的應用。了解訂閱 →常見問題Q：動畫十二法則是誰提出的？A：迪士尼動畫師 Ollie Johnston 與 Frank Thomas，在 1981 年出版的《The Illusion of Life: Disney Animation》裡提出。內容來自迪士尼動畫師從 1930 年代開始累積的做法。Q：動態設計一定要十二條都用上嗎？A：不用。十二條是一份檢查清單，多數介面動效只會用到時間控制、漸快與漸慢、預備動作、跟隨與重疊動作這幾條。先把這幾條做好，再看風格決定要不要加上誇張或附屬動作。Q：十二法則跟緩動曲線（easing）是什麼關係？A：緩動曲線是「漸快與漸慢」的實作方式：ease-in 是漸快，ease-out 是漸慢。帶回彈的 back 或 elastic 曲線，則同時用到了預備動作和跟隨動作。Q：介面動效的時間抓多長比較好？A：Nielsen Norman Group 建議多數動畫落在 100 到 500 毫秒之間，移動距離越遠可以越長。使用者重複頻率高的操作，時間要更短。Q：沒學過動畫的設計師，要從哪一條開始練？A：從時間控制和漸快與漸慢開始，題目用彈跳球。先只調時間，再加緩動曲線，最後加擠壓與伸展，三個版本對照著看最有感。Q：用 AI 做動畫，還需要懂十二法則嗎？A：需要。AI 可以把動畫做出來，但要它改哪裡、怎麼改，得靠你說得出「這裡少了預備動作」「落地沒有擠壓」。十二法則就是下指令和修稿時用的語彙。