上週寫一篇「摺疊收納箱」的圖文，八張步驟圖我本來拼成了一張長圖。留言裡一多半人說中間第三步看不清。改成動圖以後又踩了新坑：第一版是 720×540、十六幀，匯出 4MB 出頭，我在捷運上試著打開，轉了四五秒才動起來；第二版節奏太快，手還沒到位就翻頁；第三版尺寸沒統一，畫面每跳一次都往左上角縮一下。來回四輪我才承認，GIF 不是「一張會動的圖片」，它是順序、時長、尺寸三個數共同決定的東西，任何一個沒定好都會白做。
一、什麼時候該用 GIF，什麼時候不該
| 載體 | 適合 | 代價 |
|---|---|---|
| GIF | 3–12 步的操作演示、一個循環動作、表情梗 | 調色盤只有 256 色；體積隨尺寸和幀數線性膨脹 |
| 長圖 | 步驟超過十二步、需要放大細看、可能要列印 | 讀者要來回捲，看不出連續動作 |
| 短影音 | 超過 10 秒、需要聲音、需要真實色彩 | 平台規則多，讀者預設靜音播放 |
我的判斷線：以動作表達為主、循環兩三次內能講完、不需要聲音，用 GIF；步驟超過十二步還是老老實實做長圖加編號，動圖反而添亂。
二、三個參數各自決定什麼
順序決定讀者能不能看懂因果，幀間隔決定他來不來得及看清，尺寸和幀數決定體積。間隔這一項我實測下來跨度很大：可選範圍是每幀 100ms 到 3000ms，但 100ms 快得像鬼影，3000ms 又明顯有停頓感。最後穩定落在兩檔——文字步驟停 800ms 左右，手部動作類的 200ms 左右。
| 我這次跑的組合 | 尺寸 | 幀數 | 幀間隔 | 成品體積量級 |
|---|---|---|---|---|
| 第一版 | 720×540 | 16 | 250ms | 約 4MB |
| 第二版 | 540×405 | 10 | 800ms | 約 1.4MB |
| 第三版 | 480×360 | 8 | 250ms | 約 700KB |
| 對照版 | 480×360 | 8 | 1200ms | 約 700KB |
同一組圖跑下來結論很清楚：體積基本由「尺寸 × 幀數」決定，把停留時間拉長幾乎不省空間。所以瘦身要先減幀、再縮尺寸，別指望改間隔。這張表也是我現在接到「動圖太大」的回饋時第一眼看的東西。
三、我現在做一版動圖的流程
- 先把所有圖統一寬度。手機直出的 4032×3024 和電腦截圖 1440×900 混在一起，合成時畫面每幀都會抖一下。我用圖片尺寸調整把寬度都鎖到 540，勾上等比縮放，高度讓它按原比例算。
- 按步驟編號把圖傳進去，在縮圖上拖一遍順序。這一步必須在匯出前做完——成品出來再想調順序，等於重做。
- 間隔先按 800ms 跑一遍預覽，動作讀得清就往下壓；壓到看不清就退回上一檔。我是靠預覽反覆試出來的，不是靠公式算的。
- 預覽時專門盯兩處：第一幀和最後一幀接不接得上（循環時會跳一下就很出戲）、有沒有誤傳的近重複圖（連拍裡兩張只差幾像素，放著純屬浪費體積）。
- 匯出後自己先在手機上用行動網路打開一次，等它完整載入，再決定要不要繼續減幀。
四、色彩發灰、字邊有髒邊怎麼辦
GIF 只有 256 色調色盤，漸層底色和實拍照片特別容易出色帶，深色文字邊緣還會有一圈灰。我的處理是三步：底色從漸層改成純色；文字加粗一檔、字號往上提；避免把實拍照片當作主體幀，能用線框示意就用線框。如果這篇素材的核心就是色彩（比如調色前後對比），那就不該用 GIF，這不是壓縮能救的問題。
五、幀數和間隔：我按動作類型給的數值
以前我是憑感覺設間隔，做完才發現該停的沒停、該快的拖沓。現在我在開拍之前就按動作類型把幀數和間隔定死，一套數值如下，都是我一篇篇圖文裡跑出來的經驗區間：
- 手部連續動作（抽拉、翻摺、旋蓋）：8–12 幀，間隔 200ms。少了動作會斷，多了體積漲得很快。
- 狀態切換（蓋子開了、卡扣扣上、指示燈變色）：3–5 幀，間隔 400–600ms。這類幀的關鍵是「結果那一幀」要停夠。
- 文字說明卡（一步一句話）：一屏 1 幀，間隔 800–1200ms。我試過 500ms，讀者普遍反映來不及看完。
- 循環銜接：首尾各留一幀「中性姿勢」，也就是手退出畫面那一幀。少了它，循環時會出現手突然閃現的跳幀。
- 資訊量上限：一張動圖只講一件事。要講兩件事我就切成兩張，而不是把幀數堆到二十幾幀。
這幾條裡最值錢的是最後一條。我第一版失敗的根本原因不是參數沒調好，而是想把「摺側壁 + 扣卡扣 + 放內膽」三個動作塞進同一個 4MB 的循環裡，讀者看到的只是一團抖動。
六、常見疑問
Q：為什麼我的 GIF 檔這麼大？
先看尺寸和幀數，別看間隔。720×540 十六幀比 480×360 八幀大出五六倍是完全正常的，因為每一幀都要獨立存一份畫面。
Q：幀間隔和幀率怎麼換算？
間隔是每幀停留多久，250ms 相當於每秒 4 幀，800ms 只有每秒 1.25 幀。教學類動作我一般落在每秒 2 到 5 幀，表情梗可以更快，文字類必須更慢。
Q：動圖裡的標註文字總是看不清，怎麼辦？
我的解決辦法是別指望間隔來救：合成只管順序和時長，標註要事先做進畫面裡，字號直接按成品寬度的 8% 左右給。540 寬的圖，標註字號低於 40 像素在手機上就很難讀。
Q：手機連拍的照片能直接做成動圖嗎？
可以，本質就是按順序播放。兩個前提：尺寸要一致，張數要克制。十幾張連拍全塞進去，畫面差異又小，體積直接翻倍而讀者看不出變化。
Q：傳錯了圖或者多傳了一張怎麼補救？
在預覽這一步還能收拾：把多餘的拿掉、按編號重排一遍再匯出。但成品出來之後就沒有「局部修改」這回事了，只能重做，所以我要求自己在上傳環節就對著編號核一遍。
Q：成品裡有幾幀想改怎麼辦？
與其在動圖編輯器裡摳幀，不如整段拆開。GIF 拆圖能把每一幀導成靜態圖，改完那兩三張再重新合成，成本比想像中低。
Q：素材會上傳嗎？
不會，合成是在瀏覽器裡完成的。公司裡未發布的實拍素材不能出內網，這一點對我們來說是能不能用的前提條件。
那篇圖文最後用的是 540×405、十幀、800ms 那一版，1.4MB 左右，留言裡終於沒人說第三步看不清了。回頭看那四輪返工，我第一件該做的其實是定尺寸和定張數，而不是先糾結動畫快不快。