Clay Mockups - iPhone 12 設備模型免費下載，提供 Sketch 與 Figma 格式免費取得完整原始碼檔案

Clay Mockups 是一套免費的 iPhone 12 Clay 風格裝置模型，支援 Sketch 與 Figma 雙格式，個人與作品集用途完全免費，從 Gumroad 下載即可使用。

很多設計師做完整版 App 或網頁介面後，直接貼截圖到作品集或提案簡報裡，畫面看起來就是少了一截：沒有裝置外框的包裝，再好的 UI 也顯得單薄。裝置模型（Mockup）就是把你的畫面放進手機、平板或筆電的外殼裡，讓展示圖立刻有完整感。Clay Mockups 由設計社群 Hype4Academy 製作，專門提供 iPhone 12 系列的 Clay 風格模型，檔案同時支援 Sketch 與 Figma。不管你是要放在 Behance 作品集、客戶提案簡報，還是社群貼文的宣傳圖，都能直接套用。如果你平常也會用 Adobe Photoshop Express 做基本圖片處理，搭配向量格式的 Mockup 會讓展示流程更順暢。

Clay Mockups 是什麼？免費 iPhone 裝置模型設計資源

Clay Mockups 是 Hype4Academy 在 Gumroad 平台上發布的開源免費專案，提供自行設計的 iPhone 12 系列裝置模型。這組模型採用 Clay（素面材質）風格，視覺乾淨俐落，沒有多餘的反光或陰影，讓 UI 設計成為畫面焦點。使用方式很直接：把你的畫面截圖拖到名為 screen_mask_390x844 的遮罩圖層上方，調整間距即可完成。

截至 2026 年 5 月，這個專案仍在 Gumroad 上開放下載（來源：Hype4Academy Gumroad 官方頁面）。檔案內容包含 Sketch（.sketch）與 Figma 兩種格式，Mac 使用者用 Sketch、跨平台協作用 Figma 都能直接匯入。如果你在找更多設計素材，Freebiesbug 收錄了大量 PSD、Illustrator、Sketch、Figma 的免費資源，更新頻率很高。另一個值得收藏的是 Free Deca UI Kit，這組簡潔風格的 UI 元件庫同樣提供 Figma 與 Sketch 格式，和 Clay Mockups 搭配能快速搭建完整的設計展示頁面。

Clay 風格 Mockup 的設計美學與特色

「Clay 風格」指的是表面平滑、沒有金屬光澤、也沒有複雜環境反射的素面裝置模型，像一塊陶土做成的手機外型，乾淨純粹。這種風格近年在設計圈很受歡迎，特別適合展示 UI 介面設計，因為觀看者的注意力會集中在畫面內容本身，不會被裝置的材質效果帶走。

相比寫實風格的 Mockup（有逼真反光、陰影、倒影），Clay 風格有幾個實際優勢：檔案體積更小、渲染速度更快、修改彈性更高，而且幾乎能融入任何風格的簡報或作品集版面。它特別適合搭配極簡主義設計、Material Design 語言，或是任何想強調內容而非裝置本身的展示場景。舉例來說，深色模式的 App 介面用 Clay Mockups 展示，深色 UI 會更突出，不會被裝置的材質反光干擾。

如果你對不同設計風格有興趣，Neumorphism CSS Generator 能幫你線上產生新擬態風格的 UI 元件，直接在瀏覽器裡調整參數就能看效果。想為展示畫面增添立體感，3D Book Image CSS Generator 可以免費建立 3D 書本展示效果，對電子書封面或報告封面很實用。如果你還在找適合展示作品的網站架設方案，我們的 WordPress 主題挑選指南有詳細說明。

Sketch 與 Figma 格式差異：哪種適合你？

Clay Mockups 同時提供 Sketch 和 Figma 兩種格式，內容完全相同，差別只在於你習慣用哪個設計工具。以下是兩者的核心比較：

比較項目	Sketch	Figma
平台支援	僅 macOS	跨平台（瀏覽器即可）
費用	付費訂閱制	免費方案可用
協作能力	需透過第三方工具	內建即時多人協作
元件系統	Symbol（成熟穩定）	Component + Variant
離線使用	完整支援	需網路連線（桌面版可部分離線）
學習曲線	中等	偏低，介面直覺

兩者在處理 Mockup 檔案時的體驗差不多，因為 Clay Mockups 主要以向量元素構成，不管用哪種工具開啟都能順利縮放和編輯。如果你還在猶豫要學哪個工具，建議從 Figma 開始：免費就能上手，而且越來越多設計資源優先支援 Figma 格式。像是 CSS.GG 提供了 700 多個開源圖標，同樣支援 Figma 格式下載；Flaticon 和 Icons8 都是收藏大量免費 Icons 的好選擇。在漸層背景方面，CSS Gradient 能幫你快速產生各種漸變色背景，搭配 Mockup 展示使用非常方便。

