用座標完成 DMG 版面配置

在第 1 篇中，我們介紹了 create-dmg 工具，並準備了僅含 .app 的暫存資料夾和背景圖片。

現在來到最後一塊拼圖——版面配置。DMG 視窗要多大、應用程式圖示和 Applications 捷徑各放在哪裡，這一切都由傳給 create-dmg 的座標來決定。本文將逐一設計這些座標。

與第 1 篇相同，FocusTimer、座標值等均為範例。

create-dmg 完整指令

首先來看完整指令的全貌。這是為範例應用程式 FocusTimer 1.0 製作 DMG 的指令：

create-dmg \
  --volname "FocusTimer 1.0" \
  --background build/dmg-background.png \
  --window-pos 200 120 \
  --window-size 600 400 \
  --icon-size 100 \
  --icon "FocusTimer.app" 175 190 \
  --hide-extension "FocusTimer.app" \
  --app-drop-link 425 190 \
  --no-internet-enable \
  "build/FocusTimer-1.0.dmg" \
  "build/dmg-stage/"

最後兩行是輸出和輸入：

• build/FocusTimer-1.0.dmg — 將要產生的 DMG 檔案路徑
• build/dmg-stage/ — 第 1 篇中僅存放了 .app 的暫存資料夾

其上以 -- 開頭的行是設計視窗和圖示的選項。我們逐一來看。

理解座標系

在看各選項之前，先搞清楚座標是如何運作的。

create-dmg 的位置座標均為 DMG 視窗內部的座標，單位是第 1 篇中介紹的點 (point)。

• 原點 (0, 0) 是視窗的左上角。
• X 向右增大，Y 向下增大。（注意：與數學座標系不同，Y 向下增大。）
• 若視窗大小設為 600 400，座標在橫向 0~600、縱向 0~400 範圍內移動。

圖示的位置座標指向該圖示的中心點，而非圖示的左上角。

各選項逐一解析

以下幾點值得特別說明：

--window-pos 與 --window-size — 這兩個容易混淆。--window-pos 是使用者開啟 DMG 時視窗出現在螢幕（桌面）的哪個位置，--window-size 是視窗本身的大小。座標設計中重要的是 --window-size。

--icon-size 100 — 視窗內的圖示以 100 點的大小繪製。設計背景圖片時也需要知道這個值，因為圖示佔據的 100 點（= 背景圖片中的 200 像素）空間需要在背景中留空。

--icon 與 --app-drop-link — 這兩個是視窗左右兩側的主角。--icon 是使用者需要拖動的應用程式圖示，--app-drop-link 是拖放目標——Applications 資料夾捷徑。使用 --app-drop-link 無需單獨建立符號連結，create-dmg 會自動建立並放置 Applications 捷徑。

--hide-extension — 不加此選項，圖示下方會顯示包含副檔名的 FocusTimer.app。隱藏後只會整潔地顯示 FocusTimer。

--no-internet-enable — 「網際網路啟用 (internet-enable)」是舊版 Safari 自動處理下載 DMG 的舊功能，現已棄用。新增此選項後，create-dmg 會跳過該處理步驟及相關警告。

座標設計 — 放置兩個圖示

現在來到核心部分。視窗大小設為 600 400，在其中決定應用程式圖示和 Applications 捷徑各放在哪裡。

範例指令中的設定如下：

• 應用程式圖示：--icon "FocusTimer.app" 175 190
• Applications 捷徑：--app-drop-link 425 190

這些數字的含義解析如下：

X 軸（橫向）— 175 與 425

視窗寬度為 600 點，其中心為 300。將兩個圖示分別置於 175 和 425，則兩者分別距中心向左 125、向右 125。即兩個圖示以中心為基準左右對稱排列。應用程式圖示在左、Applications 在右，形成「從左向右拖放」的自然方向感。

Y 軸（縱向）— 兩者均為 190

視窗高度為 400 點，其中心為 200。將兩個圖示置於相同的 190，則並排在同一高度，略高於正中心（200）。由於圖示名稱標籤在圖示下方，稍微上移後，包含名稱標籤在內視覺上恰好居中。

