InSnap如何從截圖測量顏色與間距
不必打開設計工具，也能確認十六進位色值、1px 邊框，或兩個元素之間的精確間距。交給放大鏡、取色器與選取範圍尺寸標籤就好。
截圖往往是你唯一能掌握的真相來源：客戶回報的錯誤、競品的介面、與設計稿不同的成品。從中讀出準確的顏色與距離是一項小技能，而 InSnap 把工具放在擷取覆蓋層裡，圖就在眼前。
取得指標底下的顏色
在 InSnap 中，先到 設定 › 截圖 開啟取色器，然後截一張圖。當你在凍結的畫面上移動時，顏色面板會顯示指標底下的色值。
- Shift 在 RGB 與 HEX 之間切換。
- C 將目前色值複製到剪貼簿。
- 取樣來源是凍結的截圖，不是即時螢幕，所以即使下方正在播放影片或動畫，色值也不會改變。
最後一點對設計品管很重要：你量的是當初擷取下來的像素，也就是檔案裡真正包含的內容。
用放大鏡查看單一像素
放大鏡會在指標周圍顯示放大的格線，並標出中央像素。當問題不是「這塊區域是什麼顏色」，而是「這個像素到底發生了什麼事」時，就派得上用場：
- 那是一條 1px 邊框，還是陰影？
- 分隔線是一個像素還是兩個？
- 圖示有對齊文字基準線嗎？
- 四個角落的圓角半徑一致嗎？
在正常縮放下，這些細節會被反鋸齒吃掉。像素格線讓它們變得可以數。
用選取範圍測量間距
InSnap 沒有尺規工具，但選取範圍就是尺規。在想測量的空隙上拖出一個框，再讀尺寸標籤：
- 開始截圖，從其中一個元素的邊緣拖到下一個元素的邊緣。
- 讀尺寸標籤上的寬度或高度。它顯示的是實體像素，也就是檔案實際包含的內容。
- 按 Esc 取消；如果剛好也需要這張圖，就複製選取範圍。
兩個實用提醒：
- 量空隙，不要量整個元素。 從一個按鈕左緣拖到下一個按鈕左緣，得到的是兩者的間距（pitch）；需要空隙時再減掉按鈕寬度。
- 注意顯示縮放。 在 Retina 螢幕上，20 個實體像素等於 10 點。如果設計規格以點為單位，就除以縮放倍率；截圖永遠是像素。
簡短的設計品管檢查清單
| 問題 | 工具 |
|---|---|
| 確切的十六進位色值是多少？ | 取色器，按 Shift 切到 HEX，按 C 複製 |
| 邊框是 1px 嗎？ | 放大鏡 |
| 間距是 8 還是 12 像素？ | 選取範圍尺寸標籤 |
| 圓角有對齊嗎？ | 放大鏡 |
| 文字顏色正確嗎？ | 在字形上使用取色器 |
截圖不夠的時候
像素告訴你畫面上渲染出什麼，卻不告訴你為什麼。顏色看起來不對，先檢查顯示器描述檔與 App 主題，再回報錯誤；間距看起來怪，先確認頁面縮放比例。在瀏覽器 90% 縮放下截的圖，量出來的尺寸不會符合 CSS。
要互相比對時，分別截下兩個狀態並都貼圖：貼圖視窗會留在 App 上方，你可以在設計稿與實作之間來回切換，不必擔心看到哪。
常見問題
可以直接複製色值嗎？
可以。開啟取色器，將指標移到像素上，按 Shift 選擇 RGB 或 HEX，再按 C。色值會進到剪貼簿，可以直接貼進工單或設計檔。
如何用點而不是像素來測量間距？
先讀取選取範圍的實體像素尺寸，再除以顯示縮放倍率：Retina 顯示器是 2，標準顯示器是 1，縮放模式則看系統顯示設定裡顯示的數值。
取色器讀的是即時螢幕還是截圖？
是截圖。按下快速鍵的那一刻畫面就凍結了，取色器取樣的是那些像素，所以色值會和你儲存或分享的檔案一致。