Clay Mockups 免費下載教學：Gumroad 取得完整檔案

取得 Clay Mockups 的流程只需三分鐘，完全免費也不需要綁定信用卡。專案放在 Gumroad 下載頁面上，以下是操作步驟：

前往專案頁面 — 打開瀏覽器進入 Clay Mockups 的 Gumroad 下載頁面，建議使用 Chrome 或 Safari 確保頁面顯示正常。
設定金額為 0 — 在頁面右側的金額欄位輸入「0」，點選「I want this!」按鈕，等同於免費取得資源。
輸入 Email — 系統會請你輸入 Email 地址，方便日後透過 Gumroad 後台隨時重新下載。完成後會收到確認信，裡面包含下載連結。
下載檔案 — 進入下載頁面後，會看到 Sketch 與 Figma 兩種格式的檔案可供下載，可以點選「全部下載」一次打包。建議搭配 Free Download Manager 處理較大的檔案，下載速度更穩定。

Gumroad 的好處是日後隨時可以用 Email 登入後台，查看所有過去取得過的資源並重新下載。如果你對其他免費資源有興趣，我們的 Udemy 免費課程懶人包也整理了不少限時免費的線上學習資源，從程式設計到 UI/UX 設計都有。

如何在 Sketch 與 Figma 中客製化 Clay Mockups

下載完之後，核心操作就是找到螢幕區域，把自己的 UI 設計替換進去。兩種工具的操作方式略有不同，但邏輯一樣。

Sketch 使用者的客製化流程

在 Sketch 中開啟 .sketch 檔案後，Clay Mockups 使用 Symbol 來管理裝置的各個元件。找到螢幕區域的 Symbol Override，把你的 UI 設計圖層拖曳進去替換即可。如果需要調整裝置顏色，修改 Symbol 中的填充色；要加陰影效果，在圖層樣式中加入 Shadow 屬性。Sketch 的 Symbol 系統很強大，在不破壞原始元件結構的情況下就能進行各種客製化。完成後如果需要對匯出的圖片做進階處理，AI Image Enhancer 可以免費增強圖片畫質與色彩。

Figma 使用者的客製化流程

Figma 的操作更直覺。開啟檔案後找到裝置的 Component，利用 Component Properties 功能就能快速替換螢幕內容。把設計畫面複製貼到對應的 Frame 中，Figma 會自動裁切至正確尺寸。背景色和裝置顏色都能直接在右側面板調整。Figma 的 Component 系統還支援 Variant 功能，如果模型檔案中包含多種裝置顏色或尺寸，直接在屬性面板切換即可。

不管用哪種工具，匯出時建議設定為 2x 解析度的 PNG 格式，在各種螢幕上都能保持清晰。如果你需要調整陰影效果的參數，CSS box-shadow examples 裡收錄了 82 種 Box-shadow 樣式，參數邏輯（X 軸偏移、Y 軸偏移、模糊半徑、擴散半徑）與設計工具完全相通，拿來當參考很方便。匯出後如果檔案太大，可以用 Compressor.io 壓縮圖片，支援 JPEG、PNG、SVG 等格式，壓縮比最高可達 90%，畫質損失幾乎看不出來。如果想把展示圖轉換成其他格式（例如 PNG 轉 WebP），AnyWebP 是免費的線上圖片轉檔工具，能快速完成格式轉換。

除了基本的螢幕替換，你也可以嘗試在 Mockup 背景加入品牌色的漸層效果，或使用多個裝置模型以不同角度排列，營造層次感更豐富的展示畫面。有些設計師還會在裝置周圍加上浮動的 UI 元件或手指示意圖，讓整個畫面更具動態感。這些額外的設計點綴不需要太複雜的技巧，善用 Figma 或 Sketch 內建工具就能達成。如果你需要確保網站上的圖片載入速度不會拖慢整體效能，可以參考我們的 WordPress 速度優化教學。

Mockup 在設計工作流程中的五大應用場景

很多人下載了 Mockup 之後只拿來放在作品集裡，但其實裝置模型在整個設計工作流程中有非常多實用場景。以下是五個最常見的應用：

