操作指南 · 设计走查
如何检查线上网页的间距与对齐
简短回答
在页面上打开 Screen Ruler,悬停元素读出它们之间的像素间距,再沿应当对齐的边缘放参考线——没对齐的元素一眼就能看出偏离。它只在你调用的标签页上运行,Esc 即可清除。
- 1
在设计稿针对的视口宽度下打开页面,点击 Screen Ruler 图标。
- 2
沿元素应当共享的边缘放一条参考线,看谁没贴线。
- 3
悬停元素,读出它们之间真实的像素间距。
- 4
对规范中给了精确尺寸的元素做拖拽测量并对比。
- 5
走查结束后按 Esc 清除覆盖层。
设计稿说标题和卡片之间 24 像素,线上页面看着好像更挤。靠肉眼判断不可靠,把页面截图拖进设计工具又是每查一处花几分钟。Screen Ruler 就地给出答案:悬停看间距,放参考线查对齐,拖拽量尺寸对照规范——全部在页面本身上完成。
悬停读取间距
打开元素测量模式后悬停:Screen Ruler 读取光标下的元素,以像素显示它们之间的间隙。“看着有点挤”就变成了“这个间距是 16px,规范要求 24px”——带数字的 bug 报告一次就能修好,因为开发者确切知道要改什么、改到什么程度算完。
放参考线检查对齐
参考线是你可以钉在页面任意位置的直线。在内容栏的起始边缘放一条竖直参考线,然后滚动页面:所有应当共享这条边的元素,要么贴着线,要么明显没贴。这是抓出栅格里偏了 3px 的那张卡片、或重构后漂移的区块标题的最快办法。水平参考线同理,用于基线和行对齐。
对照规范核对尺寸
当设计给出精确尺寸——320px 的侧栏、48px 的触控目标——就拖拽测量真实元素来对比。标尺测的是渲染后的页面,你读到的是字体、内边距和缩放都生效之后用户真正看到的值,而不是浏览器插手之前样式表想要的值。
一次设计走查的实际流程
先在设计稿针对的视口宽度下打开页面。沿内容边缘钉一条参考线,先把整页的对齐过一遍——因为一个没对齐的容器,能解释它内部一大堆“不对劲”的间距。然后悬停关键间距——区块内边距、卡片间距、标题与正文的间距——把每个实测值记在规范值旁边。十分钟就能产出一份问题清单,开发者不用打开设计文件就能逐项关掉。
只在你调用的标签页上运行
Screen Ruler 没有 host 权限,不会监视你的浏览。覆盖层在你于某个标签页点击图标时出现(activeTab),它不改动页面本身,Esc 彻底移除,你测量的任何内容都不会离开你的机器——这个扩展完全不发网络请求。