上架与工程接入最怕「尺寸差 1px」「Contents.json 写错倍率」或「带透明的主图标被拒」。本文面向设计师与前端素材用户,用一张像素尺寸对照表对齐 iPhone / iPad / App Store 营销图,说明系统圆角遮罩与透明通道边界,并给出sRGB导出参数与在远程 M 系列 Mac上可复制的批量校验命令。色彩与 ICC 总原则可对照《Mac PNG 色彩管理与 sRGB 验收》。
① 决策矩阵:何时用母版、何时落盘全尺寸
推荐工作流:在矢量或高分辨率母版(如 1024 及以上)上定稿,再一次性生成 Asset Catalog 所需的全部 PNG,避免手工改多份导致圆角、描边或抗锯齿不一致。若团队已有「监听导出目录自动生成多尺寸」的流水线,可与《监听文件夹生成多尺寸 PNG 套图》的思路衔接,把 iOS 尺寸表写进模板即可。
| 场景 | 建议 | 交付物 |
|---|---|---|
| 仅工程接入 Xcode | 母版缩放 + 校验宽高 | AppIcon.appiconset 内全 PNG + Contents.json |
| 需运营 / 法务走查 | 额外导出带标注的预览板(非替换工程内文件) | 独立目录 + README 版本号 |
| 品牌色跨 Web 与 App | 统一「上线 = sRGB PNG」合同 | 同套命名 + 色彩意图说明 |
② App Icon 像素尺寸对照表
下表为常见 iOS App Icon 槽位与精确像素边长(正方形);实际以 Xcode 模板与 Apple 文档为准,大版本升级后应复检。单位:px。
| 用途(概括) | 逻辑尺寸 | 倍率 | 输出 PNG(宽 × 高) |
|---|---|---|---|
| iPhone 通知 | 20 pt | 2× / 3× | 40 × 40 / 60 × 60 |
| iPhone 设置 | 29 pt | 2× / 3× | 58 × 58 / 87 × 87 |
| iPhone Spotlight | 40 pt | 2× / 3× | 80 × 80 / 120 × 120 |
| iPhone 主屏幕 | 60 pt | 2× / 3× | 120 × 120 / 180 × 180 |
| iPad 通知 | 20 pt | 1× / 2× | 20 × 20 / 40 × 40 |
| iPad 设置 | 29 pt | 1× / 2× | 29 × 29 / 58 × 58 |
| iPad Spotlight | 40 pt | 1× / 2× | 40 × 40 / 80 × 80 |
| iPad 主屏幕 | 76 pt | 1× / 2× | 76 × 76 / 152 × 152 |
| iPad Pro 主屏幕 | 83.5 pt | 2× | 167 × 167 |
| App Store 营销 | 1024 pt | 1× | 1024 × 1024 |
③ Contents.json 字段与常见坑
Contents.json 由 Xcode 生成最稳;手工维护时务必让 size(如 "60x60")、scale("2x")、idiom(iphone / ipad / ios-marketing)与文件名一一对应。常见错误:把 3× 图配到 2× 槽位、idiom 写成通用而实际仅放了 iPhone 图、营销 1024 未单独声明 ios-marketing。
最小结构示例(节选,便于评审字段含义;真机请以 Xcode 导出为准):
{
"images" : [
{ "filename" : "[email protected]", "idiom" : "iphone", "scale" : "2x", "size" : "60x60" },
{ "filename" : "[email protected]", "idiom" : "iphone", "scale" : "3x", "size" : "60x60" },
{ "filename" : "Icon-1024.png", "idiom" : "ios-marketing", "scale" : "1x", "size" : "1024x1024" }
],
"info" : { "author" : "xcode", "version" : 1 }
}
④ 圆角遮罩、透明通道与 sRGB 导出参数
圆角遮罩规则:向系统与 App Store 提交方形全幅图标,不要在 PNG 里预先做 iOS 圆角;圆角由系统统一套用,预圆角易导致边缘发虚或与壳工程不一致。安全区:关键图形与细线应落在中心「可视安全区」内,避免贴边被遮罩裁切感知过强(具体比例以各年 HIG 图示为准)。
透明通道:主 App Icon(含 1024 营销图)通常要求完全不透明;带 Alpha 易被拒或需单独变体策略。若你同时交付通知类小图标等变体,须在 README 标明哪些槽位允许透明、哪些必须填实底。
sRGB 导出参数(团队合同建议):工作色彩空间可在广色域母版上创作,导出到 Asset 的 PNG 统一转换为 sRGB、8 位/通道;是否嵌入 ICC 与前端/Web 规范对齐,避免「仅改标签不转换」。详细步骤见上文色彩管理专文。
⑤ 命名与目录约定
- 目录:
Assets.xcassets/AppIcon.appiconset/仅放图标与Contents.json,不要混入无关切片。 - 文件名:推荐带倍率,如
[email protected]、[email protected]、Icon-1024.png;全小写 + 连字符亦可,全团队统一即可。 - 版本:在 Git 标签或工单号上绑定,例如
appicon/v2.3.0,避免工程里出现「final-final」。
⑥ M 系列 Mac 批量导出与校验步骤
在远程 M 系列 Mac上固定 Xcode 与系统版本后,批量任务适合夜间跑:利用多核并行缩放与校验,减少本机发热与网络抖动。缩放可用设计工具动作、sips 或自研脚本;关键是每张图读取像素宽高并与上表比对。
可执行校验(单文件快速验尺寸):
sips -g pixelWidth -g pixelHeight "AppIcon.appiconset/[email protected]"
批量遍历(示例:当前目录下所有 PNG):
find . -name "*.png" -print0 | xargs -0 -P 8 -I {} sips -g pixelWidth -g pixelHeight "{}"
将输出与清单 CSV(path,expected_w,expected_h)diff,失败路径写入 manifest 定点重跑。更复杂的透明抽检、体积阈值可与《OpenClaw PNG 批处理质检》中的规则思路结合。M 系列统一内存架构下,-P 并行度可按机器核数与热设计功耗略调,避免与 GUI 导出争用同一磁盘。
⑦ 签字验收清单
| 检查项 | 标准 | 方法 / 工具 |
|---|---|---|
| 像素尺寸 | 与对照表完全一致(宽高相等) | sips、脚本对 expected 表 |
| 圆角 | 源图为方形,无手工 iOS 圆角 | 目视 + 与设计稿对比 |
| 透明通道 | 主图标与 1024 不透明;特殊槽位按 README | 预览「显示 Alpha」、sips / 质检脚本 |
| 色彩 | 交付 PNG 为 sRGB 意图,与品牌样张一致 | 浏览器 / 多台显示器抽检 |
| Contents.json | filename、idiom、scale、size 自洽 | JSON 校验 + Xcode 打开无警告 |
| 命名与版本 | 目录干净、命名规范、版本可追溯 | Code Review、清单 CSV |
小结
用母版 → 全尺寸 PNG → Contents.json一条链收口,圆角交给系统、透明与 sRGB 按合同执行,再用 sips 与并行遍历在 M 系列 Mac 上做批量校验,即可显著降低上架与设计返工。需要固定环境与夜间批处理时,可使用下方套餐入口。
远程 Mac 设计场景:套餐与购买
希望把图标批量导出、像素校验与色彩验收放在稳定、可复现的远程 Mac上完成的团队,可在 首页了解方案,通过 购买 / 租用选择合适套餐,在 价格与节点页比对配置,并按 帮助中心完成接入。更多 PNG 与自动化实践见 技术见解。