App UI 設計提案 — 把 App 介面設計放進 iPhone 裝置模型中，讓客戶或團隊成員直觀感受產品在實際裝置上的效果，比單純展示平面截圖更有說服力。如果是網頁設計，搭配 DemosWP 測試網站工具快速預覽展示效果也是不錯的選擇。
作品集呈現 — 在 Behance、Dribbble 等設計社群平台上展示專案時，使用裝置模型包裝 UI 設計，能大幅提升作品的專業度與視覺吸引力。招募人員在看作品集時，最先注意到的往往就是整體的排版和展示品質。
客戶簡報與提案 — 把設計稿放入裝置模型中展示，能幫助非設計背景的客戶更快理解產品的最終呈現效果，減少溝通上的認知落差。
社群媒體行銷素材 — App Store 預覽圖、社群平台的宣傳貼文，都能用 Mockup 製作更具吸引力的視覺素材。搭配 Adobe Creative Cloud Express 或 DesignCap 這類線上設計工具，能快速產出專業的社群圖片。如果需要去背處理，Adobe Remove Background 或 Clipdrop Remove Background 都是免費好用的線上去背工具。
開發者文件與技術說明 — 在 API 文件或技術規格書中加入裝置示意圖，可以讓閱讀者更快理解產品的使用情境，特別適合需要向非技術人員說明的場合。搭配 Free Userpics Pack 的虛擬人物頭像，能讓使用者故事（User Story）更加生動具象。

如果你也需要為部落格文章或社群貼文製作封面圖，Coverview 是免費的部落格封面圖片產生器，跟 Mockup 搭配使用效果不錯。說到架站，挑選一個穩定的主機服務很重要，我們的 WordPress 虛擬主機推薦文章整理了多家主機方案的詳細比較。

授權說明：個人使用與商業授權的界線

在使用任何免費設計資源之前，搞清楚授權範圍很重要。Clay Mockups 的授權條款清楚寫在 Gumroad 專案頁面上：僅限於個人或作品集使用（personal and portfolio projects），不能直接用於商業項目。「個人使用」包含把自己的 UI 設計放入 Mockup 展示在個人作品集、Behance、Dribbble 等平台，或是用在學習和練習中，這些都不會有問題。但如果要用在客戶提案、付費課程教材、商業簡報，或任何涉及營利目的的場景，就需要先聯繫 Hype4Academy 團隊取得商業授權。

如果你需要完全不受限制的素材，可以考慮 CC0 授權的資源。像是 AltPhotos 提供的高品質免費圖片不需要署名也能自由使用，Freerange Stock 同樣提供專業級品質的可商用圖片。養成在下載任何素材時先確認授權條款的習慣，才能避免日後可能產生的版權爭議。

其他優質免費裝置模型資源推薦

雖然 Clay Mockups 是很優質的免費資源，但不同專案可能需要不同風格或不同裝置的模型。Clay Mockups 目前只涵蓋 iPhone 12 系列，如果你需要 iPhone 15 或 iPhone 16 等較新機型的 Clay 風格模型，Figma Community 上有設計師分享了對應版本，可以直接搜尋取得。以下是幾個值得收藏的免費裝置模型平台：

平台名稱	特色	支援格式	授權方式
Freebiesbug	設計師公認的素材寶庫，更新頻率高	PSD、Sketch、Figma	依各資源而定
Freepik	超過 2000 萬個素材，品質高	PSD、AI、Sketch	免費需標注來源
Figma Community	官方社群平台，直接複製使用	Figma 原生	依作者設定
Pexels	高品質圖庫，附帶裝置展示照	JPG、PNG	CC0 完全免費
Pixabay	支援中文搜尋，素材種類多元	JPG、PNG、向量	CC0 完全免費

Freebiesbug 是設計師必備的書籤之一，收錄了大量 PSD、Illustrator、Sketch、Figma 格式的免費素材，搜尋「mockup」就能找到豐富的資源。Freepik 擁有超過 2000 萬個免費圖片和矢量素材，也包含不少 Mockup 範本。如果你需要更多免費圖庫資源，我們整理的 47 個可商用無版權免費圖庫懶人包涵蓋了圖片、圖示、圖標、素材和背景等各類資源。而 Pexels 和 Pixabay 都支援中文關鍵字搜尋，且都是 CC0 授權，可以安心用於商業專案。

適合誰、不適合誰

Clay Mockups 適合以下使用者：

UI/UX 設計師：需要快速把介面設計包裝成裝置展示圖，用在作品集或社群平台上。
接案設計師：想在提案時讓客戶看到更直觀的效果，但只限於個人展示用途（商業提案需另外取得授權）。
設計系學生：建立作品集時需要專業質感的裝置展示，但預算有限。

以下情況可能不適合直接使用：

需要商業授權的人：如果你的用途涉及營利（客戶提案、付費課程、商業簡報），必須先聯繫 Hype4Academy 取得授權。
需要最新 iPhone 機型外觀：Clay Mockups 只提供 iPhone 12 系列，如果需要展示 Dynamic Island 等 iPhone 14 Pro 以後的特徵，需要找其他資源。
需要非 Apple 裝置：這個專案只涵蓋 iPhone，如果你需要 Android、iPad、MacBook 等裝置模型，要到 Figma Community 或 Freepik 等平台搜尋。

設計師作品集呈現的實用建議

