[使用案例](https://openscreenshot.app/zh-tw/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-tw/blog/save-screenshot-as-pdf/)比較了各種版面，[匯出參考](https://openscreenshot.app/zh-tw/docs/#export)列出其他格式。

## 整頁擷取的限制

整頁擷取記錄的是擴充功能捲動時網頁呈現的樣子。有些內容會在捲動過程中改變：

- 固定式頁首會在第一個圖塊被擷取，並只在頂端加入一次。請檢查其他固定元素（例如側邊欄或底部列）是否出現在你預期的位置。
- 只在進入畫面時才載入的圖片，如果擷取先到達，可能會顯示成空白方塊。擷取前請先捲動網頁。
- 輪播、動畫、即時計數器和無限動態可能在圖塊之間改變。請暫停它們，或改為擷取重要的區域。

高度超過 32,000 裝置像素的網頁會儲存成最多六張圖片，每張在各自的編輯器分頁中。[整頁截圖指南](https://openscreenshot.app/zh-tw/blog/full-page-screenshot-chrome/)提供更多疑難排解。要放進說明文章的截圖，請參閱[用於文件的截圖](https://openscreenshot.app/zh-tw/use-cases/documentation/)。

## 繼續閱讀

[閱讀說明文件](https://openscreenshot.app/zh-tw/docs/)、[瀏覽所有指南](https://openscreenshot.app/zh-tw/blog/)，或[取得擷取方面的協助](https://openscreenshot.app/zh-tw/support/)。

---

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