使用者最先看到的介面

直接分發 macOS 應用程式時，使用者會下載 .dmg 檔案並雙按開啟。那一刻，一個 Finder 視窗彈出。這個視窗就是使用者與你的應用程式初次相遇的第一個介面。

一個製作精良的 .dmg 視窗通常長這樣——背景鋪著引導圖示，左側放著應用程式圖示，右側放著 Applications 資料夾捷徑。使用者將應用程式圖示拖到 Applications 一側即完成安裝。這種「拖放安裝」是 macOS 獨立開發者應用程式的事實標準安裝體驗。

這個視窗不會自動產生。背景圖片、視窗大小、圖示的位置和尺寸，都需要你親自指定。本系列介紹如何設計這個 .dmg 視窗。

本系列以已完成簽署、公證和 staple 的 .app 在手為前提，即處於分發前一步的應用程式。該過程在 Developer ID 直接分發系列中介紹過。.dmg 是直接分發（Developer ID）渠道的產出物，與 Mac App Store 渠道無關。

本系列將完成的內容

共兩篇，最終你將具備以下內容：

• (第 1 篇，本文) create-dmg 工具 + 僅含 .app 的暫存資料夾 + 背景圖片準備
• (第 2 篇) 視窗、圖示和拖放目標的座標設計 + 背景圖片與座標對齊 + 自動化

系列結束時，你應該已經準備好以下內容：

• 僅隔離存放 .app 的暫存資料夾
• 符合 @2x 視網膜螢幕慣例且 DPI 已規範化的背景圖片
• 視窗大小和圖示位置均以座標確定的 create-dmg 指令
• 可在每次發布時原樣重複使用的形態

範例應用程式 — FocusTimer

與前幾個系列相同，以虛構的 macOS 應用程式 FocusTimer（管理專注時間的簡單計時器應用程式）為例。FocusTimer、路徑、座標值等均為範例，實際使用時請替換為你自己的應用程式。

什麼是 DMG

DMG（.dmg）是 macOS 的磁碟映像檔 (disk image) 檔案。可以將其理解為一個「虛擬磁碟」——單個檔案內部完整包含了資料夾和檔案結構。使用者雙按 .dmg 後，macOS 會像掛載磁碟一樣將其掛載，其內容以 Finder 視窗的形式開啟。

在應用程式分發中使用 DMG 的原因：

• 應用程式（.app）實際上是一個資料夾。將資料夾直接發布到網際網路比較困難，但用 DMG 包裹後就變成了單個檔案。
• 可以在 DMG 視窗內放入 Applications 資料夾捷徑，引導使用者一次拖放即可完成安裝。
• 可以設計視窗的外觀——背景、圖示位置等，讓安裝體驗更加簡潔。

工具 — create-dmg

手動製作 DMG 需要經過多個步驟：用 hdiutil 建立映像檔、掛載、用 AppleScript 操作 Finder 視窗放置圖示，再卸載等。繁瑣且容易出錯。

create-dmg 是將這一流程濃縮為單條指令的開源工具。將背景圖片、視窗大小、圖示座標作為選項傳入，它就會產生完成的 .dmg。

在 Developer ID 直接分發系列第 1 篇中安裝前置工具時已經安裝過了。若尚未安裝，請透過 Homebrew 安裝：

brew install create-dmg

名為 create-dmg 的專案有兩個。本文使用的是透過 Homebrew 安裝的命令列工具（create-dmg/create-dmg）。請勿與選項名稱不同的另一個專案混淆。

第 1 步 — 僅含 .app 的暫存資料夾

DMG 中應該整潔地只放一個應用程式圖示。然而建置和匯出應用程式後，結果資料夾中除了 .app 之外，還有 DistributionSummary.plist、打包記錄等副產物檔案。直接將這個資料夾製作成 DMG，副產物也會暴露在視窗中。

因此，需要將 .app 單獨複製到空資料夾中隔離，以該資料夾作為製作 DMG 的原料。這個隔離用資料夾通常稱為暫存 (staging) 資料夾。

# 將 .app 單獨複製到空資料夾中，避免與副產物混在一起
DMG_STAGE="build/dmg-stage"
rm -rf "$DMG_STAGE"
mkdir -p "$DMG_STAGE"
cp -R "build/export/FocusTimer.app" "$DMG_STAGE/"