有了好的 Mockup 之後，怎麼用它來呈現作品也是一門學問。以下是幾個讓作品集更具專業感的建議：

保持風格一致 — 在整個作品集中使用同一種 Mockup 風格（例如全部都用 Clay 風格），避免混搭造成視覺雜亂。一致性是專業感的基礎。
注意裝置角度 — 選擇 1 到 2 種固定的裝置角度（正面或微微傾斜），讓所有專案的呈現方式保持一致，整體看起來更協調統一。
背景選擇 — 純色背景是最安全的選擇，如果想要更有變化，可以使用漸層或微妙的紋理背景。Cool Backgrounds 提供了多種免費背景產生器；CSS Background Patterns 提供了 21 種以上的免費背景樣式可直接套用。
適度使用 — Mockup 是輔助工具，不是主角。UI 設計才是真正的作品，不要過度依賴裝置模型來掩蓋設計本身的不足。

在配色方面，Color Palette Generator 是一款好用的免費線上調色盤產生器，一鍵就能產生 5 種搭配套色。PaletteMaker 則能讓你直接預覽配色在實際範例上的效果。如果你需要分析網站使用的色彩搭配，Alwane 這個免費色碼分析工具可以透過 HTML 與 CSS 抓取網站使用的色系。而在品牌設計方面，DesignEvo 可以免費線上設計 Logo，內建超過 10,000 種範本可供挑選。

如果你想把作品集架設在自己的網站上，Bluehost 是一個值得考慮的虛擬主機選擇，WordPress 官方推薦且支援一鍵安裝。如果需要更完整的主機比較資訊，我們的 SiteGround 主機評價文章有詳細的方案分析。對於想要找其他穩定主機選擇的人，Hostinger 主機教學也有詳細的方案介紹和使用指南。

Mockup 素材管理與整理技巧

很多設計師下載了一堆素材卻不好好整理，等到真正需要用的時候找不到檔案。這裡分享幾個實用的素材整理方法：

第一個建議是按照「裝置類型」來分類資料夾，分成 iPhone、iPad、MacBook、Android、Watch 等大類別，每個類別底下再依據風格（Clay、Flat、Realistic、Isometric）細分。第二個建議是在每個素材資料夾中放一個簡單的 README 文字檔，記錄素材的來源網址和授權類型，日後需要確認授權時就不用從頭找起。第三個建議是善用雲端同步，把整理好的素材庫放在 Google Drive、Dropbox 等穩定的雲端空間中，不管在哪台電腦上工作都能隨時存取。

如果你打算建立一個自己的設計資源網站來分享整理好的素材，A2 Hosting 搭配 WordPress 是一個不錯的起點，而一個穩定的主機環境是基礎，可以參考我們整理的 WordPress 佈景主題推薦來選擇。

下一步：三個可以立刻做的事

下載 Clay Mockups — 前往 Gumroad 下載頁面，將金額設為 0 即可免費取得 Sketch 與 Figma 雙格式檔案。整個流程不超過三分鐘。
選一個專案試做 — 挑一個你最近完成的 UI 設計，用 Clay Mockups 包裝成裝置展示圖。判斷標準：展示圖看起來是否比直接貼截圖更有完整感？如果是，就值得繼續使用。
確認授權範圍 — 如果你的用途涉及商業場景，先到 Gumroad 頁面確認授權說明，必要時聯繫 Hype4Academy 取得商業授權。個人作品集使用則不需要額外步驟。

Clay Mockups 常見問題 FAQ

Clay Mockups 支援哪些 iPhone 型號？

截至 2026 年 5 月，Clay Mockups 主要提供 iPhone 12 系列的裝置模型，包含 iPhone 12、iPhone 12 Pro、iPhone 12 Mini 等版本。雖然 iPhone 12 之後蘋果又推出了 iPhone 13 到 iPhone 16 等新機型，但由於正面螢幕比例差異不大，這組模型依然適用於大多數展示場景。如果你的專案需要展示 Dynamic Island 等較新機型的外觀特徵，建議到 Figma Community 搜尋對應的更新版本。

可以免費用在客戶提案中嗎？

不行。Clay Mockups 的授權明確限制僅供個人或作品集使用。如果要用在客戶提案或任何商業用途中，必須先向 Hype4Academy 團隊聯繫取得商業授權。一般來說，只要不是大規模商業使用，取得授權的門檻不會太高。

Sketch 與 Figma 檔案可以互相轉換嗎？

可以。Figma 原生支援匯入 .sketch 檔案，所以你可以直接在 Figma 中開啟 Sketch 格式的 Clay Mockups 檔案，大多數圖層、遮罩和元件都能正確轉換。反向的話也有第三方工具和外掛可以協助將 Figma 檔案轉換為 Sketch 格式，不過可能會有少數圖層屬性的轉換差異需要手動調整。