品牌動態設計指南 是做什麼的？
製作一份品牌動態系統文件，定義品牌或產品如何「動」，如同成熟設計系統（Slack、IBM Carbon、Klarna、Material）所做的那樣。輸出為一份可填空的模板，涵蓋原則、節奏/曲線代碼、動態庫、標誌規則、回饋狀態、無障礙規範以及「做/不做」範例。
使用時機
當品牌或產品需要一套有文件的動態語言時，當團隊內部的動畫感覺不一致時，當需要為設計師與工程師定義具名的節奏/持續時間代碼時，或當需要加入減少動態/無障礙標準時。輸出為結構化文件，而非程式碼。
決策樹 — 先界定系統規模，再選取代碼
需要做出兩個判斷：這個品牌實際上需要多大的系統，以及某個動態應該使用哪個代碼。不要為一個登陸頁面建立七件式系統；也不要只為一個多團隊設計系統提供單頁文件。
有多少介面/團隊會使用？
├─ 單一網站 / 單一活動 → 輕量化：原則 + 代碼 + 簡短的動態庫。
│ 除非相關，否則跳過深入的標誌/狀態章節。
├─ 產品（應用程式/網站） → 完整的七件式文件；代碼是必須的。
└─ 涵蓋產品 + 行銷 + 廣播的品牌 → 完整文件 PLUS 一個
動態個性預設集（參閱 motion-art-direction），讓每個媒介一致。
為特定動態挑選代碼：
持續時間：元素越大 / 移動距離越長 → 使用更長的代碼
（instant<fast<base<slow<slower）
曲線： 進場 → decelerate · 出場 → accelerate（且更短）
視圖內移動 → standard · 品牌時刻 → emphasized
持續循環 → linear · 活潑強調 → spring（節制使用）
經驗法則：如果一個動態無法說出它使用的代碼名稱，那它就是一次性動畫——而一次性動畫正是讓系統感覺不一致的元兇。
動態系統包含什麼
一份完整的動態設計指南文件包含七個部分。請依序撰寫：
- 動態原則 — 3-5 條具名的信念，指導所有動畫。
- 節奏與曲線代碼 — 具名的持續時間和曲線，讓動態一致且工程師可實作。
- 動態庫 — 對應到代碼的進場、出場和轉場模式。
- 標誌動畫規則 — 品牌標誌可以及不可以如何移動。
- 回饋與狀態動態 — 載入、成功、錯誤、懸停、聚焦。
- 無障礙規範 — 減少動態、光敏性、焦點可見性。
- 做 / 不做 — 讓規則明確無歧義的具體範例。
代碼是核心
其他一切都參考代碼。將持續時間和曲線定義為具名代碼；動態庫和元件重複使用它們。這才是讓動態系統可實作而非裝飾性的關鍵。
範例持續時間代碼（填空/調整）
| 代碼 | 數值 | 用途 |
|---|---|---|
duration-instant | 100ms | 微互動（切換、點擊） |
duration-fast | 150ms | 懸停、小型狀態變化 |
duration-base | 250ms | 標準 UI 轉場（預設） |
duration-slow | 400ms | 較大介面、模態框、頁面區塊 |
duration-slower | 600ms | 英雄/品牌時刻、全螢幕 |
經驗法則：元素/距離越大，持續時間越長。大多數 UI 動態在 150-400ms 之間；低於 ~100ms 感覺像瞬間完成，超過 ~500ms 對常規 UI 來說會感覺遲緩。
範例曲線代碼（曲線）
| 代碼 | cubic-bezier | 感覺 / 用途 |
|---|---|---|
ease-standard | (0.4, 0.0, 0.2, 1) | 預設；元素在視圖內移動 |
ease-decelerate (ease-out) | (0.0, 0.0, 0.2, 1) | 進場 — 快速進入，然後穩定 |
ease-accelerate (ease-in) | (0.4, 0.0, 1, 1) | 出場 — 緩慢開始，加速離開 |
ease-emphasized | (0.2, 0.0, 0, 1) | 表現性/品牌時刻 |
ease-spring | spring(stiffness, damping) | 活潑的彈跳（節制使用） |
原則：進場用減速曲線（物體到達並穩定），出場用加速曲線（物體有目的地離開），且重要的動態絕不使用線性曲線——線性感覺機械化，僅保留給持續循環（旋轉器、進度條）。
動態庫（將模式對應到代碼）
| 模式 | 代碼 | 行為 |
|---|---|---|
| 淡入 | duration-base + ease-decelerate | 透明度 0→1 |
| 縮放 + 淡入 | duration-base + ease-decelerate | 縮放 0.96→1，透明度 0→1 |
| 向上滑入 | duration-slow + ease-decelerate | Y 軸 +8/16px → 0，淡入 |
| 淡出 | duration-fast + ease-accelerate | 透明度 1→0（出場比進場快） |
| 模態框開啟 | duration-slow + ease-emphasized | 縮放 + 淡入，背景淡入 |
| 頁面/區塊轉場 | duration-base + ease-standard | 交叉淡出或共享元素移動 |
| 列表交錯 | 每項 duration-fast，偏移 30-50ms | 項目依序出現，非同時 |
預設規則：出場比進場短；交錯使用小偏移（30-50ms），讓群組感覺有活力而不拖沓。
模板（填空）
[品牌名稱] 動態設計指南 版本：___ 負責人：___
1. 原則
我們的動態是為了：[原則 1 — 例如「引導注意，而非搶奪」]
[原則 2 — 例如「預設快速，刻意表現」]
[原則 3 — 例如「每個動態都有理由」]
[原則 4] [原則 5]
2. 持續時間代碼
instant ___ms · fast ___ms · base ___ms · slow ___ms · slower ___ms
3. 曲線代碼
standard ____ · decelerate ____ · accelerate ____ · emphasized ____
4. 動態庫
進場：[列出模式 + 代碼]
出場：[列出模式 + 代碼]
轉場：[列出模式 + 代碼]
5. 標誌動畫
允許：[揭示方式、持續時間代碼、何時可以動畫]
禁止：[拉伸、變形、自由旋轉、重新上色、超過 ___ms]
6. 回饋與狀態動態
載入中：[旋轉器/骨架規則 + 各自的使用時機]
成功：[確認動畫]
錯誤：[抖動/顏色規則 — 絕不能僅用顏色]
懸停/聚焦：[代碼 + 可見的焦點要求]
7. 無障礙規範
減少動態：[發生什麼 — 見下方章節]
光敏性：最高每秒 3 次閃爍；無全螢幕頻閃。
焦點：焦點指示器絕不能動態消失。
8. 做 / 不做
✅ [做] ❌ [不做]
標誌動畫規則（填空）
明確說明允許和禁止的事項。典型基準：
- 允許：使用
duration-slow-slower+ease-emphasized的揭示/建構；平穩穩定；在每個地方使用一致的主要建構。 - 禁止：拉伸/壓縮標誌變形、自由旋轉、超出色板重新上色、每次出現都動畫（保留給關鍵時刻）、或超過約定的最大持續時間。
回饋與狀態動態
- 載入中：骨架用於內容佈局；旋轉器僅用於短時間的不確定等待；等待超過 ~1s 時顯示進度。
- 成功/錯誤：將動態與標籤或圖示配對 — 絕不能僅透過顏色或動態來傳達狀態（無障礙需求）。
- 懸停/聚焦：
duration-fast+ease-standard；焦點狀態必須清晰可見，且不能自行動態消失。
無障礙規範（必備章節）
- 減少動態：尊重使用者的「減少動態」設定。將移動/視差/大型變換替換為簡單的透明度交叉淡出或即時狀態變更。保留核心意義；移除裝飾性動態。（概念上對應至
prefers-reduced-motion。） - 光敏性：每秒不超過 3 次閃爍；避免全螢幕高對比頻閃。
- 不單獨依賴動態/顏色傳達意義：務必與文字或圖示搭配。
- 焦點可見性：絕不讓動畫隱藏或移除焦點指示器。
範例
良好 — 以代碼為基礎的動態庫條目：
模態框開啟：
duration-slow(400ms) +ease-emphasized；縮放 0.96→1，背景淡入。關閉：duration-base(250ms) +ease-accelerate。
每個數值都是具名代碼，關閉時間比開啟短，曲線符合意圖（品牌時刻強調，離開則加速）。工程師可直接實作，且結果會與所有其他模態框一致。
反模式 — 「感覺流」指南：
「動畫應該感覺流暢、現代且愉悅。使用好看的曲線，保持迅速但不要太快。」
為什麼失敗：沒有具名代碼、沒有數值、沒有進場/出場規則、沒有任何可實作的內容——「流暢」和「迅速」互相矛盾，每位工程師的解釋不同，結果產品不一致（這正是這份文件原本要解決的問題）。修正方法：用代碼表格取代形容詞，將每個模式對應到代碼，並提供包含具體毫秒值的「做/不做」配對。
常見錯誤
| 症狀 | 原因 | 修正 |
|---|---|---|
| 跨畫面動態不一致 | 手動調整的一次性數值，無代碼 | 定義一次代碼；每個模式都參考它們 |
| 文件讀起來不錯，卻無法實作 | 原則寫成形容詞而非數值 | 為每個原則配上數值化的代碼規則 |
| 所有東西都在彈跳 | 到處使用彈簧/強調 | 僅在品牌時刻保留 spring/emphasized |
| 出場感覺遲緩 | 出場持續時間 ≥ 進場 | 讓出場短一級；使用加速曲線 |
| 動畫破壞無障礙規範 | 無減少動態 / 僅用顏色狀態 | 加入必備的無障礙章節；將動態與文字/圖示配對 |
| 標誌動畫在各地不同 | 無標誌規則 | 明確規定一個主要揭示方式 + 清楚的「禁止」列表 |
| 代碼數值不斷被改名 | 名稱是字面值（duration-250） | 按目的命名（duration-base），讓數值可以更改 |
交付規格 — 好的動態設計指南文件應包含什麼
輸出為一份結構化文件（模板在 references/full-template.md），而非程式碼。一份完整的文件包含所有七個部分，並且：
- 3-5 條具名原則，每條附一行的規則（非形容詞）。
- 附有數值/曲線的持續時間和曲線代碼 — 可實作的核心。
- 將每個模式對應到代碼的動態庫。
- 明確的標誌允許/禁止規則。
- 回饋/狀態動態（載入、成功、錯誤、懸停、聚焦）。
- 必備的無障礙章節（減少動態、光敏性、焦點、不單獨使用顏色傳達意義）。
- 消除歧義的具體「做/不做」配對。
完成前 — 檢查清單
- 3-5 條原則，每條具名並附單行規則。
- 持續時間代碼已定義數值；曲線代碼已定義 cubic-bezier 曲線。
- 每個動態庫模式都指名它使用的代碼。
- 進場用減速曲線，出場用加速曲線且更短；線性僅用於循環。
- 標誌規則同時說明允許和禁止事項。
- 回饋狀態將動態與文字/圖示配對（絕不單獨使用顏色）。
- 無障礙章節已包含：減少動態、光敏性、焦點、對比度。
- 「做/不做」配對具備具體數值，非感覺流。
- 代碼名稱是語義化的（用途），而非字面數值。
相關框架
本文件是品牌動態的系統紀錄文件；兩個相關技能提供上游理論和每個專案的感覺——請參考並應用它們，但不要重複它們的表格：
animation-principles— 你的原則章節應編碼三大支柱（意圖 → 語氣 → 工藝）；主要/次要/環境動態層級解釋為什麼英雄移動和環境飄移需要不同的代碼；1/3 規則為交錯限制提供理由（不要同時移動所有東西）。引用這些；將規範表格保留在那裡。motion-art-direction— 對於涵蓋產品 + 行銷 + 廣播的品牌，請選擇一個具名的動態個性預設集，並將其陳述在文件頂部，然後推導出匹配的代碼數值（更活潑的預設集 → 更短的持續時間；高級預設集 → 更長、更流暢）。動態語言規範存在於該處。
快速參考
| 決策 | 預設值 |
|---|---|
| 預設 UI 持續時間 | duration-base 250ms |
| 進場曲線 | decelerate (ease-out) |
| 出場曲線 | accelerate (ease-in)，比進場短 |
| 線性曲線 | 僅用於循環（旋轉器/進度條） |
| 交錯偏移 | 每項 30-50ms |
| 標誌動畫 | 保留、一致、絕不變形 |
| 狀態回饋 | 動態 + 標籤/圖示，絕不單獨使用顏色 |
| 減少動態 | 將變換替換為淡出/即時狀態 |
參考檔案
references/full-template.md— 完整的填空動態設計指南文件，每個章節都已展開並包含範例文案。references/token-reference.md— 完整的持續時間和曲線代碼表格，附數值、cubic-bezier 曲線及使用說明。references/dos-and-donts.md— 具體「做/不做」配對和範例原則說明庫（類似 Slack/IBM/Material 風格）。