MockUPhone 在各種裝置螢幕上顯示產品畫面，支援最新 iPhone X

經常會在各種軟體公司、應用程式或產品官網看到畫面效果，為了吸引使用者目光，也會以裝置內顯示方式呈現，同時還能增進網頁質感，但其實這些圖片多半不是實際拍攝，而是透過一些模板（Mockups）組合而成，不僅在製作上更為簡便，現在也有線上工具可直接將圖片整合到圖庫素材，例如我個人最常使用的 Smartmockups 協助我製作出更引人入勝的文章首圖，或是 Magic mockups、Dimmy.club 能將螢幕擷圖或應用程式畫面放入裝置螢幕中。

本文要推薦一款類似的免費服務「MockUPhone」，這個工具提供 iOS、Android、Windows Phone、平板、筆記型電腦、桌機和電視在內等眾多裝置的模型（Mockup），包括最新的 iPhone X、iPhone 8 及 Google Pixel 也在其中。

MockUPhone 的用途是什麼呢？簡單來說，選擇你要使用的裝置，然後將圖片上傳（例如網頁或應用程式畫面擷圖），即可將畫面「嵌入」裝置螢幕。

顯然這些圖片都會被加工、應用到網頁開發或其他專案中，因此 MockUPhone 產生的圖片是完全去背的透明背景圖，讓圖片得以被使用在更多不同顏色的背景，使用者不用自己去除背景，非常實用，製作出的圖片畫質很高，而這項服務完全免費，無須註冊就能使用！

網站名稱：MockUPhone
網站鏈結：https://mockuphone.com/

使用教學

STEP 1

開啟 MockUPhone 網站，可以從首頁上方的圖片看到 MockUPhone 產生的範例效果，底下有 iPhone X、iPhone 8 和 Google Pixel 按鈕可快速跳到特定裝置。

網站利用不同平台來分類裝置，除了智慧型手機、平板電腦，也有一般電腦和電視，看了一下 Apple 產品線確實很完整，目前最早的是 iPhone 5，其他像 iPhone SE、iPhone 6 Plus、iPhone 7 Plus 等等也都能從網站中找到。

Android 部分則有目前最新的 Google Pixel、Galaxy、HTC One、Moto 和 Nexus。將游標移動到裝置圖片上方，會出現直立和橫式兩種不同的效果。

STEP 2

點擊選取你要使用的裝置後，將圖片拖曳到網站虛線框，要特別注意為了符合最佳效果，盡量使用提示的圖片長寬，而根據裝置螢幕大小不同，也會出現不一樣的數值，例如 iPhone X 就會指定使用 1125 x 2436px 大小的圖片，否則若圖片尺寸不符，可能會讓產生的圖看起來不太正確。

如果上傳的圖片尺寸和 MockUPhone 提示尺寸不符，網頁會出現一個紅色驚嘆號，雖然它也會盡量讓圖片可以放入裝置螢幕中，不過效果可能會不盡理想，因此還是盡量將圖片縮放到網頁提示的圖片大小。

STEP 3

下圖就是我將網頁擷圖畫面放入 MockUPhone 提供的裝置中產生的圖片，可以看到我透過 iPhone 6 抓圖（4.7 吋），但 iPhone X 是 5.8 吋，放進去後上下會有間距。

STEP 4

那麼我就換成以 MacBook 來測試一下顯示效果，一樣在電腦上先把圖片擷取、裁切完整，選擇網站推薦的尺寸 1920 x 1200px，果然放入 MacBook 模型後產生的圖片成果非常棒，看起來就像在電腦上直接開啟網頁。

點擊下方的「Download My Mockups」藍色按鈕可以打包、下載產生的圖片（有些裝置可以一次產生數張圖），不過必須輸入你的 Email 才能收到下載鏈結。如果不想那麼麻煩，更快的方法是直接保存網頁上方產生的預覽圖，一樣也是透明背景。