macOS App 图标规范

面向 desktop 打包与品牌资源维护。现代 macOS 使用 Apple Icon Composer 分层资源;OpenProgram 提供背景定义与四个独立品牌深度层。素材不预画最外层系统轮廓,内部节点保留用于表达凸起体积的受光渐变。

凸起圆环预览通过 · 安装待 Xcode license

当前实现与差距

项目当前实现官方设计要求目标
深度结构轨道与三个节点合并在一个 SVG、一个 group 中,Icon Composer 只能把整个品牌符号视为同一深度面。背景与一个或多个前景层共同形成空间层级;group 按从后到前的顺序成为系统渲染的深度层。轨道、大节点、中节点和小节点分别进入四个 group。
材质节点已有凸起明暗,圆环仍只有蓝紫色相过渡,截面明暗不足。最外层 squircle 与其边缘效果由系统生成;内部品牌层可使用独立明暗表达前后关系。四组均关闭 Specular;节点保留左上受光的径向渐变;圆环使用左上亮、右下暗的蓝紫渐变,并在截面两侧叠加低透明度暗部,形成凸起厚度但不生成白色光圈。
内部占比轨道外缘约占画布宽度 64%,与 System Settings 的内部主体相比仍偏小。主体需要在系统遮罩的安全范围内保持清晰,并与相邻系统图标形成稳定的视觉尺寸。轨道外缘扩大到约 69%,三个节点同步小幅放大,保留约 15% 的单侧安全边距。
品牌边界蓝紫轨道和三个节点已稳定,背景由 automatic gradient 生成。素材保持未遮罩的方形画布,主体居中,前景边缘清晰,系统负责最终裁切。不复制 System Settings 的齿轮造型,仅采用其分层、遮挡和系统材质方法。

最终决策

1 · 背景定义

背景颜色由 icon.jsonautomatic-gradient 定义。素材本身不含圆角。

2 · 四个透明品牌层

轨道与三个节点分别使用独立 SVG,并按从后到前的顺序进入四个 Icon Composer group。

3 · 系统输出示意

最外层圆角遮罩及其边缘效果由 Apple 工具链生成;内部节点的受光方向属于品牌素材,Icon Composer 只为这些节点添加层间阴影,不添加 Specular 光圈。

素材边界

源素材保留1024 × 1024 画布、带方向性受光和暗边截面的蓝紫轨道、三个带凸起受光渐变的独立节点、透明前景、安全边距和清晰轮廓。
源素材禁止外部 squircle、圆角矩形、外框、最外层轮廓高光、预画投影、模糊、系统容器材质和预合成背景。
Apple 工具链负责最终遮罩、组间深度、系统高光、折射、透明度、投影、平台外形、显示模式适配以及兼容资源生成。
组件资源不得替代Web favicon、侧边栏图标和加载动画继续使用各自尺寸的现有资源,不从 App 图标截图导出。

构建与兼容

路径输入用途约束
当前发布build/AppIcon.iconElectron Builder 调用 Xcode 26 actool 生成 Assets.car 与兼容图标。GitHub Actions 使用 macOS 26 runner。
旧系统回退同一份 AppIcon.iconXcode 从现代源包生成兼容表示;仓库不再维护第二份手绘 `.icns` 源图。兼容结果仍由 Apple 工具链输出,不允许新增独立 squircle 素材。
本机开发Xcode 26 的 Icon Composer.appictool直接导出 macOS Default/Dark/Mono 预览,并在打包后检查 Dock、Finder 与 About。本机必须完成 Xcode license 接受后才能执行完整 Electron Builder 打包。

实现入口

desktop/build/AppIcon.icon/icon.json背景与图层结构。
desktop/build/AppIcon.icon/Assets/01-orbit.svg最底层蓝紫轨道。
desktop/build/AppIcon.icon/Assets/02-node-blue.svg第二层主节点。
desktop/build/AppIcon.icon/Assets/03-node-purple.svg第三层辅助节点。
desktop/build/AppIcon.icon/Assets/04-node-indigo.svg最前层小节点。
desktop/scripts/check-icon.sh阻止圆角、边框、阴影等重新进入现代素材。
desktop/package.jsonmacOS 打包入口固定为 AppIcon.icon
.github/workflows/release.yml使用带 Xcode 26 的 macOS 26 runner。

依据与验收

设计依据为 Apple 的 App icons HIGIcon ComposerXcode 图标创建说明。打包能力依据 Electron Builder 图标文档

聚焦校验必须确认:四个现代 SVG 均使用 1024 × 1024 透明画布且不含外部 squircle、外框或最外层高光;三个节点使用左上受光的径向渐变;圆环同时包含方向性蓝紫渐变和不含白色的暗边截面渐变;icon.json 按轨道、大节点、中节点、小节点的顺序声明四个 group,四组均关闭 Specular,并使用 42% neutral Shadow;package 配置使用 .icon;发布 runner 提供 Xcode 26。ictool 必须成功导出 Default、Dark 与 Mono,最终视觉验收检查 Dock、Finder、About 面板和相邻官方图标下的尺寸与层次。

实现状态

范围状态证据
Apple Icon Composer 构建入口与 automatic gradient 背景已实现desktop/package.json 与当前 AppIcon.icon
四个前景深度 group已实现icon:check 通过;四组关闭 Specular,取消节点圆周光圈;四组使用 42% neutral Shadow,并按从后到前顺序声明
源素材明暗已实现三个节点使用左上受光、右下压暗的径向渐变;圆环使用方向性受光与不含白色的暗边截面;最外层系统轮廓不进入 SVG
主体视觉占比已实现轨道外缘约占画布 69%,三个节点同步放大;单侧保留约 15% 安全边距
本机 Default/Dark/Mono 导出已验收Xcode 26.3 ictool 均成功导出 1024 × 1024 预览;另验收 128 × 128 Dock 尺寸
安装版 Dock、Finder 与 About阻塞actool 返回 Xcode license 未接受;接受后执行完整 Electron Builder 打包