InSnap如何从截图里测量颜色和间距
不用打开设计工具，就能读出精确的色值、1px 的边框，以及两个元素之间到底隔了多少像素。取色器、放大镜和选区尺寸标签就能完成。
截图往往是你唯一的事实来源：客户发来的问题反馈、竞品的界面、和设计稿不一样的已上线页面。从截图里读出准确的颜色和距离是一门小技能，而 InSnap 把这些工具直接放在截图界面里，图片本来就在那儿。
取指针下方的颜色
在 InSnap 里，先在设置 › 截图中打开显示取色面板，然后截图。当你在冻结的画面上移动时，颜色面板会显示指针下方的色值。
- Shift 在 RGB 与 HEX 之间切换。
- C 把当前色值复制到剪贴板。
- 取样来自冻结的截图，而不是实时屏幕，所以即使下面正在播放视频或动画，色值也不会变。
最后一点对设计走查很重要：你量的是被截取下来的像素，也就是文件里真正包含的内容。
用放大镜看清单个像素
放大镜会在指针周围显示放大的像素网格，并标出中心像素。当你要问的不是「这块区域是什么颜色」，而是「这个像素上到底发生了什么」时，就用它：
- 那是一条 1px 的边框，还是阴影？
- 分隔线是一个像素还是两个？
- 图标和文字基线对齐了吗？
- 四个角的圆角一致吗？
在正常缩放下，这些细节会被抗锯齿抹成一片。像素网格让它们变得可以数。
用选区量间距
InSnap 没有标尺工具，但选区就是一把尺子。在你想要测量的空隙上拖一个框，然后读尺寸标签：
- 开始截图，从一个元素的边缘拖到下一个元素的边缘。
- 在尺寸标签里读宽度或高度。它显示的是物理像素，也就是文件里真正包含的尺寸。
- 按 Esc 取消；如果还需要这张图，就复制选区。
两个实用提醒：
- 量的是间距，不是整个元素。 从一个按钮的左边缘拖到下一个按钮的左边缘，得到的是两者的节距；如果要的是间隙，再减去按钮宽度。
- 注意屏幕缩放。 在 Retina 屏上，20 个物理像素等于 10 点。如果设计稿以点为单位，就除以缩放系数；截图永远是像素。
一份简短的设计走查清单
| 问题 | 工具 |
|---|---|
| 精确的十六进制色值是多少？ | 取色器，按 Shift 切到 HEX，按 C 复制 |
| 边框是 1px 吗？ | 放大镜 |
| 间距是 8 还是 12 像素？ | 选区尺寸标签 |
| 圆角对齐了吗？ | 放大镜 |
| 文字颜色符合预期吗？ | 在字形上取色 |
截图不够用时
像素告诉你渲染出了什么，却告诉不了为什么。如果颜色看着不对，先检查显示器色彩描述文件和应用的主题，再提 bug；如果间距看着不对，先确认页面的缩放比例。在 90% 浏览器缩放下截的图，量出来的尺寸和 CSS 对不上。
要做对比，就分别截下两个状态，然后把两张都贴上：贴图窗会浮在应用之上，你可以在设计稿和实现之间来回切换，而不会丢掉位置。
常见问题
可以直接复制色值吗？
可以。打开取色器，把指针移到像素上，按 Shift 选 RGB 或 HEX，再按 C。色值会进入剪贴板，可以直接粘进工单或设计文件。
怎么用点而不是像素来量间距？
读取选区尺寸的物理像素值，再除以屏幕缩放：Retina 屏是 2，普通屏是 1，缩放模式下用系统显示设置里显示的值。
取色器读的是实时屏幕还是截图？
截图。按下热键的那一刻画面就被冻结了，取色器取的是这些像素，所以色值和你保存或分享出去的文件一致。
