InSnap如何製作前後對照的比較圖
一張圖勝過兩個附件：用相同尺寸擷取前後兩種狀態、並排拼接、加上標示，送出讓人一眼就能掃讀的比較圖。
前後對照的截圖，是展示改變最快的方式，但兩張各自獨立的附件會逼著讀者來回切換、還得記住剛才看到什麼。一張並排的圖片，就能省下這些功夫。
用同樣的方式擷取兩種狀態
只有兩張圖站在相同的基礎上，比較才公平：
- 相同的視窗範圍與縮放比例。「之前」用 100%、「之後」用 80%，會讓間距和字級看起來都不誠實。
- 相同的裁切範圍。擷取同一塊區域，不要只把改變的部分裁得更緊。
- 相同的視窗大小與主題。深色模式的「之後」擺在淺色模式的「之前」旁邊，等於一次比較了兩種改變。
- 相同的狀態。如果頁面有滑鼠移入或取得焦點的效果，請讓游標遠離兩張擷取畫面。
如果是響應式版面，請為每個斷點各做一組對照，不要把不同寬度混在一起比。
裁成相同的長寬比
用 InSnap 的圖片編輯器打開第一張擷取畫面，裁成你想比較的區域。接著對第二張套用同樣的裁切，並用尺寸標示確認像素對得上。如果兩個版面的高度不同，請裁成較短的那一個，而不是用空白把它補齊。
並排拼接
圖片編輯器的拼接面板可以把多張圖片放到同一張畫布上（Pro）：
- 在左側欄選擇拼接。
- 先匯入「之前」的圖，再匯入「之後」的圖。
- 拖曳調整順序，並讓兩張圖的頂端對齊。
- 兩張圖之間留一致的間隙；幾像素的留白，就能讓人看出這是一組刻意配對的圖。
- 排好之後合併圖層，再加上標示。
如果兩張圖大小不同，把較大的那張縮到一樣大，或在拼接前把兩張都裁成相同的長寬比。比例不一致，是比較圖看起來「怪怪的」最常見的原因。
標示左右兩側，而不是每個細節
用文字工具在兩側的相同角落加上「之前」和「之後」，或「目前」和「提案」。標示要簡短，樣式要一致。
接著只標注真正重要的差異：
- 序號：如果有多處改變，用 1 標間距、2 標新按鈕。
- 形狀：圈出改變的區域。
- 箭頭：只在方向不明顯時使用。
- 遮蔽：把兩張圖裡的姓名、電子郵件和內部網址遮起來。
同一個細節不要在兩側都標；只標一次，標在它改變的那一側。
依用途匯出
- 聊天或電子郵件：單一 PNG 最容易閱讀，而且大多數用戶端都不會出問題。
- 簡報：配合簡報的長寬比；如果圖片偏暗，可以加個底色。
- 文件：同一系列裡每張比較圖都用一致的寬度。
如果檔案太大，儲存時可以把 Retina 擷取畫面縮放成 1x；比較圖通常不需要完整的像素密度。
比較圖檢查清單
| 檢查項目 | 原因 |
|---|---|
| 相同的視窗範圍、縮放與主題 | 否則比較就不成立 |
| 相同的裁切與長寬比 | 眼睛會先比較邊緣 |
| 標示放在相同位置 | 「之前」和「之後」很容易搞混 |
| 差異只標一次 | 畫面更清爽、重點更清楚 |
| 兩張圖都遮掉私人資料 | 舊的狀態也可能洩漏 |
| 一個檔案，而不是兩個附件 | 更好讀、也更好轉傳 |
常見問題
拼接兩張截圖需要 Pro 嗎？
需要，拼接是 Pro 功能。免費的替代做法是把兩張截圖並排貼在螢幕上，供你自己比對；但要匯出成一張圖，就得用編輯器的拼接面板。
如果兩張截圖大小不同怎麼辦？
把兩張都裁成相同的長寬比，或在拼接前把較大的那張縮到跟較小的一樣大。維持比例一致，比保留每一個像素更重要。
可以比較三個版本嗎？
可以。依順序拼接，例如舊版、目前版、提案版，並使用相同的間隙與標示樣式。如果差異很細微，每個改變各做一組兩張圖的對照，會比一整條寬版更好讀。
