「我們的 Logo 可以動起來嗎?」

可以。但先問另一題:它動起來之後,要在哪裡播?

搜尋動態 logo 的人,多半先看到 Netflix、BMW 的片頭。

那些很好看,但跟你手上的品牌是兩回事。這篇只講三件事:在哪裡用得到、靜態檔要先準備什麼、交檔要多拿什麼。

動態 Logo 是什麼

動態 Logo 是把靜態標誌的元素拆開,依固定的順序動起來,最後停回原本那個靜態標誌的一段短動畫,用在影片、網頁與螢幕這類會動的載體。

重點在最後一句:它最後要停回原本的樣子。

動態 Logo 不是另一個 Logo,是同一個 Logo 的出場方式。

三個真的用得到的場合

先確認你有沒有這三個地方。一個都沒有,就先不用做。

場合它在做什麼要先想的事
社群影片片頭與限動讓人在滑動中認出是你片頭要短,不然還沒看到內容就滑走
官網首屏第一眼的印象播完要停,也要尊重關掉動態的使用者
店內螢幕與 LED 招牌在實體空間裡反覆播放會一直重播,節奏太快會讓人煩

第一列最常見,也最容易做過頭。

社群影片的版面多半是直式或方形,Logo 會被放在一個很小的角落。

方形版怎麼處理、哪些地方會被裁掉,我寫在Logo 放進社群頭像,會被裁掉什麼。

第三列最常被忽略。 一段動畫在電腦上看一次覺得很帥,在店裡被重播一整天就是另一回事。

手機螢幕上顯示品牌畫面,紅底中間是白色的角色標誌與店名
品牌畫面放在手機螢幕上。
建築入口上方的招牌在夜間發光,線條標誌與院名都是暖黃色的光
夜間發光的招牌。
會亮的載體・實例
圖片為陳式設計的自有作品,兩張都是靜態的標誌。先確認你有沒有這三個地方。

靜態 Logo 要先具備四個條件

動畫不是從零開始做的,它是把你現有的靜態 Logo 拆開再組回去。

靜態 Logo 要先具備四個條件要有向量檔只有一張 PNG 或 JPG,動畫師得先把它重描一次要能分層全部合併成一個物件的檔,動不起來要有可拆的元素一整塊沒辦法拆的形狀,能做的動作就少很多要有單色版影片常常疊在照片或深色背景上
動畫不是從零開始做的,它是把你現有的靜態 Logo 拆開再組回去。

所以靜態那一套不完整,動畫會卡住。

一、要有向量檔。

只有一張 PNG 或 JPG,動畫師得先把它重描一次。

那一段是額外的工,而且重描出來的線條不一定跟原本一樣。

二、要能分層。

圖形、文字、裝飾,各自在不同的圖層。全部合併成一個物件的檔,動不起來。

三、要有可拆的元素。

一個由幾個部分組成的標誌,比較好編排出場順序。

一整塊沒辦法拆的形狀,能做的動作就少很多,常見的就是淡入、放大、旋轉那幾種。

品牌規範的應用範例頁,同一個魚形圖案與店名排成橫式、直式、上下等好幾種組合,白底與紅底各一組
可拆的元素・實例
圖片為陳式設計的自有作品,同一個標誌的圖案與店名排成好幾種組合。一個由幾個部分組成的標誌,比較好編排出場順序。

四、要有單色版。

影片常常疊在照片或深色背景上,全彩版不一定看得清楚。

品牌規範頁上,同一個咖啡店標誌分別放在米白底與墨綠底上
淺底與深底・實例
圖片為陳式設計的自有作品,同一個標誌放在米白底與墨綠底上。影片常常疊在照片或深色背景上,全彩版不一定看得清楚。

這四樣是不是都在你手上,對照Logo 檔案格式怎麼選那篇的三層就知道。分層的向量檔屬於原始檔那一層。

官網首屏:有一條五秒的線

官網上的動態 Logo 有一個規範要知道。

W3C 的無障礙指引 WCAG 2.2 的 2.2.2 暫停、停止、隱藏寫的是:自動開始、持續超過五秒、而且跟其他內容同時呈現的動態內容,要提供暫停、停止或隱藏的方式。

白話講:官網上的 Logo 動畫,最好五秒內自己播完停住。

停住就不用另外做暫停按鈕,也不會一直干擾正在讀內容的人。

瀏覽器視窗裡的網站登入畫面,左下角放著藍色的品牌標誌
網頁畫面・實例
圖片為陳式設計的自有作品,品牌標誌放在網站畫面的一角。官網上的 Logo 動畫,最好五秒內自己播完停住。

另一件事是有些人在手機或電腦上開了「減少動態效果」。

網頁可以用 prefers-reduced-motion 偵測這個設定。偵測到的時候,直接顯示最後一格的靜態 Logo 就好。

這一段是網頁工程那端要做的事,但設計端交檔時要把「最後一格」單獨給出來,工程才有東西可以放。

交檔要多拿哪些檔

動態 Logo 交檔,不是只拿一支影片。

