Animation
Design
6 種動效｜賦予產品生命力
動效的價值，不在於炫目，而在於是否能以更精準的方式傳達設計意圖。當動效被正確使用，能讓產品在競爭激烈的環境中更容易被理解與記住。實務上，動效最關鍵的三個角色為：系統狀態呈現、導航與流程過渡，以及即時視覺回饋，這些元素直接影響使用者的操作信心與體驗品質。
01
Lottie 動畫
Lottie 是基於 JavaScript 的 JSON 向量動畫格式，堪稱目前 UI 動效中最成熟且穩定的解決方案之一。其優勢包含檔案極輕量、載入快速，且動畫參數可由 RD 彈性控制；向量格式在各種尺寸下皆不失真，並能跨平台運行。現階段 After Effects 可完整支援 Lottie 製作，而 Animate 也正逐步發展相關功能。
02
SVGA 動畫
SVGA 是一種高效能動畫播放格式，支援 iOS、Android、Flutter 與 Web 等多平台環境。它可透過 Animate（原 Flash）製作，並以較 AE 更節省效能的方式呈現向量動畫。SVGA 在行動裝置與網頁端表現穩定，特別適合需要流暢體驗且重視效能的專案。
03
交互原型- 高保真
「看起來就像真的，甚至以為已經完成開發。」
高保真交互原型能在設計早期階段，協助客戶清楚理解實際操作流程，並提供具體回饋。於需求確認後再交付 RD 進行開發，可有效降低溝通落差，避免不必要的返工與資源浪費，使整體流程更精準且可控。
04
影片動畫
影片動畫結合視覺、聲音與動態節奏，能在短時間內有效傳達資訊、講述故事或呈現產品特色。透過動畫的彈性表現，抽象概念得以具體化，不僅提升理解效率，也讓品牌形象與專案內容更具記憶點與吸引力。
05
Gif 動作連續圖
GIF 適合用於簡單、短時的動效展示。Photoshop 可快速製作基礎動畫，若動效結構較複雜，則會交由 Animate 製作。當需求再進一步提升時，會建議轉為影片格式，以避免 GIF 檔案過大而影響載入效能與使用體驗。
06
HTML5 Canvas
隨著 Flash 退場，Animate 已轉型成為 HTML5 Canvas 動畫的重要工具，能應用於現代網頁與互動場景。同時，Animate 也正朝支援匯出 Lottie 發展，雖仍在技術演進階段，但在網頁動效領域的應用潛力值得期待。
Lottie 動畫製作流程
01-1
安裝 Lottie 插件
在 AE 中安裝 Lottie 官方插件時，主要有兩個選項：LottieFiles 插件 和 Bodymovin。如果使用 Adobe CC，安裝會更加直覺，僅需安裝 LottieFiles 插件，並在安裝完成後，確保登入或註冊帳號即可。
01-2
Ai 向量導入 AE
在 Illustrator 中創建所需的動畫並整理圖層，會讓導入 AE 的過程更為清晰。AI 檔案需轉換成 形狀圖層（Shape Layer），這樣創建的動畫才能順利導出為 Lottie 格式。需要注意的是，過於複雜的動畫效果是不支援的，因此應保持動畫的簡潔性。
01-3
使用 AE 製作並導出
在舊版 AE 中，製作完成後需要使用 Bodymovin 插件來進行導出。而在 AE 2023 版本中，新的 LottieFiles 插件 可直接從 Adobe CC 取得，並且已經能夠直接匯出 Lottie 動畫，省去了以往的額外步驟。
Animate 動畫製作流程
GIF、SVGA、HTML5 Canvas 通通都找他，未來也會支援 Lottie 。
02-1
尋找版權音樂
尋找適合的版權音樂時，應確保音樂與動畫影片的主題和調性相符。接著，根據整段音樂的節拍進行反覆聆聽，並記錄下節奏的時間點，這樣可以幫助更精確地同步動畫動作與音樂，提升影片的整體效果和節奏感。
02-2
向量繪製腳本、寫文案
為影片撰寫文案與腳本時，需要根據影片的整體風格和目的來進行規劃。依據音樂的節奏，擬定每個片段的長度以及轉場方式，這樣能確保動畫和音樂的節奏相互契合，提升影片的流暢感和吸引力。
02-3
設計檔轉入 AN 製作
在創建 AI 向量檔 時，圖層的整理至關重要。清晰、條理的圖層結構可以讓轉入 AN（Animate）時，更容易控制元素的排布與動畫過程。這樣做能夠確保每個元素能夠按預期的順序進行出場、進場或移動，並且更簡便地安排每個影片片段的動畫效果。
02-4
組合所有製作、音樂
在創作音樂與動畫的搭配時，確保兩者之間的協調性至關重要。理想的情況是，音樂與動畫的節奏應如行雲流水般順暢，彼此互相呼應。這不僅能增強影片的吸引力，還能讓觀眾更加沉浸在影片中，從而避免影片顯得過於單調，讓人產生想要關閉的衝動。
02-5
轉存 4K 高畫質。
由於 4K 畫質需要較長的處理時間，因此在製作過程中必須格外謹慎，確保每個環節都已經檢查無誤，文案內容也要確認清楚，避免出現錯誤。這樣可以最大限度地減少因為需要重新轉存而浪費時間的情況。提前確認並修正可能出現的問題，有助於提升整體工作效率，避免因重複操作而延長製作周期。
02-6
完成品
重複觀看完成品是確保品質的重要步驟。仔細檢查影片中的每一細節，發現小錯誤時應及時記錄，並提前通知需求者。這樣一來，需求者能夠在影片最終交付前提出討論和修改意見。這不僅能減少後期返工的時間，還能確保最終成果符合需求者的期望，達到最佳效果。
After Effects 動畫影片製作流程
GIF、SVGA 、 Lottie，AE 都能做，實際上 AE 是影片特效軟體。
04-1
尋找版權音樂
在為動畫影片選擇適合的版權音樂時，首先需要確保音樂的風格與影片的主題調性相符。音樂不僅要貼合影片的情感氛圍，還應該能夠強化影片的表現力，帶動觀眾的情緒。
04-2
創建腳本、寫文案
為影片撰寫文案和腳本時，除了要確保語言簡潔、清晰外，還需根據音樂的節奏來規劃影片的結構與每個片段的長度。這樣可以讓影片在視覺和聽覺上達到完美的協同效果，避免節奏不一致或過於單調的情況。
04-3
尋找版權素材
找尋適合的 版權 影片素材時，首先要確保素材符合影片的主題和需求。接著，將素材拆解並調整，以適應腳本所需的效果。使用 AE 進行重新合成，調整素材的顏色、動態、轉場等，確保最終效果與預期一致，並能夠無縫融入整體影片中。
04-4
製作、修改、調整
確保影片擁有清晰的 起承轉合，並反覆微調腳本與素材的合適性。最後，在 Premiere Pro 中剪接影片和音樂，調整節奏與畫面過渡，達到最佳視聽效果。
04-5
Pr 剪接影片、音樂
反覆觀看影片檢查是否有任何問題，確認無誤後，使用 Media Encoder 轉出 YouTube 高清影片，確保影片格式與解析度符合上傳要求。
04-6
完成品
觀察影片整體 觀感，確認是否與音樂完美融合，達到 視覺 與 聽覺 的相輔相成。檢查整體影片從開始到結束是否如行雲流水般順暢，並確保第一印象足夠吸引觀眾，讓他們願意繼續觀看。
