Animation
Design
6 種動效 – 賦予產品生命力
動效的強大在於，他能將設計以更為精練的方式呈現，賦予產品生命力，讓其在眾多競爭下，脫穎而出，動效非常關鍵的三個用途『系統狀態』『導航與過渡』以及『視覺反饋』。
01
Lottie 動畫
Lottie 動畫是基於 JS 的 JSON 文件，堪稱目前最佳的動畫解決方案，具備以下優勢：極輕量、RD 可控、向量 – 不失真、適用於所有平台。目前，僅有 AE 完全支援，而 AN 正在開發中。
02
SVGA 動畫
高性能動畫播放體驗，SVGA 是一種兼容 iOS、Android、Flutter 和 Web 多平台的動畫格式，支援 Animate（前身為 Flash），並使用相較於 AE 更省效能的 AN 向量動畫軟體製作。
03
交互原型- 高保真
「看起來就像真的，以為已經做好了！」高保真原型在設計早期階段若能與客戶充分確認，獲得更深入的反饋，並在確認後才交付給 RD 開發，便能大幅減少不必要的資源浪費。
04
影片動畫
影片動畫是一種結合視覺、聲音與動態效果的創作形式，能有效地傳達資訊、講述故事或展示產品特色。透過動畫的靈活性，可以將抽象概念具體化，賦予品牌或專案更多生命力和吸引力。
05
Gif 動作連續圖
Photoshop 可以輕鬆製作簡單的動效，如果需要更複雜的動畫，就交給 Animate。若需求再進一步提升，雖然還是能做到，但建議直接製作成影片格式，因為存成 GIF 檔案會變得很大、很占容量喔！
06
HTML5 Canvas
有多少人因為 Flash 的消失，而忽略了 Animate 已經華麗轉身，成為設計 H5C 動畫 的主力工具？此外，AN 也即將支援匯出 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 動畫製作流程（前身是 Flash)
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
完成品
觀察影片整體 觀感，確認是否與音樂完美融合，達到 視覺 與 聽覺 的相輔相成。檢查整體影片從開始到結束是否如行雲流水般順暢，並確保第一印象足夠吸引觀眾，讓他們願意繼續觀看。