裝置樣機產生器

裝置樣機產生器

裝置樣機產生器把截圖放入真實裝置邊框：帶動態島的 iPhone、Android 手機、iPad、MacBook Pro、帶分頁列和網址列的瀏覽器視窗，或帶支架的桌面顯示器。每種邊框都按該裝置真實的螢幕比例繪製，因此您匯出的就是截圖在實機上的樣子。邊框畫在您自己瀏覽器分頁裡的畫布上，這意味著尚未發布的應用程式或內部儀表板的截圖不會離開您的電腦。

人們最常用的三種邊框

邊框是給讀者的捷徑：在他們還沒讀截圖裡任何一個字之前，就能一眼看出這是手機應用、網頁還是桌面工具。

裁切計量條：多數樣機工具都會漏掉的部分

裝置螢幕有固定形狀。iPhone 螢幕是 1179×2556，大約 9:19.5，而您截到的圖幾乎從不會剛好是這個比例。多數樣機產生器會悄悄放大圖片直到鋪滿螢幕，再丟掉超出邊緣的部分，於是您往往要等到發佈之後，才發現價格表底部已經不見了。

這個工具會把它量出來。在鋪滿螢幕模式下，適配按鈕下方的計量條會報告邊框正好遮住了截圖的百分之幾，數字升高時條會從綠色變成紅色。如果比您能接受的還高，有兩條出路：

• 平移。滑桿沿溢出的軸向移動可見範圍，因此您可以保留頁首、中段或頁尾，而不是接受置中裁切。
• 完整顯示。截圖會縮小到每一個像素都落在螢幕內，剩餘條帶用您選擇的顏色填滿。不會裁切，代價是上下或左右會出現可見色帶。

經驗法則：裁切大約低於 8% 時讀者看不出來，8% 到 25% 只要平移保住主體就可以，超過 25% 就應改按裝置寬高比重截，或切換到完整顯示。

選哪種邊框，用什麼解析度

達到或超過這些像素尺寸的截圖，在任何匯出尺寸下都會保持清晰。較小的會被放大，最先變糊的是截圖裡小字的反鋸齒。

如何使用裝置樣機產生器：逐步操作

1. 加入截圖：把 PNG 或 JPG 拖到上傳區，點選瀏覽，或按 Ctrl+V 從剪貼簿直接貼上。
2. 選擇裝置邊框：iPhone、Android、iPad、MacBook、瀏覽器或顯示器。手機和平板邊框還可以在直向和橫向之間切換。
3. 查看裁切計量條：如果隱藏太多，拖動平移滑桿，或切換到完整顯示以免遺失內容。
4. 設定邊框樣式：設定邊框顏色、背景、邊距、陰影和反光。在瀏覽器邊框上，自行輸入分頁標題和網址。
5. 匯出：選擇匯出尺寸，然後下載 PNG 儲存樣機，或複製圖片貼到貼文中。

實用技巧

• 能按裝置寬高比截圖就盡量這樣做。擷取前把瀏覽器視窗調成 1179×2556，裁切計量條會顯示 0%，樣機也是像素級對齊。
• 網址很重要時用瀏覽器邊框。在網址列輸入自己的網域，不用另加說明文字就能把品牌放進圖裡。
• 邊距保持在 6% 到 12%。更小則裝置會貼到貼文邊緣；更大則動態牆裡螢幕會看不清。
• 讓邊框顏色配合截圖。深色模式截圖用太空黑，淺色截圖用銀色或鈦金屬；瀏覽器外觀列會自動跟隨同一選擇。
• 文字多的螢幕把反光調低。輕微光澤讀起來像玻璃，過強則像圖庫照片，還會擋住文案。
• 投影片用透明匯出。NONE 背景會給出帶陰影的懸浮裝置，可直接放到任何投影片或主視覺區塊。

隱私

一切都透過 HTML5 canvas API 發生在瀏覽器分頁裡。截圖從本機物件 URL 讀取，畫進邊框，再由瀏覽器本身編碼為 PNG。不會上傳、儲存或傳輸任何圖片，頁面載入完成後，即使沒有網路連線，工具也能繼續使用。

常見問題

我的截圖會上傳到伺服器嗎？

不會。裝置邊框由您自己瀏覽器分頁中的 HTML5 canvas API 繪製，截圖從本機物件 URL 讀取。不會傳送到任何地方，因此尚未發布的應用程式、內部儀表板或客戶專案的樣機都留在您的電腦上。頁面載入完成後，即使沒有網路連線，工具也能繼續使用。

有哪些裝置邊框？

共六種：帶動態島的 iPhone、帶打孔鏡頭的 Android 手機、iPad Pro、帶瀏海和底座的 MacBook Pro、帶分頁列和網址列的瀏覽器視窗，以及帶支架的桌面顯示器。每種邊框都使用該裝置真實的螢幕比例，因此這裡做出的樣機與截圖在實機上的樣子一致。

我的截圖和裝置螢幕形狀不一樣，會怎樣？

這正是裁切計量條的用途。鋪滿螢幕會放大截圖直到鋪滿整塊螢幕，超出邊緣的部分會被裁掉，計量條會告訴您被隱藏的精確百分比。平移滑桿隨後沿被裁切的軸向移動可見範圍，以便保留重要部分。完整顯示會縮小截圖直到全部進入螢幕，並用您選擇的顏色填滿剩餘條帶，因此不會遺失任何內容。

截圖應該用什麼解析度？

配合您正在套用的裝置：iPhone 為 1179×2556，Android 手機為 1080×2400，iPad 為 1668×2388，MacBook 為 3024×1964，瀏覽器視窗為 1440×900，顯示器為 2560×1440。達到或超過這些尺寸會保持清晰。更小的截圖也能用，但會被放大，文字周圍會出現發虛的邊緣。

可以把裝置匯出到透明背景上嗎？

可以。選擇 NONE 背景色塊後，裝置周圍的留白會匯出為透明通道而不是顏色，邊框、螢幕和投影仍會繪製。下載 PNG 會保留該透明度，適合把樣機放到投影片、主視覺區塊或需要透出頁面自身背景的地方。

為什麼瀏覽器邊框會變成深色？

瀏覽器外觀列會跟隨您選擇的邊框顏色。選擇太空黑後，分頁列、工具列和網址列會切換為深色主題，以便配合深色模式截圖；較淺的邊框顏色則會使用淺色主題。分頁標題和網址是一般文字欄位，因此可以把產品名稱和網域寫進圖片。

圖像工具:

• 為圖片新增線條
• 為圖片新增文字
• ⬛ 寬高比計算機 新
• 圓形裁剪圖片 新
• 拼貼製作器
• 連點成畫生成器
• EXIF 資料檢視與移除工具 新
• 翻轉 GIF
• 翻轉圖片
• GIF 製作器
• 圖片打碼工具 熱門
• 圖片壓縮器 熱門
• 圖片裁剪器
• 圖像增強器
• 圖像調整器
• 圖片旋轉器
• 圖片分割器 熱門
• 圖片轉 ASCII 藝術轉換器 新
• 圖片轉SVG描摹器 新
• Lorem Picsum 佔位圖片產生器 新
• OCR / 圖片文字辨識 新
• 列印尺寸解析度計算機 (DPI/PPI)
• 圓角圖片產生器 新
• 螢幕截圖美化工具 新
• 裝置樣機產生器 新
• 為圖片添加陰影 新
• 為圖片添加邊框 新