跨平台图标要统一的是识别核心，不是同一张图片。开始设计前，先回答三个问题：
- 这是应用图标、界面图标，还是状态区图标？
- 最终轮廓由系统蒙版、商店处理，还是图片本身负责？
- 图标最小会显示到多大，系统是否会重新着色或添加底板？
这三个问题决定了画布、透明度、圆角和小尺寸版本应该怎么做。
一、先区分图标的用途
| 类型 | 常见位置 | 设计重点 |
|---|---|---|
| 应用图标 | 桌面、Dock、启动器、商店 | 品牌识别、平台容器、外观适配 |
| 界面图标 | 按钮、导航、工具栏、设置项 | 操作语义、线宽和文字对齐 |
| 状态区图标 | macOS 菜单栏、Windows 系统托盘 | 极小尺寸识别、平台原生感 |
| Web 图标 | 浏览器标签、PWA、书签 | 16px 可读性和浏览器兼容 |
应用图标与状态区图标可以共享品牌符号，但不应默认共用同一张渲染图。应用图标需要表现品牌，状态区图标首先要适应系统环境。
二、Apple、Android 与 Windows 的交付差异
2.1 Apple
当前 Apple 图标工作流使用 1024 × 1024 px 方形布局。iOS、iPadOS 和新版 macOS 会对图层应用圆角和系统材质效果，因此应交付未蒙版图层，不要提前画系统圆角或贴边阴影。
Apple 图标需要检查默认、深色和单色外观。背景、主体、高光和阴影最好分层保存，再通过 Icon Composer 或 Xcode 预览不同平台、尺寸和外观。
传统 .icns 和现有打包框架不一定采用最新图标管线。DMG、Finder 和旧系统中的最终轮廓仍需实机确认，不能仅凭设计规范推断。
2.2 Android
Android Adaptive Icon 由三个部分组成：
| 图层 | 作用 |
|---|---|
| Background | 铺满画布的背景 |
| Foreground | 主体，可参与启动器视差和动画 |
| Monochrome | Android 13+ 主题图标使用的单色图层 |
各图层使用 108 × 108 dp 画布，关键内容放在中心安全区。启动器可能裁成圆形、圆角方形或水滴形，因此不能预先画死外框。
Google Play 的 512 × 512 px 商店图标是独立资源，不等同于启动器图标。商店会处理圆角和阴影，上传前不要预裁圆角。
2.3 Windows
Windows 不会把所有应用图标统一裁成同一种容器。透明轮廓通常是合理选择，也可以按品牌需要使用底板。
Windows 会优先寻找与显示尺寸匹配的图片，找不到时才选择更大的版本缩小。Win32 的 ICO 至少应包含 16、24、32、48 和 256 px，避免只放一张大图交给系统缩放。
设计时先在 48 × 48 网格建立清楚的轮廓，再针对小尺寸减少转角和内部细节。透明图标需要分别检查浅色、深色任务栏和桌面壁纸。
三、macOS 菜单栏与 Windows 托盘
状态区图标长期占用系统共享空间，尺寸也远小于应用图标。两端的视觉逻辑并不相同。
| 维度 | macOS 菜单栏 | Windows 系统托盘 |
|---|---|---|
| 色彩 | 单色，由系统着色 | 可以保留品牌色 |
| 背景 | 透明 | 通常透明 |
| 识别方式 | 轮廓和负空间 | 轮廓、颜色和主体关系 |
| 主题适配 | 模板机制自动适配 | 需要检查不同任务栏背景 |
| 应用图标容器 | 删除 | 删除 |
macOS 使用透明的模板图标。系统负责浅色、深色、选中和辅助功能外观，因此图形不应依赖渐变、材质或品牌色，并要与附近系统图标保持相近的视觉重量。
Windows 托盘支持带 Alpha 的彩色资源。它可以继承应用图标的主体和颜色，但需要移除大面积背景、外层容器以及小尺寸下无法辨认的细节。至少检查 16、20、24 和 32 px。
ClipClop 的处理
ClipClop 的应用图标由牛、马和剪贴板组成。Windows 托盘保留彩色牛马，移除白色背景和剪贴板；macOS 菜单栏进一步简化为单色蹄印，再交给系统着色。
三个版本共享牛马这一识别来源，但没有共用同一张图片。这比强行统一颜色和构图更符合各自平台。
四、从母版派生不同尺寸
一张 1024 px 图片可以批量缩放，却不一定能在 16px 下保持清楚。完整的派生过程是：设计母版 → 平台构图 → 光学版本 → 最终文件。
4.1 母版保存什么
母版不是一张大 PNG，而是可编辑的设计来源，包括：
- 基础构图网格和主体安全区。
- 品牌符号、颜色及主体关系。
- 背景、主体、阴影和高光等独立图层。
- 彩色、单色以及平台容器的处理方式。
- 哪些特征必须保留，哪些细节可以删除。
不同尺寸必须保持核心轮廓、主体数量与关系、品牌特征和基本视觉重心。主体占比、内部间距、描边粗细、局部比例、阴影和装饰细节可以调整。
4.2 先找视觉失效点
不要先为每个尺寸制作一份设计稿。先从母版导出全部目标尺寸，以 100% 实际大小检查，再标记图形开始模糊、粘连或失衡的位置。只有发生明显失效时，才建立新的光学版本。
设计母版
↓
导出目标尺寸
↓
检查轮廓、间隙和重心
↓
在失效点建立光学版本
↓
重新生成对应尺寸例如，128px 以上表现正常，48px 开始丢失纹理，24px 主体开始粘连，可以把资源分为 Large、Medium 和 Small；如果所有尺寸都清楚，就不需要为了形式增加版本。
4.3 建立光学版本
可以从三档开始：
| 档位 | 典型尺寸 | 处理方式 |
|---|---|---|
| Large | 256–1024 px | 保留完整构图、材质和层次 |
| Medium | 48–128 px | 减少纹理和阴影，强化轮廓与间距 |
| Small | 16–32 px | 保留识别核心，扩大负空间和对比度 |
三档不是硬性标准。简单图标可能只需要两档；如果 16px 与 24px 的表现差异很大，可以增加 Tiny 版本。
缩小时按下面的顺序处理：
- 删除无法辨认的纹理和高光。
- 缩小或删除模糊阴影。
- 加宽过细的轮廓和关键空隙。
- 拉开相邻主体，防止粘连。
- 调整局部比例和视觉中心。
同样的画布占比不代表同样的视觉重量。圆形通常需要略微放大，细长图形需要更多方向性空间，不对称图形可以偏离数学中心。阴影不参与主体居中的计算。
4.4 将尺寸映射到正确的源版本
生成脚本应明确每个尺寸使用哪个光学源，而不是始终缩放最大图。例如：
16、20、24、32px ← Small
48、64、96px ← Medium
128px 及以上 ← Large映射边界来自实际失效点，可以随图标复杂度调整。设计者只维护必要的源版本，工具负责生成最终尺寸。
五、源文件、导出与验收
源文件保存设计意图，发布文件由脚本生成：
IconSystem/
├── identity/ # 品牌符号、颜色和轮廓
├── app/
│ ├── apple/
│ ├── android/
│ └── windows/
├── status/
│ ├── macos-template.svg
│ └── windows-color.png
├── web/
└── generated/ # PNG、ICO、ICNS 等派生文件脚本适合处理尺寸、格式、ICO/ICNS 合成、文件检查和预览图生成。主体是否清楚、哪些细节应该删除，仍需人工判断。
最小验收范围
| 维度 | 检查内容 |
|---|---|
| 尺寸 | 16、20、24、32、48、128、512 px |
| 背景 | 浅色、深色、壁纸和系统强调色 |
| 位置 | Dock、Finder、桌面、任务栏、托盘和安装器 |
| 缩放 | Retina 1x/2x，Windows 100%–200% |
| 外观 | 彩色、单色、模板着色和高对比度 |
| 蒙版 | Apple 模板和 Android 常见启动器形状 |
以 100% 实际尺寸判断可读性。放大图只用于检查边缘和 Alpha。
六、常见问题
| 原因 | 表现 | 修正 |
|---|---|---|
| 预先画了系统圆角 | 出现双重圆角或脏边 | 删除预制蒙版 |
| 不支持透明的资源使用 Alpha | 出现黑底或被商店拒绝 | 按交付规范决定透明度 |
| Windows 图标带不必要底板 | 任务栏或托盘出现方块 | 提供透明的 unplated 资源 |
| 阴影贴近画布边缘 | 深色背景出现黑线 | 收回阴影或交给系统处理 |
| 主体超出安全区 | Android 启动器裁掉内容 | 缩回关键主体 |
| 只从大图缩放 | 小尺寸模糊、间隙消失 | 制作小尺寸光学版本 |
| AI 图片直接交付 | 出现伪圆角、噪点和错误 Alpha | 拆层并重建边缘 |
七、AI 只适合生成初稿
使用 AI 探索图标方向时，应明确要求方形画布、单一主体、无文字和清楚的小尺寸轮廓。但提示词必须服从目标平台：Apple 或 Google Play 可以要求背景铺满；Windows 透明图标和状态区图标不能照搬这个要求。
AI 输出不能直接交付。至少要清理边缘和 Alpha、拆分主体与背景，并在实际尺寸下重新检查。
八、发布前检查清单
- 已确认图标用途和外轮廓由谁负责。
- 应用、状态区和商店资源分别制作。
- Apple、Android 与 Windows 使用各自的交付规则。
- 源文件可编辑，PNG、ICO、ICNS 可以重新生成。
- 小尺寸版本保留轮廓、主体关系和关键负空间。
- 已在浅色、深色和真实系统位置检查。
- 没有黑框、重复圆角、贴边阴影或无意义底板。
- 没有依赖一张大图生成全部尺寸。
跨平台图标不是把一张图导出成不同尺寸，而是让同一个识别核心在不同环境中保持可辨认。
参考资料
- Apple Human Interface Guidelines - App icons: https://developer.apple.com/design/human-interface-guidelines/app-icons
- Apple Design Resources: https://developer.apple.com/design/resources/
- Apple - Icon Composer: https://developer.apple.com/icon-composer/
- Apple Human Interface Guidelines - SF Symbols: https://developer.apple.com/design/human-interface-guidelines/sf-symbols
- Android Developers - Adaptive icons: https://developer.android.com/develop/ui/views/launch/icon_design_adaptive
- Google Play - Icon design specifications: https://developer.android.com/google-play/resources/icon-design-specifications
- Google Developers - Material Symbols: https://developers.google.com/fonts/docs/material_symbols
- Microsoft - Design guidelines for Windows app icons: https://learn.microsoft.com/windows/apps/design/iconography/app-icon-design
- Microsoft - Construct your Windows app's icon: https://learn.microsoft.com/windows/apps/design/iconography/app-icon-construction
- Microsoft - Notification Area: https://learn.microsoft.com/windows/win32/uxguide/winenv-notification
- IBM Design Language - UI icons: https://www.ibm.com/design/language/iconography/ui-icons/design/
