最後更新時間：2025-11-22，由 Dean 更新 
在製作內容時，有時候需要放一些手機螢幕截圖的畫面，但往往直接放上去，又沒有進行壓縮或剪裁的話，圖片會很大、排列不整，非常難閱讀，很不美觀。
雖然我們不是網站設計專家，但如果能夠簡單為自己的手機截圖畫面加上一個手機的模板，那麼在網站上顯示的整體感覺不但美觀，專業感也會更加提升。
可以看下方兩者的比較：
可以看得出來，有套手機截圖模板的圖，在整體上會比較有美感，閱讀起來也會比較舒適。
這篇文章，將會為各位介紹幾款能夠為手機截圖加上外框的工具軟體，讓大家的部落格都能變得美觀且好閱讀，在 SEO 使用者體驗的部份有所加分。
2個手機截圖加框的模板工具
以下是 2 套手機截圖加框的模板工具的比較：
| 名稱 | 特色 | 缺點 |
|---|---|---|
| MockUPhone | 有非常多種裝置樣式可選 | 無法即時預覽且為壓縮檔 |
| MockupPhotos | 可以插入截圖的背景樣版 | 需登入且部份模板要付費 |
MockUPhone – 不同型號外框
MockUPhone 應該是最多人知道的一款手機截圖模板工具，它最大的特色就是有非常多種裝置外框可以使用，除了手機 iOS、Android 外，連穿戴裝置、電腦畫面、電視畫面都有。
且裝置模板又支援多種型號，像是光 iOS 就有 iPad、iPad Mini、iPad Air 4、iPad Pro、iPhone 12、iPhone 12 mini、iPhone 12 pro、iPhone 12 po max、iPhone XR、iPhone SE。
其中每款又有不同顏色可以套用，如果有想要使用但沒有在網站上的模板，還可以填寫「回饋表單」，讓團隊知道你的需求，並增加模板。
它在套用模板時，尺寸會有規定，各模板都會有制定的尺寸，如果你套用一張不合尺寸的截圖，系統就會跳出警示，不過點下方按鈕還是可以繼續製圖，如下圖：
它在使用上我覺得唯一不方便的部份，是它無法即時預覽，且下載檔是壓縮檔，等於每次製作完圖片下載下來後，還得解壓縮才看得到成品狀態，若有問題又必須重新製圖一遍。
MockupPhotos – 眾多背景模板
MockupPhotos 跟 MockUPhone 一樣有非常多的模板可以套用，但它更特別的是，它不是只有手機的外框套版，而是可以把截圖套用到各種不同的背景中。
舉例來說，你今天文章中如果想要呈現一個訂房 APP，那麼就可以把 APP 畫面截圖套用到一個旅者拿著手機的背景圖中，讀者讀起來就會非常有帶入感。
它的使用方法不難，進入首頁可以直接在搜尋框中搜尋想要的背景圖，找到圖片後進入到編輯畫面，接下來就直接點圖片中可以替換的部份，就能夠直接上傳截圖了。
上傳完照片就會立即看到後製後的圖片樣貌，如果沒問題的話，下方可以直接進行下載。下載的部份可以選擇檔案格式、壓縮品質、圖片尺寸，非常客製化。
不過要注意的是，你必須先註冊登入平台，才能夠下載檔案。且有些檔案下載是需要另外付費的，所以在選擇模板時，要特別注意一下。
套用模板後的進階呈現方式
當使用了手機截圖模板後，此時放在網站上呈現起來其實就已經不錯看了，但如果你想要讓你的圖片更加附有設計感，那麼有幾個搭配套版的進階呈現方式，可以參考看看。
#1 為截圖加上背景設計
簡單來說，就是不要讓手機截圖單獨呈現，可以把套用過模板的截圖，再把它放在一個有底色的背景上，整體顯示就會更專業，且富有設計感。
#2 多張截圖變成一張圖
通常如果只放一張手機截圖在頁面上，可能還是會顯得有點單調，而且如果是很多張直向排列的話，即便是有套上手機截圖外框，也會非常亂。
所以若是能將兩張或兩張以上已套用模板的截圖，製作成一張大圖，那麼呈現起來會比較好看些。
