Hoàn Thiện Layout DMG Bằng Tọa Độ
Ở Phần 1, chúng ta đã giới thiệu công cụ create-dmg và chuẩn bị thư mục staging chỉ chứa .app cùng với ảnh nền.
Bây giờ là mảnh cuối cùng, layout. Mở cửa sổ DMG lớn bao nhiêu, và đặt biểu tượng ứng dụng và phím tắt Applications ở đâu — tất cả điều này được quyết định bởi tọa độ bạn truyền cho create-dmg. Trong bài viết này, chúng ta sẽ thiết kế những tọa độ đó từng cái một.
Như ở Phần 1,
FocusTimer, giá trị tọa độ, v.v. đều là ví dụ.
Lệnh create-dmg Đầy Đủ
Trước tiên, hãy xem toàn bộ lệnh hoàn chỉnh. Đây là lệnh tạo DMG cho ứng dụng mẫu FocusTimer 1.0:
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/"
Hai dòng cuối cùng là đầu ra và đầu vào:
build/FocusTimer-1.0.dmg— đường dẫn của file DMG sẽ được tạobuild/dmg-stage/— thư mục staging chỉ chứa.apptừ Phần 1
Các dòng bắt đầu bằng -- ở trên là các tùy chọn thiết kế cửa sổ và biểu tượng. Hãy xem xét từng cái.
Hiểu Hệ Tọa Độ
Trước khi xem các tùy chọn, hãy nắm rõ cách hoạt động của tọa độ.
Tất cả tọa độ vị trí của create-dmg đều là tọa độ bên trong cửa sổ DMG. Đơn vị là điểm (point) được giải thích ở Phần 1.
- Gốc
(0, 0)là góc trên trái của cửa sổ. - X tăng khi bạn di chuyển sang phải, và Y tăng khi bạn di chuyển xuống dưới. (Lưu ý rằng, khác với đồ thị toán học, Y tăng xuống phía dưới.)
- Nếu bạn đặt kích thước cửa sổ là
600 400, tọa độ nằm trong phạm vi0–600theo chiều ngang và0–400theo chiều dọc.
Tọa độ vị trí của một biểu tượng trỏ đến tâm của biểu tượng đó — không phải góc trên trái, mà là chính giữa.
Các Tùy Chọn, Từng Cái Một
| Tùy chọn | Giá trị (ví dụ) | Ý nghĩa |
|---|---|---|
--volname | "FocusTimer 1.0" | Tên volume hiển thị khi DMG được mount |
--background | build/dmg-background.png | Ảnh nền cửa sổ (cái đã chuẩn bị ở Phần 1) |
--window-pos | 200 120 | Vị trí cửa sổ mở trên màn hình (X, Y) |
--window-size | 600 400 | Kích thước của cửa sổ (rộng, cao — theo điểm) |
--icon-size | 100 | Kích thước các biểu tượng bên trong cửa sổ (theo điểm) |
--icon "FocusTimer.app" | 175 190 | Vị trí của biểu tượng ứng dụng (X, Y trong cửa sổ) |
--hide-extension "FocusTimer.app" | — | Ẩn phần mở rộng .app trong tên biểu tượng |
--app-drop-link | 425 190 | Vị trí của phím tắt thư mục Applications (X, Y trong cửa sổ) |
--no-internet-enable | — | Tắt tính năng “internet-enable” không còn được dùng |
Một số đáng được gọi ra riêng.
--window-pos vs. --window-size — hai cái này dễ nhầm lẫn. --window-pos là cửa sổ xuất hiện ở đâu trên màn hình (desktop) khi người dùng mở DMG, trong khi --window-size là kích thước của chính cửa sổ đó. Cái quan trọng cho thiết kế tọa độ là --window-size.
--icon-size 100 — các biểu tượng bên trong cửa sổ được vẽ với kích thước 100 điểm. Bạn cũng cần biết giá trị này khi thiết kế ảnh nền, vì không gian 100 điểm mỗi biểu tượng chiếm (= 200 pixel trong ảnh nền) phải được để trống trong nền.
--icon và --app-drop-link — đây là hai ngôi sao trái và phải của cửa sổ. --icon là biểu tượng ứng dụng người dùng phải kéo, và --app-drop-link là phím tắt thư mục Applications đóng vai trò điểm đến thả vào. Với --app-drop-link, không cần tạo symbolic link riêng — create-dmg tạo và đặt phím tắt Applications cho bạn.
--hide-extension — không có cái này, biểu tượng hiển thị đầy đủ FocusTimer.app với phần mở rộng bên dưới. Ẩn nó đi làm cho nó chỉ hiển thị gọn là FocusTimer.
--no-internet-enable — “internet-enable” là tính năng cũ mà Safari cũ tự động xử lý DMG đã tải xuống; ngày nay không còn được dùng nữa. Truyền tùy chọn này làm cho create-dmg bỏ qua bước xử lý đó và cảnh báo liên quan.
Thiết Kế Tọa Độ — Đặt Hai Biểu Tượng
Bây giờ là phần cốt lõi. Chúng ta đặt kích thước cửa sổ là 600 400, vì vậy bên trong đó chúng ta quyết định đặt biểu tượng ứng dụng và phím tắt Applications ở đâu.
Trong lệnh ví dụ, chúng ta đặt chúng như sau:
- Biểu tượng ứng dụng:
--icon "FocusTimer.app" 175 190 - Phím tắt
Applications:--app-drop-link 425 190
Đây là ý nghĩa của các con số này:
Trục X (ngang) — 175 và 425
Chiều rộng cửa sổ là 600 điểm, và tâm của nó là 300. Đặt hai biểu tượng ở 175 và 425 đặt mỗi cái 125 về phía trái và 125 về phía phải so với tâm. Nói cách khác, hai biểu tượng được đặt đối xứng quanh tâm. Với biểu tượng ứng dụng ở bên trái và Applications ở bên phải, điều này tạo ra hướng tự nhiên của “kéo từ trái sang phải”.
Trục Y (dọc) — cả hai ở 190
Chiều cao cửa sổ là 400 điểm, và tâm của nó là 200. Đặt cả hai biểu tượng ở cùng 190 đặt chúng cạnh nhau ở cùng chiều cao, nằm hơi trên chính giữa (200). Vì nhãn biểu tượng được gắn bên dưới biểu tượng, việc nhích lên hơi một chút làm cho nó trông ở giữa về mặt thị giác khi đã bao gồm nhãn.
Không có một đáp án duy nhất cho tọa độ. Các giá trị trên chỉ là một ví dụ cân bằng để đặt “hai biểu tượng 100 điểm cạnh nhau và đối xứng trong cửa sổ 600×400”. Hãy tự do điều chỉnh theo thiết kế nền của bạn.
Căn Chỉnh Ảnh Nền Với Tọa Độ
Ở đây, quy ước @2x từ Phần 1 xuất hiện lại.
Tọa độ biểu tượng (175,190, 425,190) là tọa độ điểm của cửa sổ. Nhưng ảnh nền có kích thước gấp đôi — 1200×800 pixel. Khi bạn vẽ mũi tên trên ảnh nền, bạn phải nghĩ theo tọa độ pixel gấp đôi tọa độ điểm của cửa sổ.
Tọa độ pixel ảnh nền = tọa độ điểm cửa sổ × 2
Chuyển đổi hai biểu tượng từ ví dụ sang tọa độ pixel ảnh nền cho kết quả này:
| Phần tử | Tọa độ cửa sổ (điểm) | Tọa độ ảnh nền (pixel) |
|---|---|---|
| Tâm biểu tượng ứng dụng | (175, 190) | (350, 380) |
Tâm Applications | (425, 190) | (850, 380) |
Vì vậy khi bạn vẽ mũi tên hướng dẫn trên ảnh nền (1200×800), nó phải được vẽ giữa pixel (350, 380) và (850, 380) — các vị trí của hai biểu tượng. Vì kích thước biểu tượng là 100 điểm = 200 pixel, hãy để trống vùng 200 pixel mỗi biểu tượng chiếm và đặt mũi tên trong không gian giữa chúng.
Căn chỉnh artwork ảnh nền với tọa độ biểu tượng của create-dmg theo cùng một cơ sở tham chiếu là trái tim của thiết kế DMG. Nếu hai cái bị lệch, mũi tên sẽ chệch khỏi biểu tượng hoặc bị vẽ chồng lên chúng.
Xác Minh và Tinh Chỉnh
Khi bạn chạy lệnh, build/FocusTimer-1.0.dmg được tạo ra. Nhấp đúp vào DMG kết quả và mở nó.
- Ảnh nền có lấp đầy cửa sổ hoàn toàn không? (Nếu nó co cụm vào góc → đó là bẫy DPI từ Phần 1. Chuẩn hóa về 144 bằng
sips.) - Biểu tượng ứng dụng và
Applicationscó được đặt gọn ở hai đầu mũi tên nền không? - Nhãn biểu tượng có bị cắt hay chồng lên nhau không?
Tọa độ thường không khớp hoàn hảo trong lần thử đầu tiên. Chỉ cần lặp lại quá trình vài lần: điều chỉnh các con số trong --icon và --app-drop-link một chút, chạy lại lệnh, và kiểm tra bằng mắt. Khi bạn đã xác định tọa độ cuối cùng, bạn hiếm khi cần thay đổi chúng nữa.
Tái Sử Dụng Cho Mỗi Lần Phát Hành — Tự Động Hóa
Thiết kế DMG thực chất là công việc một lần. Sau khi bạn đã xác định ảnh nền và tọa độ, bạn tái sử dụng đúng các cài đặt đó cho mọi lần phát hành tiếp theo.
Vì vậy, tốt hơn là đặt lệnh create-dmg này vào một bước trong script build phát hành của bạn. Trong script, luồng thường trông như thế này:
- Sao chép
.appđã ký, công chứng và staple vào thư mục staging (Phần 1) - Sao chép ảnh nền rồi chuẩn hóa DPI về 144 bằng
sips(ngăn bẫy từ Phần 1) - Chạy
create-dmgvới các tọa độ đã thiết kế ở trên - Dọn dẹp file tạm thời như thư mục staging
Chỉ có số phiên bản thay đổi từ lần phát hành này sang lần phát hành khác (số 1.0 trong --volname, và FocusTimer-1.0.dmg trong tên file đầu ra), vì vậy nếu bạn chỉ trích xuất phần đó ra thành biến script, bạn sẽ không cần chạm vào lệnh mỗi lần. Giữ đường dẫn ảnh nền và tất cả tọa độ là giá trị cố định.
Chúng tôi khuyên bạn nên để script tự động thực hiện chuẩn hóa DPI của ảnh nền (
sips) mỗi lần. Theo cách đó, ngay cả khi bạn quên chuẩn hóa DPI khi bạn tái xuất bản thiết kế gốc và thay thế, script luôn sửa lại cho bạn.
Tổng Kết Series
Thiết kế DMG hai phần đã hoàn tất. Bạn hiện có:
- ✅ (Phần 1)
create-dmg+ thư mục staging.app+ ảnh nền với @2x và DPI đã chuẩn hóa - ✅ (Phần 2) Thiết kế tọa độ cửa sổ và biểu tượng + căn chỉnh tọa độ pixel nền với tọa độ điểm cửa sổ + tự động hóa
Để tóm tắt lại các điểm mấu chốt:
- Cửa sổ DMG là 600×400 điểm, và ảnh nền có kích thước gấp đôi — 1200×800 pixel (@2x).
- DPI của ảnh nền PNG phải được chuẩn hóa về 144 — chỉ khi đó ảnh nền mới lấp đầy cửa sổ chính xác.
- Tọa độ biểu tượng là tọa độ điểm trong cửa sổ, và tọa độ artwork nền là tọa độ pixel gấp đôi — căn chỉnh cả hai theo cùng một cơ sở tham chiếu.
- Đặt thiết kế bạn đã xác định vào script build và tái sử dụng nguyên trạng cho mỗi lần phát hành.
Một mũi tên nhỏ, hay vị trí biểu tượng lệch vài điểm, có thể ảnh hưởng đến ấn tượng đầu tiên của người dùng. Vì cửa sổ .dmg là nơi người dùng lần đầu gặp ứng dụng của bạn, nó xứng đáng được thiết kế cẩn thận một lần.