座標沒有唯一正確的答案。上述值只是「在 600×400 視窗中左右對稱並排放置兩個 100 點圖示」的一種均衡範例。請根據你自己的背景設計自由調整。

背景圖片與座標對齊

這裡再次用到第 1 篇的 @2x 慣例。

圖示座標（175,190、425,190）是視窗的點座標。而背景圖片是其 2 倍大小的 1200×800 像素。在背景圖片中繪製箭頭時，需要以視窗座標乘以 2 的像素座標來思考：

背景圖片像素座標 = 視窗點座標 × 2

將範例中兩個圖示轉換為背景圖片像素座標如下：

因此，在背景圖片（1200×800）上繪製視線引導箭頭時，必須繪製在兩個圖示位置——像素 (350, 380) 與 (850, 380) 之間。圖示大小為 100 點 = 200 像素，因此留出每個圖示佔據的 200 像素區域，將箭頭放在中間的空間裡即可。

使背景圖片的圖示與 create-dmg 的圖示座標以相同基準對齊，正是 DMG 設計的核心。若兩者錯位，箭頭就會偏離圖示或疊在圖示上。

驗證與微調

執行指令後，build/FocusTimer-1.0.dmg 會產生。請雙按開啟產生的 DMG 親自查看。

• 背景是否完整填滿了視窗？（若縮在角落 → 第 1 篇的 DPI 陷阱，用 sips 規範化為 144）
• 應用程式圖示和 Applications 是否恰好落在背景箭頭的兩端？
• 圖示名稱標籤是否被截斷或重疊？

座標第一次很難一步到位。稍微調整 --icon 和 --app-drop-link 的數值，重新執行指令，肉眼確認，反覆幾次即可。一旦確定好座標，之後幾乎不需要再改動。

每次發布重複使用 — 自動化

DMG 設計實質上是一次性工作。背景圖片和座標一旦確定，之後所有發布都使用完全相同的設定。

因此，建議將 create-dmg 呼叫作為發布建置腳本的一個步驟。腳本中通常是這樣的流程：

1. 將簽署、公證、staple 完成的 .app 複製到暫存資料夾（第 1 篇）
2. 複製背景圖片後用 sips 將 DPI 規範化為 144（防止第 1 篇的陷阱）
3. 使用上面設計的座標執行 create-dmg
4. 清理暫存資料夾等暫時性檔案

每次發布只有版本號碼（--volname 中的 1.0，輸出檔案名稱中的 FocusTimer-1.0.dmg）會變化，因此只需將那部分提取為腳本變數，就無需每次修改指令。背景圖片路徑和所有座標設為固定值。

建議讓腳本每次自動執行背景圖片的 DPI 規範化（sips）。這樣即使重新匯出設計原稿替換後忘記規範化 DPI，腳本也會始終自動修正。

系列小結

歷經兩篇的 DMG 設計全部完成。現在你已經準備好以下內容：

• ✅ (第 1 篇) create-dmg + .app 暫存資料夾 + @2x 且 DPI 規範化的背景圖片
• ✅ (第 2 篇) 視窗與圖示座標設計 + 背景像素座標與視窗點座標對齊 + 自動化

核心要點再次總結：

• DMG 視窗是 600×400 點，背景圖片是其 2 倍的 1200×800 像素（@2x）。
• 背景 PNG 的 DPI 必須規範化為 144 — 這樣背景才能精確填滿視窗。
• 圖示座標是視窗內部的點座標，背景圖示座標是其 2 倍的像素座標 — 以相同基準對齊兩者。
• 將確定好的設計放入建置腳本，每次發布時原樣重複使用。

一支小小的箭頭、幾個點的圖示位置偏差，都會影響使用者的第一印象。.dmg 視窗是使用者與你的應用程式初次相遇的地方，值得用心設計一次。

參考資料

• create-dmg — GitHub
• sips — macOS 指令手冊