動態圖形方向
使用此技能將影片簡報轉化為能夠解釋、強調、品牌化或為影片定調的動態圖形。將動態視為編輯方向：每個動作都應揭示意義、引導注意力、釐清結構或營造刻意感受。
此技能與提供者無關。在選擇模型、渲染器、動畫庫、編輯工具或合成環境之前使用。
證據立場
記錄的事實：
- WCAG 2.2 要求網頁內容避免超過三次閃爍閾值的閃爍，並記錄互動觸發的動作應可禁用，除非是必要的。驗證於 2026-07-10，來自 W3C WCAG 理解頁面。
- W3C 技術 C39 記錄了
prefers-reduced-motion作為讓使用者防止動畫的方法。驗證於 2026-07-10。 - WCAG 對比度指南設定一般文字為 4.5:1，大型文字為 3:1（AA 級別），AAA 級別有更高的比例。驗證於 2026-07-10。
- Apple、Material Design、Microsoft Fluent 和 IBM Carbon 都將動態視為具有目的、時間、緩動、可訪問性和一致性約束的設計系統行為，而非裝飾。驗證於 2026-07-10。
- Netflix 時間軸文字指南使用最多兩行和語言特定的行長限制，例如許多拉丁文字幕模板每行 42 個字符。驗證於 2026-07-10。
- Datawrapper 解釋了為什麼長條圖和柱狀圖通常應從零開始，因為長條的長度編碼了量值。驗證於 2026-07-10。
來自製作實踐的經驗觀察：
- 觀眾在少數注意力窗口中閱讀動態圖形：進入、保持、強調、退出。過多的同時變化往往會降低理解力。
- AI 生成和模板驅動的影片經常失敗，因為疊加層與主體競爭，數據標記在沒有比例上下文的情況下動畫化，以及字體排版優先考慮風格而非易讀性。
- 強大的動態包通常感覺簡單，因為許多隱藏的選擇已被鎖定：字體比例、網格、安全區域、緩動家族、時間比例、過渡、字幕政策和數據標籤政策。
製作啟發式方法：
- 如果動態沒有改變觀眾理解、記憶或感受的內容，請移除它或使其更安靜。
- 分層動畫注意力：最多一個主要想法、一個輔助線索和一個背景行為。
- 偏好動態對比度而非動態音量：一個精確的揭示通常比許多動畫部分感覺更高級。
- 為了無障礙性，在概念階段設計一個降低動態的路徑，而不是作為後期修補。
從圖形的任務開始
在設計之前，根據其製作任務對每個動態圖形進行分類：
| 任務 | 用於 | 方向測試 |
|---|---|---|
| 方向 | 片頭序列、章節卡、章節開場、地圖/位置標籤 | 觀眾能否回答「我在故事中的哪裡？」 |
| 識別 | 下方字幕、講者標籤、產品標籤、來源標籤 | 在注意力回到影片之前，標籤是否可讀？ |
| 強調 | 標註、高亮、縮放框、指針、價格/功能揭示 | 它是否指向一件事而不遮蓋證據？ |
| 解釋 | 圖表、流程圖、動態字體、UI 逐步解說 | 動態是否揭示了因果關係或順序？ |
| 證明 | 數據標註、圖表、聲明卡、引用、前後對比 | 來源、分母、單位和時間範圍是否足夠可見？ |
| 節奏 | 節拍同步字體、過渡、視覺標點 | 它是否支持節奏而不遮蓋內容？ |
| 品牌影響 | Logo 動畫、發布影片、社群廣告、主標題 | 它是否表達了品牌的姿態，而不僅僅是它的顏色？ |
如果一個圖形試圖執行兩個以上的任務，請將其分成幾個節拍。
在風格之前決定動態目的
為每個圖形寫一個一句話的動態目的：
- 「以旁白者解釋的相同順序揭示三步驟序列。」
- 「通過保持來源和基準線足夠長的時間來閱讀，使產品指標感覺可信。」
- 「讓下方字幕安靜進入，以便在不打斷情感的情況下識別講者。」
- 「在競選承諾上使用尖銳的字體快照，然後平靜地保持以進行識別。」
拒絕諸如「使其動態」、「增加能量」或「看起來很酷」等目的，除非它們被轉換為觀眾效果。
跨時間建立層級
動態圖形層級在時間上與視覺上一樣重要。給觀眾一個受控的閱讀路徑：
- 建立框架：眼睛首先應該看的地方。
- 揭示主要想法：一個標題、數字、標籤或視覺變化。
- 添加上下文：單位、標籤、來源、講者角色、UI 位置、比較。
- 保持：留下足夠的靜止時間進行閱讀和理解。
- 退出或穩定：在下一個想法競爭之前清除框架。
對於短形式的社群媒體，這可以在兩秒內完成；對於密集的解說或數據圖形，可能需要五到八秒。不要僅根據平台規範選擇持續時間；根據閱讀負荷、旁白節奏和視覺複雜度來選擇。
時間和緩動方向
以節拍而非模糊的形容詞來描述時間。有用的規格包括：
- 進入持續時間；
- 保持持續時間；
- 強調時刻；
- 退出持續時間；
- 緩動特性；
- 與旁白、音樂或剪輯點的關係；
- 保持靜止的內容。
常見時間啟發式方法：
- 標籤和下方字幕：快速進入，穩定保持，安靜退出。進入應該是顯著的但不戲劇化，除非作品是品牌主導的。
- 動態字體：只移動承載意義的單詞。保持支持性單詞更平靜。
- 圖表：一次只揭示一個關係；在開始下一個之前完成每個因果鏈。
- 數據標註：動畫化度量，然後保持最終值及其單位和來源。
- UI 疊加層：與使用者操作同步。如果指針/標註來得太晚，觀眾可能會看錯的 UI 狀態。
- 過渡：視為標點。硬切、溶解、擦除、變形或字體爆發應反映場景之間的邏輯關係。
緩動詞彙：
- 線性：機械、恆定，通常最適合進度、時鐘、掃描或故意機械系統。
- 緩出：快速到達並輕柔穩定；對於進入觀眾注意力的標籤、卡片和標註很有用。
- 緩入：延遲加速；對於退出、拉動或「離開」元素很有用。
- 緩入緩出：在兩個狀態之間控制移動；對於 UI 狀態變化和圖表很有用。
- 彈性/超調：富有表現力、物理性、有趣，但如果用於嚴肅的聲明、法律副本或密集數據，可能看起來廉價或分散注意力。
- 步驟/保持：編輯性、節奏性，對於文字卡、終端/UI 演示和動態字體很有用。
設計系統來源在確切值上有所不同。使用項目的品牌令牌（如果可用）；否則描述曲線意圖並要求實作在所選執行時間中選擇匹配的令牌。
構圖和佈局
在實際框架內指導動態圖形，而不是在空白畫板上。
檢查：
- 主體間隙：不要遮蓋臉部、手部、產品互動、醫療/法律免責聲明、字幕或關鍵物體。
- 安全區域：為平台 UI、字幕和裁切變體保留邊緣。對於社群媒體交付物，在需要時分別指定 9:16、1:1、16:9 和裁切衍生版本。
- 眼睛軌跡：將圖形放置在觀眾已經觀看的地方，或者您需要眼睛下一步移動到的地方。
- 深度關係：決定圖形是存在於影片之上的玻璃層、附加於場景中的物體，還是作為鏡頭之間的編輯卡片。
- 對比度區域：當影片對於文字來說太繁忙時，添加蓋板、面板、模糊或局部陰影。
- 負空間：為閱讀留下一個安靜的區域。如果影片缺少它，則通過裁切、重新構圖、模糊或卡片創建一個。
- 連續性：跨序列攜帶錨點位置，以便重複出現的標籤易於找到。
避免不與影片、網格、主體或敘事對齊的「浮動裝飾」。
動態字體排版
字體排版必須經得起運動、壓縮、小螢幕和短保持。
方向檢查清單：
- 首先選擇字體角色：標題、副標題、標籤、字幕、數字、來源、法律、UI 註釋。
- 使用具有清晰角色對比度的字體比例。不要僅依賴顏色。
- 保持行長短以適應動態。如果一個短語無法在一次保持中讀完，將其分成幾個節拍。
- 謹慎使用粗細變化；動畫化的粗細變化在壓縮後可能會閃爍。
- 避免在影片上使用細筆劃、小型全大寫和緊湊的追蹤。
- 在提供品牌字體時保留它們，但如果需要，對於字幕、法律文字或小型 UI 標籤，使用更易讀的後備字體。
- 對於多語言/本地化版本，保留擴展空間，並避免依賴英文單詞長度的佈局。
- 對於下方字幕，將姓名、角色、組織和可選上下文分離成有意義的層級。
- 對於動態字體，使語義重音可見：名詞、動詞、數字、對比和反轉獲得動態；填充詞保持穩定或與其短語分組。
無障礙錨點：
- 使用 WCAG 對比度作為數位文字的最低標準：AA 級別一般文字 4.5:1，大型文字 3:1；考慮為行動影片、壓縮和戶外觀看使用更強的對比度。
- 不要僅通過顏色傳達意義。將顏色與標籤、圖示、形狀、位置或文字配對。
- 將重要文字在螢幕上停留足夠長的時間，以便以自然速度大聲朗讀，然後添加邊距。
品牌系統和動態語言
將品牌轉化為行為，而不僅僅是外觀：
- 高級/簡約：更少的動作，更長的保持，精確的緩動，節制的過渡，大量的負空間。
- 編輯/新聞：直接剪輯，來源優先的下方字幕，穩定的圖表，節制的強調。
- SaaS/產品：UI 錨定的疊加層，清晰的步驟排序，一致的標註語法，響應式微動態。
- 青年/社群：更大的字體，節奏性剪輯，節拍重音，更大膽的顏色，但仍保護可讀性。
- 技術/解說：圖表邏輯，逐步揭露，一致符號，較少裝飾性動態。
- 奢華/品牌影片：緩慢揭示，受控的視差或深度，觸覺材料行為，更少的聲明。
為項目創建動態調色板：
- 進入風格；
- 退出風格；
- 強調風格；
- 過渡家族；
- 下方字幕行為；
- 數據揭示行為；
- 降低動態替代方案；
- 禁止的動作。
保持此調色板小。一致性是讓觀眾學習系統的因素。
無障礙性和觀眾安全
將這些作為硬性約束應用，除非交付物是帶有明確豁免的私人草稿：
- 不要創建超過 WCAG 三次閃爍閾值的閃爍。即使技術上低於閾值，也要避免快速高對比度閃爍。
- 為互動式/網路/應用程式表面以及可能嵌入 UI 的版本提供或指定降低動態處理。
- 避免不必要的視差、旋轉、漩渦、快速縮放、大範圍深度變化和多軸動態，當它們不是必需時。
- 確保文字對比度和非文字對比度針對變化的影片，而不僅僅是針對靜態設計模型。
- 不要僅將重要資訊放在動態中；最終保持的狀態仍應傳達關鍵點。
- 避免快速移動的字幕。字幕動態不應與閱讀競爭。
- 如果影片包含連續動畫、自動前進圖形或背景循環，在發布於互動式環境時指定暫停/停止行為。
- 對於平台影片，當語音承載意義時，包含字幕或字幕安全佈局。
降低動態並不總是意味著沒有動畫。偏好透明度、簡單剪輯、較短行程距離、穩定的最終狀態和較低速度，同時保留方向和意義。
數據、聲明和來源完整性
動態可以使聲明感覺比證據支持的更有說服力。將數據圖形視為編輯證據。
要求：
- 來源；
- 日期或時間範圍；
- 分母或基準人口；
- 單位；
- 比較基準線；
- 不確定性、估計狀態或樣本大小（若相關）；
- 轉換說明，如索引值、平均值、平滑或預測。
數據動態規則：
- 誠實地動畫化比例標記。如果長條長度編碼量值，則通常需要零基準線，除非有明確標籤的替代方案被證明合理。
- 當它扭曲比較時，不要使用 3D、透視、彈性超調或裝飾性縮放。
- 避免在沒有分母或時間範圍的情況下向上動畫化數字。
- 不要挑選開始或結束幀來誇大趨勢。
- 在保持期間保持圖表軸、標籤和單位存在，而不僅在動畫之前或之後。
- 如果聲明是定性的（「更快的入職」），不要讓它看起來像測量數據，除非存在測量來源。
- 對於前後對比影片，在比較公平性重要時匹配裁切、時間點、光照和比例。
- 對於產品 UI 疊加層，區分「概念 UI」、「原型」、「模擬數據」和「實際產品擷取」。
如果出現法律、醫療、財務或安全聲明，請要求批准的副本和來源材料。動態方向不能發明證據。
使用實景或生成影片
在添加疊加層之前，檢查實際鏡頭：
- 主體的注意力在哪裡？
- 哪些區域視覺上安靜？
- 相機運動是否與疊加層對抗？
- 景深是否使附件追蹤合理？
- 是否有空間容納字幕和平台 UI？
- 是否有圖形應消失以讓表演或證據呼吸的時刻？
疊加策略：
- 螢幕空間疊加：穩定的卡片、字幕、標籤、標題圖形。
- 場景附加疊加：追蹤標籤、箭頭、產品圖釘、地圖點。僅在追蹤品質支持時使用。
- 編輯插入：影片節拍之間的全螢幕圖表或卡片。
- 分割構圖：影片加圖表/UI 面板。當證據需要比疊加層能安全提供的更多空間時使用。
- 匹配剪輯或變形：從物體/影片過渡到圖形，然後返回。謹慎使用，通常最適合品牌作品。
動態資產的運行時考慮因素
雖然此技能是提供者無關的，但請記住這些運行時需要：
- 時間：指定輸入和輸出持續時間，以及任何關鍵幀偏移。確保動態的總持續時間適合影片編輯時間線。
- 解析度：為典型平台（例如，1080p、4K UHD、社交媒體正方形）指定輸出解析度。對於社交媒體，根據平台需求考慮 9:16 或 1:1 裁切。
- 位元率：對於壓縮後的最終影片，確保動作不會引入偽影。複雜的緩動或細微的動作可能會在低位元率下丟失。
- 格式：確定交付格式（例如，ProRes、H.264、H.265、GIF、Lottie）。
- 檔案大小：在保持品質的同時，注意檔案大小限制。
迭代和審查
在實施後，審查動態圖形以確保：
- 目的達成：動態是否實現了其編輯目的？觀眾是否理解了意圖？
- 可讀性：文字是否易於閱讀？對比度是否足夠？
- 節奏：動態是否支持影片的節奏？
- 無障礙性：是否已考慮降低動態？是否有任何閃爍問題？
- 數據完整性：是否有任何可能誤導的動畫化數據？
- 品牌一致：動態語言是否與品牌一致？
記錄問題並迭代，直到動態圖形滿足項目要求。
此技能是一個框架。調整這些指南以適應您項目的特定背景和限制。
關鍵輸出
- 動態調色板：定義進入、退出、強調和過渡風格的最小集合。
- 方向文檔：記錄時間、緩動、佈局和字體排版決策。
- 無障礙性報告：記錄已考慮降低動態路徑、對比度檢查和閃爍測試。
- 審查清單：用於審查最終輸出的清單。
整合與使用
使用此技能作為將影片簡報轉化為有效動態圖形的逐步指南。它旨在與其他 AI 代理技能一起用於影片製作、設計或品牌系統，以確保在整個製作過程中一致、高品質的方向。