現在 build/dmg-stage/ 中只有 FocusTimer.app 一個檔案。製作 DMG 時將 create-dmg 指向此資料夾，視窗中就會整潔地只顯示應用程式圖示。（Applications 資料夾捷徑將在第 2 篇中透過 create-dmg 選項自動產生。）

第 2 步 — 準備背景圖片

DMG 視窗設計的核心是背景圖片。這裡是最容易卡住的地方，我們一步步來看。

畫布尺寸 — 為何是 1200×800

第 2 篇中會向 create-dmg 傳遞 --window-size 600 400 來設定 DMG 視窗大小。此時 600 和 400 的單位不是像素，而是點 (point)。點是 macOS 使用的邏輯座標單位。

在視網膜螢幕 (Retina) 顯示器上，1 點對應 2 個像素。因此，要完整清晰地填滿 600×400 點的視窗，背景圖片必須是其 2 倍大小，即 1200×800 像素。這就是 @2x（2 倍解析度）慣例。

總結：視窗是 600×400 點，背景圖片是 1200×800 像素。 這個 2 倍關係在第 2 篇設定座標時還會再次用到，非常重要。

背景中繪製什麼

這裡糾正一個常見誤解：背景圖片中不要繪製應用程式圖示或 Applications 資料夾圖示。 這些圖示由 create-dmg 作為實際檔案放置在視窗上（第 2 篇）。

背景圖片中只放裝飾和引導元素：

• 從應用程式圖示指向 Applications 資料夾的箭頭 — 最常見的設計，引導使用者的視線和手「向這個方向拖放」。
• 如有需要，可加上「拖到此處」等簡短引導文字
• 品牌色或淡淡的背景紋理

也就是說，背景圖片是**「留空圖示放置位，只繪製連接兩者的引導線的圖」**。左右各留出圖示將要佔用的位置（第 2 篇中各為 100 點 = 200 像素），在中間放置箭頭。

關鍵陷阱 — DPI

背景圖片中最常踩到的陷阱是 DPI（每英吋像素數）。

用圖像編輯器匯出 PNG 時，檔案中除了像素數（1200×800）之外，還會儲存 DPI 值。Finder 在繪製 DMG 背景時會讀取這個 DPI，反算出「該圖片是多少點的尺寸」。計算大致如下：

點尺寸 = 像素數 ÷ (DPI ÷ 72)

• 若 DPI 為 144：1200 ÷ (144 ÷ 72) = 1200 ÷ 2 = 600 點。恰好填滿視窗（600 點）。✅
• 然而，某些圖像編輯器（如 Pixelmator Pro）匯出時會嵌入任意 DPI 值（如 338）。若 DPI 為 338：1200 ÷ (338 ÷ 72) ≈ 256 點。比視窗（600 點）小得多，背景就會縮小成一團，塞在視窗左上角。❌

像素數同樣是 1200×800，卻因為一個 DPI 值導致背景顯示異常。第一次遇到時真的很難找到原因。

解決方案是將匯出 PNG 的 DPI 強制統一為 144。macOS 內建的 sips 指令一行即可搞定：

sips -s dpiWidth 144 -s dpiHeight 144 dmg-background.png

執行這一行後，無論編輯器嵌入了何種 DPI，都會被設為 144，1200×800 像素將被準確解讀為 600×400 點。

要點 — 背景圖片 ① 製作為 1200×800 像素，② 匯出後用 sips 將 DPI 規範化為 144。遵守這兩點就能避開 DPI 陷阱。

第 1 篇小結

跟到這裡，你現在已經準備好以下內容：

• ✅ 安裝了 create-dmg 工具，並了解其作用
• ✅ 僅隔離存放 .app 的暫存資料夾（build/dmg-stage/）
• ✅ 以 1200×800 像素製作且 DPI 已規範化為 144 的背景圖片

素材已經準備就緒。但還沒有一個視窗來顯示背景圖片並放置圖示。視窗要多大、應用程式圖示和 Applications 捷徑各放在哪裡——這一切都由傳給 create-dmg 的座標來決定。

下一篇將逐一設計這些座標，介紹如何讓背景像素座標與視窗點座標對齊以使背景中的箭頭恰好落在兩個圖示之間，以及如何自動化整個流程以在每次發布時重複使用。