应用图标设计技能
触发条件
当需要新建应用图标、重新设计图标、对图标进行评审,或提出苹果应用图标导出请求时使用。若生产规格很重要,请查阅苹果当前的设计和技术文档。
流程
- 确定应用的核心目的和品牌语言。如有已有的品牌资产则沿用,否则选择独具特色的视觉隐喻。
- 将隐喻简化为一个可识别的核心符号,采用粗体、填充、简单形状和清晰的轮廓。避免细小细节、繁杂纹理、细线条、截屏、不必要的文字和过度光泽。
- 选择经过深思熟虑的、克制的调色板以及清晰的前景/背景对比度。从视觉上将主要图标居中,并为系统遮罩留出充足的边距(安全区域)。
- 设计需在小尺寸下仍可识别。在全尺寸、180 像素、60 像素和 30 像素(设计测试,非苹果规定的像素要求)下预览。
- 考虑默认、深色、浅色和着色模式。确保概念和可识别性在不同外观下保持一致。
- 查看质量检查清单;简化任何在小尺寸下会变成噪点的元素。
- 以可用工具实际支持的格式输出最高质量的素材。如果矢量/可编辑源文件或变体尚未制作完成,则不要声称拥有它们。
苹果人机界面指南
- 倾向于简单和即时识别。一旦系统添加高光和阴影,精细的特征可能会变得嘈杂。
- 倾向于使用插图而非照片,且不要仅仅复制应用界面。
- 避免极细的线条和尖锐的角度,因为其细节在小尺寸下会丢失。
- 避免非必要的文字、标语或平台特定陈述。
- 不要复制苹果硬件。
- 使用未遮罩的方形图层;系统本身会应用圆角/圆形遮罩。不要在基础图稿中内建圆角。
- 从中心开始定位重要内容,使其不会被系统遮罩截断。
- 图标应在不同设备和外观下保持视觉一致性。
苹果尺寸和系统形状(已验证于 2026-10-24)
| 目标平台 | 画布 | 系统遮罩 |
|---|---|---|
| iOS, iPadOS, macOS | 1024 × 1024 像素 | 圆角矩形 |
| watchOS | 1088 × 1088 像素 | 圆形 |
| visionOS | 1024 × 1024 像素 | 圆形 |
| tvOS | 800 × 480 像素 | 圆角矩形 |
- 便携式导出使用 sRGB;苹果平台也支持 Display P3 色彩空间,如文档所述。
- 对于现代苹果工作流程,优先使用分层图稿和 Icon Composer 来预览平台和外观变体(默认、深色、浅色/深色、着色/深色)。
- 尽可能将图稿绘制为矢量,并将每个可独立调节的图层导出为 SVG,同时将文本转换为轮廓。如果 SVG 功能不受支持,PNG 图层也可以接受。
- 在准备 Liquid Glass 分层图标时,推迟将模糊、阴影、反射效果、半透明度、不透明度、渐变和背景效果应用到 Icon Composer 中。
- 背景必须覆盖整个画布。对于静态 iOS 图标,默认使用完全不透明的全出血背景。透明分离的字形是一种不同的素材类型,而非完整的图标。
- 系统会应用遮罩;不要在图层图稿上导出遮罩几何体。
- 对于静态图标工作流程,可以交付扁平 1024 像素 PNG,但它不等同于分层 Icon Composer 的
.icon素材。
质量检查清单
- 一个令人难忘的概念,可识别的轮廓
- 小尺寸和灰度模式下清晰可读
- 有限的颜色和强烈的对比度
- 没有不必要的文字、纹理、精细细节或截屏
- 光学居中和安全的边缘间距
- 源图稿为方形且未遮罩,背景为全出血
- 已根据深色、着色和浅色外观进行审查
- 正确的目标平台尺寸、色彩空间和导出格式
- 关于可编辑性、图层和格式的声明与实际文件相符
用户当前的脑力/数学应用:可选的品牌特定覆盖层
仅用于此特定项目,而非所有应用:
- 最多三种纯色;调色板取自钴蓝/电光蓝、紫罗兰色和洋红粉色(或适当时候使用深海军蓝)。
- 无渐变,除非用户覆盖此规则。
- 抽象、简化的脑部轮廓,带有少量粗犷的脑叶;不要超详细的解剖图示。
- 在小图标尺寸下保持极简、可识别和美观。深度应有节制,并且不应增加更多颜色。
- 应用图标背景是构图的一部分,不应透明(除非要求单独的符号图层)。
图像生成提示模板
"为 [APP] 创建一个方形应用图标,包含一个令人难忘的中心符号 [SYMBOL],该符号由少量高对比度的纯色形状组成,采用 [PALETTE] 调色板,背景为全出血不透明色 [BACKGROUND]。按视觉重量居中,在外部边缘留出充足空间,避免渐变 [如果要求]、字母、界面元素和次要细节,确保在小尺寸下具有强识别性,不要内建圆角遮罩。"
权威来源
- 苹果 HIG 应用图标:https://developer.apple.com/design/human-interface-guidelines/app-icons
- 苹果 Icon Composer 工作流程:https://developer.apple.com/documentation/xcode/creating-your-app-icon-using-icon-composer
- 苹果设计资源:https://developer.apple.com/design/resources/
- 苹果 Icon Composer:https://developer.apple.com/icon-composer/
设计建议是综合性的;发布前请查阅当前苹果规格。这是一份可移植的技能文档,并非其已注册为可执行系统/插件技能的证明。