---
title: "動態圖像案例：依影片要完成的事分類的 AI 輔助作品"
description: "依用途整理的動態圖像案例：發佈片、產品介面、動態文字、數據故事、解說片和 Logo 揭示，每支都註明創作者。"
robots: "index, follow"
canonical: "https://potto.ai/zh-Hant/blog/motion-graphics-examples"
markdown: "https://potto.ai/zh-Hant/blog/motion-graphics-examples.md"
author: "Potto AI Team"
category: "Motion graphics"
datePublished: "2026-10-12T00:00:00.000Z"
language: "zh-Hant"
dateModified: "2026-10-12T10:46:16.404Z"
---

# 動態圖像案例：依影片要完成的事分類的 AI 輔助作品

最有用的動態圖像案例，是依影片要完成的事來分，而不是依視覺風格來分：發佈片、會動的產品介面、動態文字短片、數據故事、解說片，或 Logo 揭示。每種用途有自己的長度、畫幅和資訊順序，所以「好例子」只有對上類型才有用。本指南從 Potto 上的 [AI 動態圖像影片](/videos) 資料庫裡選出 21 支動態圖像案例，歸進這六類用途，並列出每支的作者、長度、畫幅，以及值得看什麼。

先說一件事：**這些影片都不是 Potto 做的。** 它們由獨立創作者製作並發布，下文用他們的 X 帳號署名。Potto 把它們收在一起，方便你觀看、閱讀作者公開過的提示詞，再從同一個想法開始做自己的影片。描述只用每支影片的標題及其頁面上的資訊（作者、分類、長度、畫幅、工具），因為目的是幫你決定學什麼，不是點評別人的作品。關於 Potto 自己的工具，只寫它今天實際能做的事。

## 什麼算動態圖像

