用坐标完成 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 命令手册