[使用场景](https://openscreenshot.app/zh-cn/use-cases/)

# 如何为设计评审截取网页

截取整页或单个组件，用聚光和文字标注把评审者引向细节，并分享多页 PDF。

作者 [OpenScreenShot](https://github.com/pghqdev/OpenScreenShot)

做设计评审时，用**整页**截取整个页面，标出你希望获得反馈的地方，并分享一份评审者可以逐页阅读的 PDF。在 OpenScreenShot 中，**Spotlight（聚光）** 会调暗讨论区域以外的所有内容，**文字**和**箭头**用于添加标注。当评审对象是单个组件（例如卡片、图表或表格）时，使用**截取元素**。

## 逐步准备评审页面

1. 以你要评审的窗口宽度打开页面。截图显示的是当前宽度下的布局，因此要评审另一个断点，请先调整窗口大小。
2. 把页面完整滚动一遍，让延迟加载的图片加载出来，然后回到顶部。关闭不属于评审内容的 Cookie 横幅和聊天小部件。
3. 点击 OpenScreenShot 图标。在默认设置下，这会开始一次**整页**截图。在编辑器打开之前，不要离开该标签页。
4. 检查第一部分和最后一部分、页头，以及任何带动效的区域，例如轮播。
5. 选择 **Spotlight（聚光）**（`O`），在你希望评审者查看的每个区域上拖动。多个镂空区域会合并成一个调暗图层。
6. 在每个区域旁添加一条**文字**（`T`）注释；当注释需要指向某个小细节时，添加一个**箭头**（`A`）。
7. 点击**保存图片**打开**导出**对话框。选择 **PDF**，然后按照下面的导出步骤操作。

## 截取单个组件

右键点击页面，打开 **OpenScreenShot** 子菜单，选择**截取元素**。悬停在组件上直到它出现轮廓，然后点击或按 `Enter` 截取它的边界。按 `↑` 选择父元素（例如包含卡片的区块），按 `←` 或 `→` 移到相邻元素。

元素截图得到的是紧贴边界的图片，无需手动裁剪，适合比较同一组件的两个版本。如果元素没有在屏幕上完全可见，选择器会改为提供整页截图。

## 标记反馈，让评审者看得明白

聚光的镂空区域可以是矩形、圆角矩形或椭圆。每个主题用一张聚光图片：一张图片中有很多亮区，会让评审者去猜哪条注释对应哪个区域。要给反馈编号，在每个要点处添加一个**步骤编号**（`S`），并在评审讨论中引用这些编号。编号会自动递增，删除一个后会重新编号。

**形状**工具（`R`）在区域周围绘制轮廓，不会调暗页面的其余部分。**箭头**工具提供实心、空心、双向和圆点箭头，你可以拖动它的中间手柄，让它绕过其他内容弯曲。

## 以 PDF 形式分享评审

在**导出**对话框中选择 **PDF**，在**页面大小**下选择 **A4** 或 **Letter**，然后开启**拆分为多页**。相邻页面重叠 5 mm，因此分页处的一行文字会同时出现在两页上。要把页面保留在一张很长的 PDF 页面上供屏幕阅读，在**页面大小**下选择**完整**。

PDF 以图片形式保存截图及你的标注。其中没有可选择的文字。[截图转 PDF 指南](https://openscreenshot.app/zh-cn/blog/save-screenshot-as-pdf/)比较了各种版式，[导出参考](https://openscreenshot.app/zh-cn/docs/#export)列出了其他格式。

## 整页截图的限制

整页截图记录的是扩展滚动时页面渲染出的样子。有些内容会在滚动过程中变化：

- 固定页头在第一个分块中截取，只在顶部添加一次。检查其他固定元素（例如侧边栏或底栏）是否出现在你预期的位置。
- 只在进入视野时才加载的图片，如果截图先到达那里，可能显示为空白框。请在截图前滚动页面。
- 轮播、动画、实时计数器和无限信息流可能在分块之间发生变化。请暂停它们，或改为截取重要区域。

高于 32,000 设备像素的页面最多保存为六张图片，每张在各自的编辑器标签页中打开。[整页截图指南](https://openscreenshot.app/zh-cn/blog/full-page-screenshot-chrome/)介绍了更多故障排除方法。要为帮助文章截图，请参阅[文档截图](https://openscreenshot.app/zh-cn/use-cases/documentation/)。

## 继续阅读

[阅读文档](https://openscreenshot.app/zh-cn/docs/)、[浏览所有指南](https://openscreenshot.app/zh-cn/blog/)，或[获取截图帮助](https://openscreenshot.app/zh-cn/support/)。

---

Canonical page: https://openscreenshot.app/zh-cn/use-cases/design-review/