交檔要多拿哪些檔分層的原始檔之後要改秒數、換背景色、改成直式,都要從這一份動手影片檔給社群、簡報、店內螢幕用網頁或 App 用的動畫檔另外輸出一份輕量的動畫檔最後一格的定格圖那一格要跟你原本的靜態 Logo 一模一樣
最後一格對不上,是最常見的問題。

第一,分層的原始檔。 之後要改秒數、換背景色、改成直式,都要從這一份動手。

第二,影片檔。 給社群、簡報、店內螢幕用。要透明背景的話,先跟動畫師確認格式,常見的影片格式不一定帶透明。

第三,網頁或 App 用的動畫檔。 影片放在網頁上檔案偏大,所以常見的做法是另外輸出一份輕量的動畫檔。

例如 Lottie 的官方文件寫,它可以把 After Effects 的動畫匯出成 JSON,在 Android、iOS 與網頁上原生播放。

第四,最後一格的定格圖。 那一格要跟你原本的靜態 Logo 一模一樣。

最後一格對不上,是最常見的問題。 動畫做完才發現字距或比例跟靜態版差一點,兩個版本就會在不同地方各自流傳。

片頭常借用品牌的輔助圖形當轉場,那些素材怎麼來,我寫在輔助圖形是什麼。

AI 生成的動態 Logo 能到哪

搜尋動態 logo 的人,很多是想問 AI 能不能直接做。

AI 生成的動態 Logo 能到哪能做到的很快出幾個方向的草稿一次性的社群素材做不到的不是分層的原始檔每一格不一定跟你的品牌規範一致權利歸屬要自己確認
用在官網或店內螢幕這種長期的地方,這一題不能跳過。

能做到的: 很快出幾個方向的草稿,讓你知道自己喜歡哪一種動法。一次性的社群素材,用完就算了的那種,也夠用。

做不到的有三件。

第一,它多半給你一支成品影片,不是分層的原始檔,之後要改秒數或尺寸,只能重新生成。

第二,每一格不一定跟你的品牌規範一致。 顏色偏一點、字形被改一點,在影片裡一閃而過看不出來,截圖出來就很明顯。

第三,權利歸屬要自己確認。用在官網或店內螢幕這種長期的地方,這一題不能跳過。

產生器與 AI 工具各自能用到什麼程度,我寫在Logo 產生器能用到什麼程度。

動態 Logo 的價格,看這三件事

Suggest 裡有人搜 `動態 logo 報價`。這篇不寫金額,因為秒數與用途差很多,一個數字沒有意義。

但影響價格的因素可以先知道,詢價時才問得到重點。

一、秒數與複雜度。 淡入一個字,跟每個元素各自出場再組起來,是完全不同的工。

二、要不要配音。 片頭常配一個短音效,那是另一段工,也有另一層授權要確認。

三、要幾種尺寸與格式。 橫式、直式、方形、網頁用的輕量檔,每多一種就多一次輸出與檢查。

詢價時把這三件事一起講,對方才估得準。

常見問題

每個品牌都需要動態 Logo 嗎

不需要。先看你有沒有會播影片的地方:社群影片與限動、官網首屏、店內螢幕或 LED 招牌。三個都沒有,靜態 Logo 就夠了,先把靜態那一套做完整比較實際。

動態 Logo 可以用現有的 Logo 直接做嗎

可以,但要先有向量原始檔,而且元素要能分層拆開。只有一張 PNG 或 JPG 的話,動畫師得先重描一次,時間與費用都會多一段。

動態 Logo 要交什麼檔

至少四樣:分層的原始檔、給影片用的影片檔、給網頁或 App 用的動畫檔,以及最後一格定格的靜態圖。最後一格要跟你原本的靜態 Logo 一模一樣。

用 AI 生成動態 Logo 可以嗎

拿來出草稿、做一次性的社群素材可以。要長期用在官網或店內螢幕,就要確認它有沒有分層原始檔、每一格跟品牌規範是否一致,以及權利歸屬是否清楚。

決定要做之前,先做這三件事

第一,列出你會播影片的地方,社群、官網、店內螢幕,一個一個打勾。

第二,翻出你的 Logo 原始檔,確認是向量、而且圖形跟文字是分開的圖層。

第三,決定最常用的那一個場合,先只做那一個的版本。

問你一件事:你的 Logo 動起來之後,第一個要播的地方是哪裡?

答不出來,代表現在還不用做。答得出來,想確認你的靜態檔夠不夠讓它動起來,跟我說一聲。


資料來源:W3C〈Understanding SC 2.2.2: Pause, Stop, Hide〉(WCAG 2.2)。MDN Web Docs〈prefers-reduced-motion〉。Airbnb Lottie 官方文件首頁。以上查閱日 2026-09-29。Google Suggest 觀察來自題目卡,實測日 2026-09-29。三個場合、四個條件與交檔清單為設計端的慣例整理,不是統計數字。

本文不含陳式設計的收費標準,也不含任何客戶的名稱或資料。 動畫素材與音效的授權、AI 生成內容的權利歸屬,屬各工具條款與法律專業範圍,實際情況請看工具的使用條款或洽律師。