2026年11月8日 上午 11:54
動態設計UX MOTION · 2026
QUICK ANSWER
UX in Motion 十二條原則，出自介面動效設計師 Issara Willenskomer 2017 年的〈Creating Usability with Motion〉。它回答的是動效怎麼讓介面更好用：讓使用者預期得到、前後接得起來、看得懂先後順序和元素之間的關係。
CONTENTS
01
UX in Motion 是什麼？寫給介面的動效原則
02
動效讓介面好用的四種方式
03
十二條原則逐條圖解
04
做介面時，哪個情境用哪一條？
05
什麼時候該少一點？
06
十二條原則重點整理
同一個加入購物車的按鈕，可以有兩種做法。
左邊按下去，畫面幾乎沒動，只有右上角的數字從 2 變成 3。右邊按下去，飲料的縮圖飛進購物車，數字跟著跳了一下。兩邊的功能完全一樣，看右邊的時候，你不用想就知道剛剛發生了什麼事。
介面動效真正的工作，就是讓人看懂畫面的變化。上一篇動態設計十二法則聊的是迪士尼的動畫原則，這一篇換成專門寫給介面的十二條，用一個咖啡點餐 App 從頭到尾示範一次。
想先看動起來的樣子，完整的示範影片在這裡，十二條原則一條一條配著畫面講：
▲ 設計師 Riven〈UX in Motion：介面動效的 12 條原則〉，用咖啡點餐 App 逐條示範
CHAPTER 01 · WHAT IS IT
UX in Motion 十二條原則，出自介面動效設計師 Issara Willenskomer。他在 2017 年 3 月把〈Creating Usability with Motion: The UX in Motion Manifesto〉發表在 Medium，2022 年 UX Magazine 也轉載了全文。文章要回答的問題很直接：動效怎麼讓介面更好用。
迪士尼的十二法則是為了讓角色更生動、更有魅力，介面要解決的是另一件事。Issara 整理出的十二條裡，只有兩條跟迪士尼有淵源：緩動來自「漸快與漸慢」，錯開與延遲來自「跟隨與重疊動作」。其餘十條處理的都是介面才有的問題，例如遮罩、覆蓋、視差。
COMPARED · 兩套十二條差在哪
比較
迪士尼動畫十二法則
UX in Motion 十二條
出處
《The Illusion of Life》，1981
〈Creating Usability with Motion〉，2017
主角
卡通角色
按鈕、卡片、清單、頁面
目標
動作生動、有魅力
變化看得懂、介面好用
判斷標準
看起來像不像活的
使用者有沒有看懂發生了什麼
共通的條目
漸快與漸慢、跟隨與重疊動作
緩動、錯開與延遲
兩套可以一起用。迪士尼那套管的是動作好不好看，UX in Motion 管的是動作有沒有幫上忙。還沒看過上一支影片的話，可以先看這支 70 秒的示範：
▲ 設計師 Riven〈動態設計的 12 項基本法則〉，迪士尼動畫十二法則的示範動畫
CHAPTER 02 · FOUR JOBS
Issara 也把動效幫助介面的方式歸成四類。接下來的十二條，大多都在處理這四件事的其中一件，記住這四個詞，比背十二條的名字更有用。
FOUR JOBS · 四種用途與對應原則
01 · EXPECTATION
預期
東西怎麼動，要跟使用者心裡想的一樣，畫面不會讓人嚇一跳。
對應原則：緩動
02 · CONTINUITY
連續
畫面改變的前後要接得起來，同一個場景內、換頁之間都是。
對應原則：遮罩、複製、推移與縮放
03 · NARRATIVE
敘事
一連串的動作有先後順序，有開始、有過程、有結果。
對應原則：形變、數值變化、立體維度
04 · RELATIONSHIP
關係
讓人看出哪些元素是一組、誰控制誰、哪一層比較重要。
對應原則：錯開與延遲、父子連動、覆蓋、遮蔽、視差
有些原則同時做兩三件事。複製一次照顧到連續、關係和敘事；數值變化同時是敘事和關係。分類的用處是檢查：做完一個動效，問問它屬於哪一類，答不出來，它多半只是裝飾。
CHAPTER 03 · THE TWELVE
順序照原文。每一條先講它在說什麼，再講示範 App 裡怎麼做，數字都是影片裡實際用的規格。
THE TWELVE · 十二條原則總覽
01
緩動
Easing
02
錯開與延遲
Offset & Delay
03
父子連動
Parenting
04
形變
Transformation
05
數值變化
Value Change
06
遮罩
Masking
07
覆蓋
Overlay
08
複製
Cloning
09
遮蔽
Obscuration
10
視差
Parallax
11
立體維度
Dimensionality
12
推移與縮放
Dolly & Zoom
PRINCIPLE 01 · EASING
預期
這條在說什麼
真實的東西啟動要加速、停下要減速，等速移動只存在於機器。Issara 對「什麼時候該用緩動」的回答只有一個詞：永遠。動作符合物理直覺，就符合使用者的預期。
示範裡的做法
卡片從下方滑入，移動 320 像素、花 700 毫秒，曲線用 expo.out：前段很快，後段慢慢停穩。規格面板的曲線圖裡，粉紅色虛線是等速移動，跟緩出曲線放在一起，差別一眼就看得出來。
PRINCIPLE 02 · OFFSET & DELAY
關係
這條在說什麼
同時出現的東西會被看成一組，錯開出現的，會被看成一個一個的項目。它在使用者讀懂內容之前，先交代哪些東西是同一類。這條和緩動，是十二條裡僅有的兩條跟迪士尼有淵源的。
示範裡的做法
切換「人氣／新品」分頁時，六個品項沒有一起出現，每一列都比上一列晚 60 毫秒。時間差短到不會覺得慢，視線卻會自然從上往下讀。
PRINCIPLE 03 · PARENTING
關係
這條在說什麼
一個元素的變化帶動其他元素，使用者一看就知道它們是相關的。Issara 把它分成三種：直接連動、延遲連動，以及方向相反的反向連動。它最適合用在使用者正在操作的當下，手指一點，就看得出誰控制誰。
示範裡的做法
切換大中小杯，杯子跟著變大，價格同步跳成 70、80、95。尺寸選擇器一動，三個子元素一起動，不需要任何說明文字。
PRINCIPLE 04 · TRANSFORMATION
敘事
這條在說什麼
同一個元件直接變成下一個狀態，不換頁、不換元件。使用者的視線不用離開這顆按鈕，就知道事情進行到哪一步。一個動作有開始、有過程、有結果，這就是敘事。
示範裡的做法
按下「加入購物車」，按鈕寬度從 368 收到 72 變成一個圓，轉圈讀取，最後變成打勾，再展開回原本的寬度。按下、處理中、完成，三個狀態都在同一個位置發生。
PRINCIPLE 05 · VALUE CHANGE
敘事關係
這條在說什麼
數字用動態變化，使用者感覺得到增加了多少，而不只是看到一個新的結果。直接跳成新數字，很容易就被漏看。這條把畫面上的數字，跟背後實際發生的事連在一起。
示範裡的做法
再加一杯紫薯燕麥拿鐵，總金額從 NT$205 滾到 NT$285，點數也從 6 點變成 7 點。滾動的時間很短，剛好夠眼睛跟上。
PRINCIPLE 06 · MASKING
連續
這條在說什麼
改變的是看得到的範圍，內容本身不移動。使用者因此知道新的一頁，就是剛剛那張卡片，沒有被帶到別的地方。前後兩個畫面接得起來，就是連續。
示範裡的做法
點開抹茶氣泡美式，圓角的框從 176×244 的小卡一路展開到整個螢幕。仔細看，照片本身的位置沒有變，變大的只是遮罩。
PRINCIPLE 07 · OVERLAY
關係
這條在說什麼
手機螢幕是平的，沒有真正的前後。覆蓋用動態把前後關係演出來：誰在前面，誰在後面。使用者知道購物車疊在菜單上面，往下一拉就回得去。
示範裡的做法
打開購物車，清單從下方滑上來，後面的頁面縮小到 0.93 倍並變暗。縮小和變暗加在一起，前後兩層的關係不用解釋。
PRINCIPLE 08 · CLONING
連續關係敘事
這條在說什麼
新的元素從原本的元素裡分出來，使用者看得懂因果：這個東西從哪裡來，要去哪裡。它一次照顧到連續、關係和敘事三件事，是十二條裡很划算的一條。
示範裡的做法
開頭那顆按鈕用的就是這一條。按下＋，飲料縮圖複製出一份，沿弧線飛進購物車，右上角的數字從 2 跳到 3。
PRINCIPLE 09 · OBSCURATION
關係
這條在說什麼
用模糊或半透明把背景推到後面。背景沒有消失，只是暫時不重要。使用者知道自己還在原本的流程裡，眼前只需要回答一個問題。
示範裡的做法
按下「前往付款」，確認視窗跳出來，背後的畫面模糊 16 像素、暗了 35%。這兩個數字都不大，剛好讓背景退後，又認得出是剛剛的購物車。
PRINCIPLE 10 · PARALLAX
關係
這條在說什麼
不同圖層用不同速度移動，動得快的看起來比較近，動得慢的看起來比較遠。平面的螢幕因此有了前後層次。它講的是層級：畫面上哪一層比較重要。
示範裡的做法
取餐進度頁往上捲，地圖用 0.4 倍的速度，店名標籤 0.7 倍，進度卡片 1 倍。最重要的進度卡片跟著手指走，也就留在最前面。
PRINCIPLE 11 · DIMENSIONALITY
敘事
這條在說什麼
讓元素有正面和背面、上層和下層，使用者會記得資訊放在哪裡。Issara 把它分成三種：摺紙式、浮動的卡片，以及真正的立體物件。
示範裡的做法
點一下取餐卡，卡片沿著 Y 軸翻了 180 度，背面是放大的取餐號碼。這裡用的是浮動卡片，翻回來就是正面，資訊放在哪裡一清二楚。
PRINCIPLE 12 · DOLLY & ZOOM
連續敘事
這條在說什麼
推移是鏡頭往前走，或物件在空間中移動；縮放是物件本身變大，視角和位置都不動。兩者在螢幕上看起來很像，共同點是過程沒有中斷，使用者一路看得到自己從哪裡走到哪裡。
示範裡的做法
從主畫面點 Lumo 的圖示，圖示放大成整個 App，接著鏡頭往「再來一杯」的卡片推進，直到卡片填滿螢幕寬度。整段沒有硬切，也就不會迷路。
CHAPTER 04 · IN PRACTICE
把十二條換成做介面時會遇到的情境，大部分的動效需求都對得上其中一條。做之前先查表，比憑感覺加動畫穩定得多：
IN PRACTICE · 情境對照表
情境
用哪一條
常見做法
清單、卡片載入
錯開與延遲
每列間隔幾十毫秒，整組在半秒內到齊
元素進場、離場
緩動
進場用 ease-out，離場用 ease-in
點卡片看詳情
遮罩、推移與縮放
從原本那張卡片的位置展開
送出、儲存、付款
形變
按鈕本身顯示處理中和完成
金額、數量改變
數值變化
數字滾動，不要直接跳
加入購物車、收藏
複製
縮圖沿弧線飛向目標圖示
彈窗、底部面板
覆蓋、遮蔽
背景縮小、變暗或模糊
篩選、規格切換
父子連動
控制項一動，結果同步變
工具方面，緩動、形變、覆蓋這類狀態之間的轉換，用Figma Motion 在原型裡就做得出來。想把父子連動、數值變化做成真的能互動的元件，可以看Rive；要直接做進網站，Framer 的捲動與出場動畫可以處理視差和錯開進場。
“
先問這個動作在幫使用者看懂什麼，再決定要不要動。
CHAPTER 05 · LIMITS
十二條是讓介面更好懂的工具，用太多一樣會讓介面變慢、變吵。有四種情況要收斂。
第一，重複的操作。使用者一天點幾十次的按鈕，動效越短越好。Nielsen Norman Group 建議多數介面動畫落在 100 到 500 毫秒之間，頻繁的小互動要更靠近下限。第一次看覺得精緻的轉場，第一百次看只剩等待。
第二，動畫不能擋住操作。轉場進行到一半，使用者應該還能繼續點、繼續滑，動效是說明，不是排隊。
第三，大幅度的位移。視差、推移與縮放這類大面積移動，最容易讓對動態敏感的人不舒服。網頁可以用 prefers-reduced-motion 偵測使用者是否在系統裡要求減少動態，改用淡入淡出這類簡化版本。
第四，說不出用途的動效。對照第二章的四個詞，答不出它在處理預期、連續、敘事還是關係，就先拿掉。
CHAPTER 06 · TAKEAWAYS
01
UX in Motion 十二條原則出自 Issara Willenskomer 2017 年的〈Creating Usability with Motion〉，專門寫給介面。
02
十二條裡只有緩動、錯開與延遲兩條跟迪士尼的動畫法則有淵源。
03
動效幫助介面的方式有四種：預期、連續、敘事、關係。
04
最常用的是緩動、錯開與延遲、遮罩、覆蓋和複製，查情境表就能對上。
05
重複的操作要短，大幅度移動要提供減少動態的版本，說不出用途的動效先拿掉。
回到開頭那顆按鈕。左邊和右邊用的元件、文字、顏色都一樣，差別只在按下去之後的那半秒。那半秒裡，右邊交代了東西從哪裡來、去了哪裡、數字為什麼變了，左邊什麼都沒說。十二條原則做的事，就是把那半秒用好。
RELATED READS · 延伸閱讀
動態設計十二法則是什麼？迪士尼動畫 12 原則逐條圖解，動效怎麼用一次看懂
這篇的前一集：讓動作好看的十二條，和這篇剛好互補。
閱讀文章 →Figma Motion 怎麼用？核心能力、製作流程與把動效做好看的實戰原則
在原型裡做出緩動、形變和覆蓋的工具。
閱讀文章 →Figma Motion 是什麼？Config 2026 原生動效完整解析與設計師實戰
Figma 動效功能的來龍去脈與能做到的範圍。
閱讀文章 →Rive 是什麼？Flash 收掉十五年，設計師終於等到能寫程式的動效工具
想把父子連動、數值變化做成可互動的元件，看這篇。
閱讀文章 →Framer 是什麼？2026 年設計師為什麼該認真考慮這個工具
把視差、錯開進場直接做進網站。
閱讀文章 →純程式碼動畫怎麼做？用 Claude Code 拆解 12 種動態效果
用程式碼控制每一格畫面的做法與範例。
閱讀文章 →EXTRA · LINKS
Creating Usability with Motion（UX Magazine 轉載）
Issara Willenskomer 的原文，十二條原則與四種用途的出處（英文）
Issara Willenskomer 的介面動效教學網站（英文）
Google 的動效設計規範，含緩動與時長的建議值（英文）
Apple Human Interface Guidelines：Motion
Apple 對介面動態的設計建議（英文）
100 到 500 毫秒這個範圍的原文（英文）
偵測使用者是否要求減少動態的 CSS 寫法（英文）
A：介面動效設計師 Issara Willenskomer，2017 年在 Medium 發表〈Creating Usability with Motion: The UX in Motion Manifesto〉，2022 年 UX Magazine 轉載全文。
A：迪士尼那套讓角色動得生動、有魅力，UX in Motion 讓介面的變化看得懂、好使用。十二條裡只有緩動、錯開與延遲兩條跟迪士尼有淵源，分別來自漸快與漸慢、跟隨與重疊動作。
A：不用。它是一份對照清單，一個畫面通常只需要一兩條。最常用的是緩動、錯開與延遲、遮罩、覆蓋和複製。
A：Nielsen Norman Group 建議多數介面動畫落在 100 到 500 毫秒之間。移動距離越遠可以越長，使用者重複頻率高的操作要更短。
A：遮罩改變的是看得到的範圍，內容本身不動；推移與縮放是鏡頭或物件真的在移動、放大。兩者都用來讓換頁前後接得起來。
A：從緩動開始，把所有等速的移動換成緩動曲線。接著練錯開與延遲，再用複製做一個加入購物車的動效，三條練完就能應付大部分的介面。
