FREE WEB MOTION TALK
AI 讓品牌
動起來｜動態設計實戰
把設計變成真正會動的作品。
MAKE IT MOVETIMING · EASING · RHYTHM
免費講座・把靈感變成會動的設計
WEB MOTION ✦
AI 讓品牌
WHAT IS MOTION DESIGN
動態設計，
就是讓畫面動得剛剛好。
簡單說，就是決定畫面裡的東西：
什麼時候出現、怎麼動、動多快、最後停在哪。
動得好，看的人更容易看懂，也更容易記住。
WHERE IT LIVES
一個品牌，動態可以用在 3 個地方。
品牌網頁
讓人第一眼就記住：開場動畫、捲動敘事、Hover 回饋。
例：Apple AirPods Pro ↗產品介面
讓每個操作都有回應：頁面轉場、載入狀態、按鈕與通知回饋。
例：Material 3 Motion ↗產品解說
把看不見的功能說清楚：功能 Demo、上市影片、社群短片。
後面會看一支 25 秒範例 ✦場景不同，但背後都是同一件事：設計時間、節奏與緩動。
CASE STUDY · PRODUCT & UI MOTION
產品動畫，
是讓人看懂怎麼用。
Qlite 是用 AI 產生報價單的工具。這支產品解說影片用 UI 動畫帶著觀眾走完一次流程：輸入一句話、生成報價單、選客戶、分享。
- 鏡頭推近把視線帶到正在發生變化的地方
- 打字與游標觀眾跟著「自己操作一次」
- 逐列出現資訊一條條長出來，不會一次塞滿
- 卡片轉場前後畫面接得起來，不會突然跳走
THREE JOBS OF MOTION
好的動態不是裝飾，
它在做這三件事。
↗
先讓視線知道往哪裡走
透過出場順序、速度與節奏，讓人自然抓到畫面的重點。
✦
每一次操作，都要有回應
點擊、滑動、角色的一個眨眼，都讓人感覺畫面「聽得懂你」。
◌
讓內容之間產生連續感
好的轉場會把前後內容串起來；網頁、APP、影片都是同一個道理。
THE MOTION WORKFLOW
把「想要的感覺」，變成真的做得出來。
今天不是只看效果，而是學會一套網頁、影片都能用的做法。
✦
先定義想傳達的感受
可愛、俐落還是沉穩？先決定品牌的動態個性。
✦
再把畫面拆成順序與節奏
像畫分鏡一樣，決定誰先出場、怎麼移動、停多久。
✦
最後才選工具做出來
放進網頁用 GSAP，做成影片用 Canvas 或剪輯軟體，AI 幫你實作。
FROM PROMPT TO MOTION
先把想法說清楚，再讓 AI 幫你做出來。
與其只說「幫我做一個很酷的動畫」，不如像寫分鏡一樣交代：時長與比例、每一段幾秒發生什麼、配色與字體，以及哪些東西不要動。
PromptPreviewExport
把這段描述交給 Claude 或 Codex，Mografy 會即時預覽每一格畫面，再輸出成 MP4、Lottie 或 SVGA。
幫我做一支 25 秒、16:9 的虛擬偶像出道預告「Lunar Pop Club No.01」，使用提供的角色圖與舞台背景。
0–6s 剪影｜角色剪影疊在淡淡的巨大「月」字上，直排文案「今晚，陪伴著你」逐行出現，剪影跟著節拍從粉色轉成薰衣草紫。
6–10s 色塊｜斜向色塊跟著節拍掃過換色，黃色月亮從角色背後升起。
10–16s 月出｜圓盤變成被霓虹兔耳框住的滿月，角色登場，標題「月亮偶像」。
16–22s 章節｜圓形頭像框在登場 01、魅力 02、節拍 03 之間移動換場。
22–25s 結尾｜霓虹兔子線條畫出，接上 LUNAR POP CLUB 標誌。
風格｜象牙白、櫻花粉、薰衣草、夜紫；直排明體標題；不要硬切，只有飄落的花瓣當背景動態。
0–6s 剪影｜角色剪影疊在淡淡的巨大「月」字上，直排文案「今晚，陪伴著你」逐行出現，剪影跟著節拍從粉色轉成薰衣草紫。
6–10s 色塊｜斜向色塊跟著節拍掃過換色，黃色月亮從角色背後升起。
10–16s 月出｜圓盤變成被霓虹兔耳框住的滿月，角色登場，標題「月亮偶像」。
16–22s 章節｜圓形頭像框在登場 01、魅力 02、節拍 03 之間移動換場。
22–25s 結尾｜霓虹兔子線條畫出，接上 LUNAR POP CLUB 標誌。
風格｜象牙白、櫻花粉、薰衣草、夜紫；直排明體標題；不要硬切，只有飄落的花瓣當背景動態。
THE RESULT · MADE WITH MOGRAFY
那段 prompt，
做出來長這樣。
AI 照著分鏡把畫面做出來，Mografy 預覽、微調，最後輸出成 25 秒的 MP4。
- 01社群短影音
- 02產品解說影片
- 03網站作品展示
- 04品牌形象延伸
WORKSHOP
接下來，從你的作品開始。
把剛才的思路套進自己的作品，從感受、節奏到實作，一步一步拆解。
我的品牌，適合什麼樣的動態個性？
我想要的節奏和緩動，要怎麼告訴 AI？
東西很多時，怎麼決定誰先動？
TAKE IT WITH YOU
把今天的方法，帶回你的下一個作品。
從感受開始，決定順序、節奏與緩動，
再選擇用網頁或影片，把想法真正做出來。
使用 ← → 或空白鍵切換