AI 時代，動態設計有學習管道嗎？從 UX motion 開始 — 部落格

現在請 AI 做一個產品頁，它幾秒內就能把動畫程式碼寫好。但做出來的頁面常常落在兩個極端：不是完全不動，就是所有東西同時在動。

AI 已經會寫動畫了。它缺的是判斷：什麼時候該動、動多久、為什麼要動。

這篇寫給兩種讀者：想學動態設計的設計師，以及用 AI 做產品、希望產品更有互動感的人。兩者的起點都一樣：UX motion。

什麼是 UX motion？

UX motion 是幫助人使用介面的動態。它告訴使用者剛剛發生了什麼、東西從哪裡來、下一步該往哪裡走。裝飾性的動態是拿來看的，UX motion 是拿來用的。

動態設計師 Issara Willenskomer 在〈UX in Motion Manifesto〉中，把動態幫助可用性的方式歸納成四種：

預期（Expectation）：縮小「以為會發生」與「實際發生」之間的落差。
連續（Continuity）：畫面切換時，不讓人迷路。
敘事（Narrative）：把零散的時刻串成有頭有尾的過程。
關係（Relationship）：說明物件之間在空間、時間與層級上的關係。

他也整理了 12 個 UX motion 原則，從緩動（easing）、錯開與延遲（offset & delay），到父子連動（parenting）、變形、遮罩與視差。至於迪士尼經典的動畫 12 法則，他認為幾乎永遠適用於介面的只有緩動，因為動畫是拿來看的，介面是拿來用的。

大公司怎麼把動態寫成規範

大型設計系統的看法出奇一致：動態要有目的、要短、要能關掉。而且他們把動態寫成 token，而不是交給個人品味。

Apple

Apple 的 Human Interface Guidelines 提醒：不要為了動而動；回饋動畫要簡短精準；使用者整天重複的操作盡量少加動畫；並且讓人可以中斷動畫，不必等它播完。

IBM Carbon

IBM 的 Carbon 設計系統把動態分成兩種語氣。Productive（生產型）快速而低調，用在使用者專心做事的時候。Expressive（表現型）明顯而有活力，留給重要時刻，例如打開新頁面或確認關鍵操作。

Carbon 定義了六個時長，從按鈕與開關的 70 毫秒，到背景變暗的 700 毫秒，並分別為進場、離場與畫面內移動搭配不同的曲線。

無障礙

WCAG 成功準則 2.3.3 要求：由互動觸發的動畫，除非是必要的，否則要能關掉。對前庭功能障礙的人來說，視差與大幅移動可能造成頭暈或噁心。在網頁上，這件事從 prefers-reduced-motion 媒體查詢開始。

瀏覽器也在跟上。2025 年 10 月，同頁面的 View Transitions 已在所有主流瀏覽器上可用，畫面之間的順暢轉場不再需要大型函式庫。

動態規格，就是 AI 讀得懂的語言

沒有規格時，AI 只能套用預設值。每個元素都是同樣的 ease 與 300 毫秒；進場動畫長到使用者得等它播完；prefers-reduced-motion 被忽略；東西只會自己播放，而不是回應使用者的手。

這些是日常使用的觀察，不是研究統計。但它們有同一個原因：「加點動畫」這句話，沒有給 AI 任何判斷的依據。

把判斷寫下來，AI 就能像隊友一樣照著做。以下五個習慣，寫在提示詞或專案的風格指南裡都有效：

先定義幾個時長與緩動 token，讓 AI 只能從裡面挑。
說清楚動態的目的：建立預期、保持連續、交代順序，還是說明關係。不要只說「讓它動起來」。
用精準的詞彙：進場與離場用 ease-out，畫面內移動用 ease-in-out，持續運動用 linear。
一律要求提供減少動態（reduced motion）的版本。
最後請 AI 自我檢查：哪些動畫可以拿掉？

業界也朝同一個方向走。LottieFiles 發布了開源的 motion design skill，教程式代理在寫程式之前先決定時間、緩動與編排；設計工程師 Emil Kowalski 也分享了一套用來製作、審查與改善動畫的 skill。兩者都能安裝到 Claude Code 等程式代理中。

那麼，可以去哪裡學？

現在學動態設計的管道比以往任何時候都多。以下這條路線，設計師和用 AI 做產品的人都適用：

1. 先讀免費的規範

從篇幅很短的 Apple 動態規範開始，再讀 Carbon 的動態頁面，看具體的時長與曲線。Willenskomer 的〈UX in Motion Manifesto〉則給你描述所見的詞彙。

2. 上一門動手做的課

Emil Kowalski 的 Animations on the Web（animations.dev）用互動練習與程式碼教緩動和時間感，還有一個「動畫與 AI」單元。School of Motion 的 UX Animation Essentials 由 Ivan Witteborg 授課，涵蓋微互動、畫面轉場，以及如何把時間設定交接給工程師，使用 Rive、ProtoPie、Figma 與 After Effects。

3. 把你的判斷交給 AI

把學到的東西整理成 token 和一份簡短的風格指南，或從現成的 skill 開始，讓你的代理照著做。然後持續檢查結果，你的眼睛仍然是最後一道關卡。

用 Mografy 練習

學動態需要練習，練習需要快速的回饋。Mografy 免費且開源：由 Claude Code 或 Codex 用程式碼製作動態圖像，你在即時預覽中檢查與調整。

請它做「三張卡片依序出現」，從時間軸看錯開的節奏，改一個時間點，再看看差別在哪裡。這是一個低門檻的方式，用來培養 UX motion 最需要的時間感與緩動眼光。

AI 可以寫出動態。知道它為什麼要動，仍然是你的事。

一起來做動態設計

加入 Mografy Discord，分享你的作品、提出問題，一起決定我們接下來要做什麼。

加入 Discord 安裝 Mografy