![六種動態圖形：上市影片、產品畫面、動態文字、資料故事、解說影片和標誌揭曉](https://potto.ai/blog/motion-graphics-examples/zh-Hant/motion-graphics-types.webp#1200x800)

動態圖像是動起來的平面設計：文字、形狀、圖示、圖表和圖像透過運動來解釋一件事、宣布一件事，或給品牌一個樣子。Adobe 的動態圖像指南把它們定義為「帶有運動的圖形」，並稱為「較短的動畫片段，用來娛樂或傳遞資訊」，以區別於有角色、有情節的長篇動畫電影。Wikipedia 關於 [動態圖像設計](https://en.wikipedia.org/wiki/Motion_graphic_design) 的文章說，動態設計通常與讓抽象物體、文字和其他平面設計元素運動起來聯繫在一起。

兩份資料合在一起，點出了這類作品出現的地方：影視片頭、播出與新聞圖形、廣告與品牌、動態字體、使用者介面設計，以及解說片和宣傳片。那份清單按產業組織。本指南改按任務組織，因為做影片時要問的是「我想傳達什麼」，而不是「這屬於哪個產業」。下面六種用途對應資料庫使用的分類，涵蓋企業和創作者大多數實際需要。

| 用途 | 它做什麼 | 通常回答的問題 |
| --- | --- | --- |
| 發佈 | 宣布一款產品或一次發佈 | 有什麼新東西，為什麼值得在意？ |
| 產品介面 | 把介面做成動畫 | 這個產品長什麼樣、怎麼用？ |
| 動態文字 | 以移動的文字作為主畫面 | 我該記住哪一句？ |
| 數據故事 | 讓一個數字或一種趨勢站住 | 變了什麼，變了多少？ |
| 解說 | 按步驟講清一個想法 | 這是怎麼運作的？ |
| Logo 動畫 | 揭示一個品牌標誌 | 這是誰做的？ |

## 這 21 支案例是怎麼選的

資料庫很大，而且還在增加，所以本指南不引用總數；頁面上始終顯示目前數字。挑選時用了四條篩選。每件作品必須有署名作者、記錄在案的長度和畫幅、可以播放的影片，以及能說明影片內容的標題。在每一種用途裡，優先選長度、畫幅和工具各不相同的作品，讓你看到範圍，而不是同一種做法反覆出現。

看案例之前，有兩件關於整個資料庫的事值得知道。它們來自 2026-10-12 核對過的資料庫記錄，作品繼續增加後數字會變：

- **大多數作品是 16:9。** 大約五分之四是 16:9，大約八分之一是 9:16，其餘是 1:1。下面每一種用途都是同樣的傾斜，這和人們觀看的地方一致：網站、簡報和 X。
- **長度取決於用途。** 中位長度大約是：Logo 動畫 9 秒，動態文字 15 秒，發佈 30 秒，數據故事 35 秒，產品介面 36 秒，解說 60 秒。各用途的中位數寫在對應小節裡。

這 21 件作品分節列在下面，每支都連到自己的頁面，可以在那裡播放。對每件作品，指南給出作者的 X 帳號、長度、畫幅、頁面列出的工具，以及作者是否公開了提示詞。「提示詞已公開」是指作者把提示詞發在該作品頁面上，你可以先讀再決定要不要沿用。

## 發佈片案例

![上市影片範例：產品卡片滑入，以及鉤子、功能、佐證和 CTA 的時間軸](https://potto.ai/blog/motion-graphics-examples/zh-Hant/launch-video-example.webp#1200x800)

發佈片用來宣布一件事，並請觀眾記住一件東西：名字。在資料庫的 [發佈影片](/videos/launch) 裡，中位長度是 30 秒，大約一半是 30 秒或更短。這一類的畫幅分布也最寬，大約五分之一是給手機看的 9:16。

- **[Reddit marketing tool launch video](/videos/reddit-marketing-tool-launch-video)**，作者 @anthonyriera，52.8 秒，16:9。頁面列出的工具是 Remotion，也就是 Potto 使用的同一套渲染器，因此它適合用來參考：用程式碼做的發佈片，在接近一分鐘時能裝下什麼。
- **[TypingMind showreel announces team features](/videos/typingmind-showreel-announces-team-features)**，作者 @ann_nnng，15.0 秒，16:9，基於 canvas，作者公開了提示詞。標題點明了內容（團隊功能）和形式（showreel）。
- **[CodePilot promo floats 17 model-provider logos](/videos/codepilot-promo-floats-model-provider-logos)**，作者 @op7418，50.0 秒，16:9。標題本身就是一份精確的簡報：同一種視覺手法重複使用，17 個 Logo，長度 50 秒。

**值得看什麼。** 把發佈片靜音播放一遍，記下產品名第一次出現的秒數。再數這部片子提出了多少條分開的主張。上面的例子指向一條在整個分類裡都成立的規則：片子越短，主張越少。15 秒的片子承載一個想法和一個名字；50 秒的片子容得下一個問題、若干功能和一句收尾。

**用 Potto 借用這個做法。** Potto 的 [產品介紹影片](/zh-Hant/product-video) 製作可以從一段描述或一個連結做出發佈片。一份好用的簡報會寫明受眾、長度和節拍：

> 為虛構的記帳應用 Ledgerly 做一支發佈片，30 秒，16:9。從用試算表記帳的問題開場，展示三項功能，以應用名和行動號召收尾。

## 產品介面案例

![產品畫面動畫範例：儀表板按鈕的縮放強調，以及手機模型](https://potto.ai/blog/motion-graphics-examples/zh-Hant/product-screen-animation-example.webp#1200x800)

[產品介面](/videos/product-screens) 動畫展示介面在做一件事：清單自己排好序，儀表板逐漸填滿，手機走完一條流程。這一類的中位長度是 36 秒，但中間一半的作品大約從 24 秒到 67 秒，所以它是六類裡變化最大的。9:16 和 1:1 的例子在這裡也最有用，因為應用流程常常放在手機上展示。

- **[Mac app onboarding sorts messages into one calm list](/videos/mac-app-onboarding-sorts-messages-into-one-calm-list)**，作者 @dhruvalgolakiya，13.4 秒，16:9。標題點明一次轉變：許多訊息變成一份清單，長度也剛好只夠這件事。
- **[Write, approve, publish flow animates a post scheduler](/videos/write-approve-publish-flow-animates-a-post-scheduler)**，作者 @condzxyz，15.0 秒，16:9。標題就是結構：三個動詞，按順序。
- **[Dark sales dashboard with a pixel-grid revenue chart](/videos/dark-sales-dashboard-with-a-pixel-grid-revenue-chart)**，作者 @salungprastyo，33.1 秒，16:9，主視覺是一張收入圖表。
- **[Phone mockup walks through a four-step networking app flow](/videos/phone-mockup-walks-through-a-four-step-networking-app-flow)**，作者 @astroboysoup，15.0 秒，9:16。直式畫面裡用 15 秒走完四步。
- **[Sixteen UI motion studies laid out in a four-by-four grid](/videos/sixteen-ui-motion-studies-laid-out-in-a-four-by-four-grid)**，作者 @charliejhills，8.0 秒，1:1，是這裡唯一的方形例子：網格同時展示許多小動作，而不是一條大流程。

**值得看什麼。** 停在第一幀出現介面的畫面上，問觀眾應該看哪裡。再看每種狀態在螢幕上停留多久。產品介面動畫失敗，常常是因為眼睛還沒找到變化，畫面就已經換了。所以這裡最短的例子只展示一次轉變，較長的例子把狀態分成步驟。

**用 Potto 借用這個做法。** [產品示範影片](/zh-Hant/product-demo-video) 從你上傳的截圖開始，每個專案最多八張圖片、文件或音訊檔。截圖場景會放大並沿游標路徑移動，每個場景可以帶一條說明，所以常見簡報就是一份步驟清單：

> 為虛構的開立發票應用做產品示範，30 秒，16:9。用我的三張截圖：建立發票、寄出發票、看到已付款。每張截圖一條短說明，以應用名收尾。

## 動態文字案例

![動態字體範例：Write、Move 和 Ship 在影片畫面中移動](https://potto.ai/blog/motion-graphics-examples/zh-Hant/kinetic-typography-example.webp#1200x800)

[動態文字](/videos/kinetic-type) 把運動中的文字當作主畫面。在以文字為主的用途裡，它最短：中位數大約 15 秒，大約十分之七的作品在 30 秒或以內。沒有介面或圖表來承載意思，文字本身就必須承擔。

- **[Bold WAVE letters ripple in a 128 BPM kinetic-type reel](/videos/bold-wave-letters-ripple-in-a-bpm-kinetic-type-reel)**，作者 @kiyoshi_shin，15.0 秒，16:9。標題給出了速度，128 BPM，所以運動對著節拍。
- **[Showreel opens on a bold Decision title card](/videos/showreel-opens-on-a-bold-decision-title-card)**，作者 @kenn，15.0 秒，16:9，作者公開了提示詞。這是一支字體 showreel，所以標題卡就是開場動作。
- **[Slanted credit names glide over an orange grid](/videos/slanted-credit-names-glide-over-an-orange-grid)**，作者 @goodside，75.0 秒，16:9，提示詞已公開。在這個長度上，反覆使用的手法是一份名單在同一背景上移動。
- **[Chapter-titled kinetic type reel on Indian civilization](/videos/chapter-titled-kinetic-type-reel-on-indian-civilization)**，作者 @rashem48，76.1 秒，16:9。章節標題把短片分成幾段，較長的文字片就靠這個保持形狀。

**值得看什麼。** 靜音，把它當文字讀。動態文字應該作為文本成立：句子若站不住，運動也救不了。再打開聲音，看每個詞的時機是否跟著聲音走。兩支 15 秒的例子把運動繫在標題卡或速度上；兩支 75 秒的例子靠結構抓住注意力，分別是演職員名單和章節標題。

**用 Potto 借用這個做法。** Potto 的文字場景按提示入場，引言、標題和清單場景承載短句。它不提供自由形態的逐字動畫，所以 128 BPM 的漣漪不在它渲染的範圍內。它擅長的是一份短腳本，每一句占一屏：

> 動態文字影片，15 秒，16:9，Bold Pop 風格。五行短句，每屏一句，講一個每週五交付的團隊。結尾落在 “Ship it.” 這一句。

## 數據故事案例

數據故事讓一個數字或一種趨勢站住。在資料庫的 [數據故事影片](/videos/data-story) 裡，中位數大約 35 秒，跨度很大，從 15 秒到遠超過一分鐘。這一類是規模較小的分類之一，因此適合逐支細看。

- **[Agency reel shows +84% Google traffic for a client](/videos/agency-reel-shows-google-traffic-for-a-client)**，作者 @baptistelcx，77.8 秒，16:9。結果 +84% 就在標題裡，所以影片有一個要走向的數字。
- **[LLM release timeline tracks 2026 models month by month](/videos/llm-release-timeline-tracks-models-month-by-month)**，作者 @nummanali，62.1 秒，16:9，基於 canvas，提示詞已公開。頁面描述的是一段 canvas 動畫，按月份走過 2026 年，時間就是軸。
- **[Giant '148' over a wall of unanswered support tickets](/videos/giant-over-a-wall-of-unanswered-support-tickets)**，作者 @euboid，是這裡最長的例子，114.0 秒，16:9。標題是一個巨大的數字，對著它所計數的東西。

**值得看什麼。** 找出影片希望你記住的那一個數字，再看影片如何讓它成立：它前面是什麼，後面又展示了什麼。三個例子用三種不同手法完成同一任務。一個直接給出結果，一個沿時間線走，一個把數字和它所衡量之物的畫面放在一起。

**用 Potto 借用這個做法。** 統計場景展示一個單獨的大數字，圖表場景繪製長條圖或環形圖，包含三到六個會向上計數的數值。如果你把數字寫進簡報，影片會按所寫的來用，所以匯出前請對照來源核對每一個數。[動態圖表製作](/zh-Hant/animated-chart) 頁面收集了更多這類作品：

> 數據故事，30 秒，16:9。一家虛構咖啡店的日均杯數從 6 月的 120 升到 9 月的 190。以問題開場，用長條圖展示這四個月，以 58% 的升幅收尾。

## 解說片案例

解說片按步驟教一個想法。它是六類裡最長的：中位長度 60 秒，大約只有五分之一在 30 秒或以內。資料庫的 [解說影片](/videos/explainer) 處理方式也最寬，從像素畫到手繪白板都有。

- **[Pixel-art neural network learning to read a handwritten 2](/videos/pixel-art-neural-network-learning-to-read-a-handwritten)**，作者 @DotCSV，56.0 秒，16:9。標題選了一個很小、很具體的任務，讀一個數字，來代表一個大想法。
- **[Hand-drawn whiteboard walkthrough of Muse onboarding](/videos/hand-drawn-whiteboard-walkthrough-of-muse-onboarding)**，作者 @0xlangeai，56.0 秒，16:9，用 SVG 和 CSS 動畫製作。白板的樣子適合逐步演示。
- **[Kinetic word cloud pitches an AI inference startup](/videos/kinetic-word-cloud-pitches-an-ai-inference-startup)**，作者 @deedydas，26.0 秒，16:9，用 SVG 和 GSAP 製作，提示詞已公開。它是這裡最短的解說片，把一次推介壓縮進同一種運動手法。

**值得看什麼。** 解說片應該通過句子測試：看完一遍，你能不能用一句話講出那個想法？留意問題轉成解決方案的那一刻，並數從那一刻到結尾之間有幾步。三個例子裡有兩個抓住一個小而具體的對象（一個數字、一條上手流程），讓它承載整節課。

**用 Potto 借用這個做法。** 大多數解說片背後的結構是問題、解決方案、如何運作、下一步。[什麼是解說影片](/zh-Hant/blog/what-is-an-explainer-video) 有詳細說明，[12 個解說影片案例](/zh-Hant/blog/explainer-video-examples) 則按場景順序拆開。

Potto 的 [解說影片](/zh-Hant/explainer-video) 製作可以從一個主題、一個連結或一份文件（例如 PDF）開始。它沒有手繪或白板風格。內建的十二種風格是 Clean Modern、Midnight Tech、Editorial Paper、Bold Pop、Blueprint、Warm Organic、Neon Night、Soft Pastel、Mono Minimal、Sunset Gradient、Studio Noir 和 Fresh Mint。

## Logo 動畫案例

Logo 揭示是最短的用途：資料庫裡的中位長度不到 9 秒，這裡的例子從 8.7 秒到 21.0 秒。畫面上只有一件東西可看，所以影片主要關乎時機和運動的形狀。

- **[TypingMind logo reveal](/videos/typingmind-logo-reveal)**，作者 @tdinh_me，21.0 秒，16:9，提示詞已公開。頁面描述的是一次緩慢揭示，標誌逐漸拼合。
- **[Clean white logo reveal for founder.page's launch video](/videos/clean-white-logo-reveal-for-founder-pages-launch-video)**，作者 @RatheeJaisal，20.0 秒，16:9，用 canvas 和 SVG 製作，提示詞已公開。標題把它和一支發佈片連在一起。
- **[Green dot morphs into the GLEA logo with elastic easing](/videos/green-dot-morphs-into-the-glea-logo-with-elastic-easing)**，作者 @mr_igor_sanz，8.7 秒，9:16，提示詞已公開。運動寫在標題裡：一個點變成標誌，使用彈性緩動。

**值得看什麼。** 看最後一幀。Logo 揭示要成功，最終的標誌必須乾淨、置中，並停留足夠長的時間讓人認出來；在此之前的運動，則給標誌它的個性。8.7 秒的例子說明，單一運動（一個形狀變成另一個）能做多少事。

**用 Potto 借用這個做法。** Potto 的結尾行動號召場景可以把影片結束在你的 Logo 上，資料庫裡的 [Logo 動畫](/videos/logo-animation) 分類是研究獨立揭示的地方。Potto 從固定的一組場景類型和風格渲染，沒有自訂動畫程式碼，所以上面那種彈性變形的特定緩動曲線，是用來研究的，而不是用來原樣複製的。

## 做你自己的版本

要做出這類影片，有三條路。自己寫程式碼，讓程式代理來寫，或把影片描述給一個替你渲染的工具。

資料庫裡許多創作者用程式碼製作。[Remotion](https://www.remotion.dev/docs/ai/skills) 是 Potto 使用的渲染器，它把自己描述為用 React 製作影片和動態圖像的方法，並發布代理技能，讓程式代理可以配合它工作。Potto 的 [技能](/skills) 頁面收集第三方作者提供的免費代理技能，你可以安裝到能讀取 SKILL.md 檔案的代理裡；它們在你自己的代理、用你自己的模型運行。

Anthropic 的 Claude Motion 於 2026 年 10 月 8 日宣布，截至 2026-10-12，在 Team 和 Enterprise 方案上處於 beta。它根據提示詞把文字、圖表、形狀和圖像做成動畫，並匯出 MP4。**Potto 不是 Claude Motion，與 Anthropic 也沒有官方關係。** [Claude Motion 的替代方案](/zh-Hant/blog/claude-motion-alternative) 一文用可以核對的事實比較這幾條路。

描述這條路是 Potto 的 [AI Motion Graphics](/zh-Hant/ai-motion-graphics) 工具。你給它一段提示詞、一個公開連結或一份文件。Claude Opus 5.5 撰寫簡報、腳本和分鏡，Remotion 把場景渲染成帶旁白、字幕和音樂的 MP4，畫幅為 16:9、9:16 或 1:1。你可以逐屏編輯分鏡，或在對話裡要求修改。在資料庫頁面上，公開了提示詞的影片有一個「使用這條提示詞」按鈕，會把它送到 Potto 影片創作。結果是 Potto 自己的版本，有它自己的場景類型和風格，所以不會與原片一致；把原片當作想法、節奏和外觀的參考。

預覽和分鏡不收費；匯出時才扣點數，確認前會顯示總額（見 [Potto AI 價格](/zh-Hant/pricing)）。Potto 不生成實拍畫面、虛擬形象或人物，也不剪輯你已經有的影片。

## 常見問題

### 動態圖像有哪些類型？

動態圖像的類型通常按出現的地方來分：影視片頭、播出與新聞圖形、廣告與品牌、動態字體、使用者介面動畫，以及解說片或宣傳片。本指南改按用途來分：發佈片、產品介面、動態文字、數據故事、解說片和 Logo 動畫。Wikipedia 關於動態圖像設計的文章還區分解說型、情緒型和宣傳型圖形，依據是目的在於說清、喚起感受，還是提高認知。

### 什麼算動態圖像？

動態圖像是動畫化的平面設計：把文字、形狀、圖示、圖表和圖像設為運動，用來告知、推廣或建立品牌。Adobe 把它們定義為「帶有運動的圖形」，並描述為較短的動畫片段，用來娛樂或傳遞資訊。把產品截圖、長條圖或 Logo 做成動畫的影片，是動態圖像。有角色、有情節的長篇動畫電影，通常稱為動畫。

### 動態圖像和動畫有什麼區別？

動態圖像移動的是平面設計元素，例如文字、形狀和圖表，通常在短片裡傳達資訊；動畫則更寬泛地用角色和情節講故事。兩者有重疊，所以分界更多在於目的和規模，而不是技法。Adobe 的指南按長度和目的劃線：動態圖像是較短的片段，用來娛樂或傳遞資訊。

### 動態圖像影片應該多長？

取決於用途。在截至 2026-10-12 的 Potto 資料庫裡，中位長度大約是：Logo 動畫 9 秒，動態文字 15 秒，發佈影片 30 秒，數據故事 35 秒，產品介面 36 秒，解說片 60 秒。長度要和想法的數量相配：一個想法適合 15 秒，一個問題、三項功能和一句收尾適合 30 到 45 秒。Potto 的長度選項是 15、30、45、60 和 90 秒。

### 本指南裡的影片是用 Potto 做的嗎？

不是。它們由獨立創作者製作，每支都以作者的 X 帳號署名。Potto 不把它們當作自己的作品。它們作為參考收錄，每件作品的頁面會在有原文時連到原始貼文。

### 我能用 Potto 做出這樣的動態圖像嗎？

可以，限於 Potto 提供的那幾類動態圖像：發佈片、產品介面、以文字為主的影片、數據故事和解說片，由它的十一種場景類型、十二種風格和你自己的品牌色構成。Potto 根據你的提示詞渲染自己的版本，所以結果不會複製原片，也不支援自訂動畫程式碼、手繪風格或自由形態的逐字動畫。

## 來源

所有頁面均於 2026-10-12 查詢。

- Adobe，「What Is Motion Graphics? A Complete Guide」（定義「帶有運動的圖形」、「較短的動畫片段，用來娛樂或傳遞資訊」，以及用途）：[https://www.adobe.com/uk/creativecloud/animation/discover/motion-graphics.html](https://www.adobe.com/uk/creativecloud/animation/discover/motion-graphics.html)（查詢於 2026-10-12）
- Wikipedia，「Motion graphic design」（定義、應用，以及解說型、情緒型和宣傳型圖形）：[https://en.wikipedia.org/wiki/Motion_graphic_design](https://en.wikipedia.org/wiki/Motion_graphic_design)（查詢於 2026-10-12）
- Remotion，代理技能文件（技能涵蓋什麼、如何安裝）：[https://www.remotion.dev/docs/ai/skills](https://www.remotion.dev/docs/ai/skills)（查詢於 2026-10-12）
- Remotion 首頁（「用 React 製作影片和動態圖像」）：[https://www.remotion.dev/](https://www.remotion.dev/)（查詢於 2026-10-12）
- Anthropic，「Dashboards and Motion」（Claude Motion，發布於 2026 年 10 月 8 日；Team 與 Enterprise 上的 beta；MP4 下載）：[https://claude.com/resources/articles/dashboards-and-motion](https://claude.com/resources/articles/dashboards-and-motion)（查詢於 2026-10-12）
- Potto AI 上這 21 件作品的頁面，及其作者、長度、畫幅和已公開的提示詞，以及資料庫各分類的中位數（核對於 2026-10-12）