--- title: "介面動效怎麼做才好用？UX in Motion 十二條原則，用一個點餐 App 逐條看懂" slug: ux-in-motion-12-principles-ui-animation url: https://rar.design/posts/ux-in-motion-12-principles-ui-animation published_at: 2026-11-08 modified_at: 2026-11-08 author: "設計師 Riven" category: "動態設計" tags: ["UX 設計", "緩動曲線", "動態設計", "微互動", "UI 動畫", "介面動效", "UX in Motion"] access: public_access --- # 介面動效怎麼做才好用？UX in Motion 十二條原則，用一個點餐 App 逐條看懂 > 從緩動、遮罩到推移與縮放，看懂動態怎麼讓使用者知道剛剛發生了什麼 By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-11-08 UX MOTION · 2026▲ UX in Motion 示範影片的標題畫面。下面的配圖都取自這支影片，示範用的是一個虛構的咖啡點餐 App「Lumo」QUICK ANSWERUX in Motion 十二條原則，出自介面動效設計師 Issara Willenskomer 2017 年的〈Creating Usability with Motion〉。它回答的是動效怎麼讓介面更好用：讓使用者預期得到、前後接得起來、看得懂先後順序和元素之間的關係。CONTENTS01UX in Motion 是什麼？寫給介面的動效原則02動效讓介面好用的四種方式03十二條原則逐條圖解04做介面時，哪個情境用哪一條？05什麼時候該少一點？06十二條原則重點整理同一個加入購物車的按鈕，可以有兩種做法。左邊按下去，畫面幾乎沒動，只有右上角的數字從 2 變成 3。右邊按下去，飲料的縮圖飛進購物車，數字跟著跳了一下。兩邊的功能完全一樣，看右邊的時候，你不用想就知道剛剛發生了什麼事。▲ 左邊按下＋只更新購物車數字，右邊讓飲料縮圖沿弧線飛進購物車。功能相同，看懂的速度不同介面動效真正的工作，就是讓人看懂畫面的變化。上一篇動態設計十二法則聊的是迪士尼的動畫原則，這一篇換成專門寫給介面的十二條，用一個咖啡點餐 App 從頭到尾示範一次。想先看動起來的樣子，完整的示範影片在這裡，十二條原則一條一條配著畫面講：▲ 設計師 Riven〈UX in Motion：介面動效的 12 條原則〉，用咖啡點餐 App 逐條示範CHAPTER 01 · WHAT IS ITUX in Motion 是什麼？寫給介面的動效原則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緩動Easing02錯開與延遲Offset & Delay03父子連動Parenting04形變Transformation05數值變化Value Change06遮罩Masking07覆蓋Overlay08複製Cloning09遮蔽Obscuration10視差Parallax11立體維度Dimensionality12推移與縮放Dolly & ZoomPRINCIPLE 01 · EASING01 緩動：快速進場，慢慢停穩預期▲ 商品卡片從下方滑進來，規格面板列出 700 毫秒、expo.out 曲線與 320 像素的位移這條在說什麼真實的東西啟動要加速、停下要減速，等速移動只存在於機器。Issara 對「什麼時候該用緩動」的回答只有一個詞：永遠。動作符合物理直覺，就符合使用者的預期。示範裡的做法卡片從下方滑入，移動 320 像素、花 700 毫秒，曲線用 expo.out：前段很快，後段慢慢停穩。規格面板的曲線圖裡，粉紅色虛線是等速移動，跟緩出曲線放在一起，差別一眼就看得出來。PRINCIPLE 02 · OFFSET & DELAY02 錯開與延遲：一列一列進場關係▲ 切換分頁時六列品項依序進場，下方時間軸的色塊錯開排列，標示 60 毫秒的間隔這條在說什麼同時出現的東西會被看成一組，錯開出現的，會被看成一個一個的項目。它在使用者讀懂內容之前，先交代哪些東西是同一類。這條和緩動，是十二條裡僅有的兩條跟迪士尼有淵源的。示範裡的做法切換「人氣／新品」分頁時，六個品項沒有一起出現，每一列都比上一列晚 60 毫秒。時間差短到不會覺得慢，視線卻會自然從上往下讀。PRINCIPLE 03 · PARENTING03 父子連動：一個控制項帶動一整組關係▲ 尺寸選擇器是父層，杯子、陰影和價格是子層。左側的圖用線把父層連到三個子元素這條在說什麼一個元素的變化帶動其他元素，使用者一看就知道它們是相關的。Issara 把它分成三種：直接連動、延遲連動，以及方向相反的反向連動。它最適合用在使用者正在操作的當下，手指一點，就看得出誰控制誰。示範裡的做法切換大中小杯，杯子跟著變大，價格同步跳成 70、80、95。尺寸選擇器一動，三個子元素一起動，不需要任何說明文字。PRINCIPLE 04 · TRANSFORMATION04 形變：同一顆按鈕走完三個狀態敘事▲ 按下「加入購物車」後，按鈕收成圓形開始轉圈，規格面板標出 368 → 72 的寬度變化這條在說什麼同一個元件直接變成下一個狀態，不換頁、不換元件。使用者的視線不用離開這顆按鈕，就知道事情進行到哪一步。一個動作有開始、有過程、有結果，這就是敘事。示範裡的做法按下「加入購物車」，按鈕寬度從 368 收到 72 變成一個圓，轉圈讀取，最後變成打勾，再展開回原本的寬度。按下、處理中、完成，三個狀態都在同一個位置發生。PRINCIPLE 05 · VALUE CHANGE05 數值變化：讓數字用滾的敘事關係▲ 購物車再加一杯飲料，總金額滾到 NT$285，上方的點數從 6 點變成 7 點這條在說什麼數字用動態變化，使用者感覺得到增加了多少，而不只是看到一個新的結果。直接跳成新數字，很容易就被漏看。這條把畫面上的數字，跟背後實際發生的事連在一起。示範裡的做法再加一杯紫薯燕麥拿鐵，總金額從 NT$205 滾到 NT$285，點數也從 6 點變成 7 點。滾動的時間很短，剛好夠眼睛跟上。PRINCIPLE 06 · MASKING06 遮罩：變大的只有看得到的範圍連續▲ 點開抹茶氣泡美式，圓角遮罩從小卡展開成全螢幕，規格面板標出 176×244 → full這條在說什麼改變的是看得到的範圍，內容本身不移動。使用者因此知道新的一頁，就是剛剛那張卡片，沒有被帶到別的地方。前後兩個畫面接得起來，就是連續。示範裡的做法點開抹茶氣泡美式，圓角的框從 176×244 的小卡一路展開到整個螢幕。仔細看，照片本身的位置沒有變，變大的只是遮罩。PRINCIPLE 07 · OVERLAY07 覆蓋：新的一層疊上來，舊的退到後面關係▲ 購物車清單從下方滑上來，後面的菜單縮小到 0.93 倍，同時變暗這條在說什麼手機螢幕是平的，沒有真正的前後。覆蓋用動態把前後關係演出來：誰在前面，誰在後面。使用者知道購物車疊在菜單上面，往下一拉就回得去。示範裡的做法打開購物車，清單從下方滑上來，後面的頁面縮小到 0.93 倍並變暗。縮小和變暗加在一起，前後兩層的關係不用解釋。PRINCIPLE 08 · CLONING08 複製：新東西從舊東西裡分出來連續關係敘事▲ 按下＋之後，縮圖複製出一份，標籤 clone · arc 正沿著弧線飛向右上角的購物車這條在說什麼新的元素從原本的元素裡分出來，使用者看得懂因果：這個東西從哪裡來，要去哪裡。它一次照顧到連續、關係和敘事三件事，是十二條裡很划算的一條。示範裡的做法開頭那顆按鈕用的就是這一條。按下＋，飲料縮圖複製出一份，沿弧線飛進購物車，右上角的數字從 2 跳到 3。PRINCIPLE 09 · OBSCURATION09 遮蔽：背景還在，只是被推到後面關係▲ 確認付款視窗跳出來，背後的畫面模糊 16 像素、變暗 35%這條在說什麼用模糊或半透明把背景推到後面。背景沒有消失，只是暫時不重要。使用者知道自己還在原本的流程裡，眼前只需要回答一個問題。示範裡的做法按下「前往付款」，確認視窗跳出來，背後的畫面模糊 16 像素、暗了 35%。這兩個數字都不大，剛好讓背景退後，又認得出是剛剛的購物車。PRINCIPLE 10 · PARALLAX10 視差：動得快的比較近關係▲ 取餐進度頁往上捲，地圖、店名標籤和進度卡片分別用 0.4、0.7、1 倍的速度移動這條在說什麼不同圖層用不同速度移動，動得快的看起來比較近，動得慢的看起來比較遠。平面的螢幕因此有了前後層次。它講的是層級：畫面上哪一層比較重要。示範裡的做法取餐進度頁往上捲，地圖用 0.4 倍的速度，店名標籤 0.7 倍，進度卡片 1 倍。最重要的進度卡片跟著手指走，也就留在最前面。PRINCIPLE 11 · DIMENSIONALITY11 立體維度：資訊藏在卡片背面敘事▲ 取餐憑證沿 Y 軸翻轉 180 度，背面是 QR code 和放大的取餐號碼 A27這條在說什麼讓元素有正面和背面、上層和下層，使用者會記得資訊放在哪裡。Issara 把它分成三種：摺紙式、浮動的卡片，以及真正的立體物件。示範裡的做法點一下取餐卡，卡片沿著 Y 軸翻了 180 度，背面是放大的取餐號碼。這裡用的是浮動卡片，翻回來就是正面，資訊放在哪裡一清二楚。PRINCIPLE 12 · DOLLY & ZOOM12 推移與縮放：一路看得到自己走到哪連續敘事▲ 從主畫面點開 App 後，鏡頭往「再來一杯」的卡片推進，直到卡片填滿螢幕寬度這條在說什麼推移是鏡頭往前走，或物件在空間中移動；縮放是物件本身變大，視角和位置都不動。兩者在螢幕上看起來很像，共同點是過程沒有中斷，使用者一路看得到自己從哪裡走到哪裡。示範裡的做法從主畫面點 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十二條原則重點整理01UX 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 · LINKSCreating Usability with Motion（UX Magazine 轉載）Issara Willenskomer 的原文，十二條原則與四種用途的出處（英文）UX in MotionIssara Willenskomer 的介面動效教學網站（英文）Material Design 3：MotionGoogle 的動效設計規範，含緩動與時長的建議值（英文）Apple Human Interface Guidelines：MotionApple 對介面動態的設計建議（英文）NN/g：介面動畫的時長建議100 到 500 毫秒這個範圍的原文（英文）MDN：prefers-reduced-motion偵測使用者是否要求減少動態的 CSS 寫法（英文）COURSE100 種 Figma設計的方法動效之前，先把介面本身做好。從排版、元件到互動原型，一百個方法一次練起來。了解課程 →SUBSCRIPTIONAI 覺醒設計應用攻略AI 工具每週都在更新，我幫你過濾雜訊，只留對設計師真正有用的應用。了解訂閱 →常見問題Q：UX in Motion 十二條原則是誰提出的？A：介面動效設計師 Issara Willenskomer，2017 年在 Medium 發表〈Creating Usability with Motion: The UX in Motion Manifesto〉，2022 年 UX Magazine 轉載全文。Q：它跟迪士尼的動畫十二法則有什麼不同？A：迪士尼那套讓角色動得生動、有魅力，UX in Motion 讓介面的變化看得懂、好使用。十二條裡只有緩動、錯開與延遲兩條跟迪士尼有淵源，分別來自漸快與漸慢、跟隨與重疊動作。Q：十二條要全部用上嗎？A：不用。它是一份對照清單，一個畫面通常只需要一兩條。最常用的是緩動、錯開與延遲、遮罩、覆蓋和複製。Q：介面動效的時間抓多長比較好？A：Nielsen Norman Group 建議多數介面動畫落在 100 到 500 毫秒之間。移動距離越遠可以越長，使用者重複頻率高的操作要更短。Q：遮罩和推移與縮放怎麼分？A：遮罩改變的是看得到的範圍，內容本身不動；推移與縮放是鏡頭或物件真的在移動、放大。兩者都用來讓換頁前後接得起來。Q：沒學過動畫，要從哪一條開始？A：從緩動開始，把所有等速的移動換成緩動曲線。接著練錯開與延遲，再用複製做一個加入購物車的動效，三條練完就能應付大部分的介面。