如何製作程式碼與終端機打字動畫影片

這種影片適合誰

程式教學創作者、軟體新創、做開發者工具的團隊都會用到。一段「打出指令、按下 Enter、結果出現」的動畫，比截圖更能讓觀眾感受到操作有多簡單。

整段畫面都是動態圖形做出來的，不需要真的錄螢幕，所以字永遠清楚，也不會出現打錯字或通知跳出來的問題。

適合用在哪裡

打字動畫最常出現在這幾種影片裡：

• 程式教學短影音，一支影片只教一個指令或一個小技巧
• 開發者工具的新功能介紹，展示「打一行就完成」的感覺
• 產品發表影片中的技術段落，讓工程感更強
• 工程團隊的招募和品牌影片，展現團隊在做的事

Videotto 的使用者遍布 190 個國家，程式碼是少數全世界都看得懂的語言，配上中文說明字卡，這類影片很容易跨國傳播。

決定風格的六件事

三種常見風格

同一種影片可以有很多種樣子，先選一個方向，再寫進指令裡。

• 深色編輯器. 最常見的樣子，深色底配語法顏色，專業又好讀。
• 復古終端機. 黑底綠字加掃描線，適合做成有個性的開場或彩蛋。
• 淺色簡報風. 白底大字，程式碼只留幾行，適合放在發表影片或教學簡報裡。

一步步做出來

1. 挑出最短的程式碼. 只留讓觀眾看懂重點的幾行，其他用註解或省略號帶過。
2. 選畫面類型. 程式碼用編輯器視窗，指令用終端機畫面，兩者可以先後出現。
3. 設定打字速度. 太快看不清，太慢會無聊。重點行可以打慢一點。
4. 加上結果. 指令打完後顯示執行結果，例如「完成」或一個數字，讓故事有結尾。
5. 補一句說明. 在視窗上方或下方加一行中文字卡，說明這段程式碼在做什麼。

貼到 Otto 的指令

貼上你自己的程式碼或指令。

製作一支 9:16 直式的程式碼打字動畫，約 15 秒。
深色編輯器視窗置中，等寬字體，字要大到手機看得清楚。
以下程式碼一個字一個字打出來，游標在最後閃爍：
[貼上程式碼]
打完後把第 [3] 行用亮藍色框起來，鏡頭輕輕推近。
接著切到終端機畫面，打出 [執行指令]，按下 Enter 後顯示「完成」。
加上輕柔的鍵盤音效，上方放一行繁體中文說明：[這段程式在做什麼]。

更短的寫法

• 「打字再慢一點，第二行停一下。」
• 「改成淺色主題。」
• 「把指令和結果並排放在兩個視窗。」
• 「結尾放上我的產品名稱和一句標語。」
• 「同一段程式碼做成 16:9 橫式，放在 YouTube 教學影片開頭。」
• 「打錯一個字再刪掉重打，看起來更像真人在操作。」

常見錯誤

• 程式碼太長. 一整個檔案塞進畫面，手機上只剩一堆小字。只留重點幾行。
• 字太小. 橫式畫面的字放到直式就看不見了。直式影片字要明顯放大。
• 沒有重點. 每行都一樣亮，觀眾不知道該看哪裡。標出一行就好。
• 沒有結果. 打完就結束，少了「然後呢」。加上執行結果或一句結論。

常見問題