iOS App Icon 看起來單純，卻常在釋出週踩雷：像素差一點、1024 px 行銷圖帶了透明、或設計端先烤了圓角點陣，和 Xcode 自動遮罩打架。本文給設計師與需接 AppIcon.appiconset 的前端／素材負責人一份可簽字的決策矩陣：角色→點數→像素對照表、Contents.json 合約、sRGB 匯出參數、透明通道與超橢圓（系統圓角）遮罩納品規則、檔名規範，以及可在 M 系列 Mac（含遠端 Mac）上重跑的批量校驗步驟。
① 尺寸與角色對照（PNG 像素目標）
請交付正方形、像素完全吻合下表的 PNG；Xcode 透過 Contents.json 對應檔案，勿指望資產目錄幫你「Retina 補救」錯誤母檔。建議保留一份 1024 px 向量或高解析母稿，再衍生各尺寸——在 Apple Silicon 上，批次縮放與匯出通常很快，瓶頸多在規格一致與驗收可重現。圖示批次的色彩政策請與全站 PNG 對齊，見 Mac PNG 色彩管理：sRGB 與 Display P3 驗收。
| 平台／用途 | 點數（pt） | 倍率 | PNG（px） | 檔名慣例（token） |
|---|---|---|---|---|
| iPhone 通知 | 20 | 2×／3× | 40×40／60×60 | [email protected]、@3x |
| iPhone 設定 | 29 | 2×／3× | 58×58／87×87 | [email protected]、@3x |
| iPhone Spotlight | 40 | 2×／3× | 80×80／120×120 | [email protected]、@3x |
| iPhone App | 60 | 2×／3× | 120×120／180×180 | [email protected]、@3x |
| iPad 通知 | 20 | 1×／2× | 20×20／40×40 | [email protected]、@2x |
| iPad 設定 | 29 | 1×／2× | 29×29／58×58 | [email protected]、@2x |
| iPad Spotlight | 40 | 1×／2× | 40×40／80×80 | [email protected]、@2x |
| iPad App | 76 | 1×／2× | 76×76／152×152 | [email protected]、@2x |
| iPad Pro App | 83.5 | 2× | 167×167 | [email protected] |
| App Store／行銷 | 1024 | 1× | 1024×1024 | [email protected] 或 [email protected]（與產生器一致） |
② Contents.json 合約
AppIcon.appiconset/Contents.json 是設計與 Xcode 之間的單一真實來源。images 陣列每一筆應含 idiom（iphone、ipad、ios-marketing）、size（如 "60x60"）、scale（"1x"／"2x"／"3x"）與 filename。行銷用 1024 槽位為 idiom: "ios-marketing"、size: "1024x1024"、scale: "1x"。
- JSON 可解析：在遠端 Mac 上對資料夾執行
plutil -lint Contents.json，先擋尾逗號與欄位拼錯再進 CI。 - 無孤兒檔：資料夾內每個 PNG 都應被引用；每個
filename都應存在於磁碟。 - 版控釘選：JSON 與 PNG 同 commit，「資產目錄長什麼樣」永遠可 diff。
③ 系統圓角遮罩、透明與「平面」納品
iOS 在繪製時套用超橢圓（rounded rectangle）遮罩。正式 App Icon 請交付滿版的正方形點陣，不要把 iOS 圓角事先烤進點陣（除非團隊另有內部模板且工程知情）。標誌與人像請落在中央安全區，避免被遮罩裁切關鍵細節。
Alpha：1024×1024 行銷圖不得含透明，否則易被拒審。其餘槽位原則上以完全不透明為預設；半透明像素常來自「假圓角」匯出或棋盤底殘留。將「非預期 Alpha」列為 release blocker，並納入下方驗收表。更廣的 PNG 透明治理可併讀 OpenClaw PNG 質檢：遠端 Mac 批量透明校驗。
④ 可執行匯出參數（sRGB）
請在 Figma、Sketch、Affinity、Photoshop 間鎖同一套參數，讓衍生圖彼此可比：
| 參數 | 建議值 | 備註 |
|---|---|---|
| 色彩空間 | sRGB（明確轉換匯出，勿「未標籤猜測」） | 與 Web／UI 切片政策一致；ICC 是否內嵌依團隊規範。 |
| 位元深度 | 8-bit RGB(A) | 中間稿可用 16-bit，最終交付 8-bit PNG。 |
| 縮放核心 | 雙三次／Lanczos（工具內「高品質」） | 縮小後細線可微調銳化。 |
| 1024 母稿 | 無 Alpha；品牌指定底色實心填滿 | 以⑥節腳本強制驗證。 |
⑤ 驗收清單（設計＋前端素材）
| 檢查項 | 作法 | 通過標準 |
|---|---|---|
| 尺寸 | sips -g pixelWidth -g pixelHeight 或 ImageMagick identify |
每檔與對照表完全一致（±0 px）。 |
| 正方形畫布 | 視覺＋腳本 | 寬＝高。 |
| Alpha（行銷 1024） | identify -format '%[channels]' 或 PNG chunk 檢查 |
1024×1024 無 alpha，僅 RGB。 |
| Alpha（其他槽位） | 直方圖／抽樣像素 | 規格未允許則無意外透明；無棋盤邊緣。 |
| 圓角遮罩政策 | 設計複核 | 正方形納品；正式圖示不預烤圓角；主視覺在安全區內。 |
Contents.json |
plutil -lint＋檔名交叉表 |
JSON 合法；每個 filename 存在；無未引用 PNG。 |
| sRGB 意圖 | 預覽程式抽檢＋書面匯出預設 | 內嵌 ICC 或「不內嵌但已轉 sRGB」與團隊政策一致。 |
| 命名 | CI 正則 | 穩定樣式：Icon-App-<WxH>@<scale>.png，與 JSON 一致。 |
⑥ M 系列與遠端 Mac：批量校驗步驟
約 15～20 張小圖在 Apple Silicon 上迴圈極快；價值在於可重跑與筆電關機仍可跑——把同一套腳本放在遠端 Mac，釘住 macOS 與 CLI 版本，行為接近小型 CI。
步驟 A — 資料夾內像素掃描：
for f in *.png; do
echo -n "$f "
sips -g pixelWidth -g pixelHeight "$f" 2>/dev/null | paste -sd ' ' -
done步驟 B — 行銷圖 Alpha：對 [email protected]（或你的 1024 檔）用 ImageMagick identify -verbose，若出現 rgba 即建置失敗。
步驟 C — manifest：輸出 icons_manifest.csv（欄位如 path,w,h,bytes,has_alpha,colorIntent）附在 release 單。圖示周邊若還有大批量 4K／多倍率匯出，併讀 遠端 Mac M4 批量 4K PNG 匯出指南 的佇列與並發節律。
並行提示：自單一 1024 母稿衍生多尺寸時，可用 xargs -P 平行呼叫 sips 或其他 CLI 縮放；M 系列短時間多工通常溫控餘裕充足。
小結
以像素對照表為唯一尺寸合約、Contents.json 先 lint 再進版控、全工具統一 sRGB 參數，並把1024 行銷圖的 Alpha當硬失敗。設計複核（遮罩／安全區）加上在 M 系列 Mac（建議遠端 Mac）上的腳本校驗，圖示交付就能穩定、無聊、可上線。
下一步：遠端 Mac 與設計場景方案
請至 MacPng 首頁瀏覽方案，開啟 租用／購買與 價格與節點，為圖示批次、PNG 質檢與長時驗證加一台遠端 Mac，避免卡住主要工作機。說明中心提供 SSH／VNC 入門，方便分散團隊接入。