在瀏覽器與裝置樣機中呈現螢幕截圖

準備螢幕截圖

從現有最乾淨的擷取畫面開始。放入樣機前，移除暫時通知、個人資料與意外出現的狀態細節。由於外框或透視效果可能縮小可讀區域，重要介面應靠近中央。如果要呈現工作流程，選一個關鍵畫面，或使用相同的裁切邏輯製作小型系列。

如果內容是網頁或類似桌面電腦的畫面，使用瀏覽器風格；如果觸控版面與直向閱讀是重點，使用手機或平板風格。這些都是裝飾用外框，不會開啟瀏覽器、載入 URL，也不會改變螢幕截圖本身。了解這個差異，有助於你對完成圖片設定誠實的期待。

1. 選擇主題清楚的螢幕截圖，並移除敏感內容。
2. 決定瀏覽器、iPhone 或 iPad 哪種外框最能說明脈絡。
3. 確認重要文字與控制項在外框內仍然可見。

放置外框並選擇場景

選擇能襯托螢幕截圖的背景。紀錄用途適合安靜的純色；柔和照片或自然景色則能讓產品展示更溫暖。放置樣機時留出足夠周圍空間，讓外框邊緣清楚可見。對瀏覽器視窗來說，讓介面仍然容易辨認，但不要讓裝飾控制項和頁面爭奪注意力。

保持透視感可信。輕微傾斜可以增加活力，但大幅旋轉會讓小字難以閱讀。讓樣機配合背景的視覺方向。朝向開放空間傾斜的外框看起來有意圖；指向繁忙物件的外框則會顯得擁擠。

接著閱讀：如何在螢幕截圖上加入 iPhone 外框

1. 選擇對比足夠的單色或自有圖片背景。
2. 放置裝飾外框，並在外圍邊緣留下留白。
3. 先嘗試筆直版本，再以最終分享尺寸比較傾斜版本。

檢查可讀性與可信度

縮小檢視並問自己：觀眾第一眼會注意到什麼？螢幕截圖應該是主體，而外框則說明這是哪種畫面。如果背景搶走注意力，就簡化它或降低對比；如果螢幕截圖消失了，就放大樣機或換成更安靜的場景。

檢查角落、文字與邊緣。外框裁得太緊可能看起來像意外；保留一條狹窄且不均勻的背景，也可能比有意識的裁切更分心。盡可能保持螢幕截圖的原始比例，不要拉伸圓形圖示或照片中的人物。

外框風格與 Pro 條件可能隨 App 版本變更，因此在規劃系列之前，請查看 App 中目前的 Mockups 面板。

1. 先檢視階層，再檢查文字與外框邊緣。
2. 以完整尺寸和貼文或文章使用的尺寸比較結果。
3. 如果觀眾需要脈絡，在螢幕截圖外加入簡短說明。

修正常見的樣機問題

如果螢幕截圖看起來被拉伸，換回原始比例再重新調整。如果文字太小，裁切到有意義的區域，或使用更大的外框。如果外框和背景顏色相近，用不同背景或更克制的外框處理增加分離感。如果圖片沒有理由地傾斜，就回到筆直對齊。

如果自有圖片背景太繁忙，不要用厚重裝飾把螢幕截圖藏起來。把樣機移到安靜的區域、降低視覺競爭，或選擇更簡單的色彩。先匯出測試，並在傳給客戶或發布前檢查實際儲存的結果。

1. 先修正比例，再改變尺寸。
2. 先用裁切與階層改善可讀性，再增加裝飾。
3. 以實際目的地尺寸預覽儲存的圖片一次。