一个独特、好记的图标可表达你 App 或游戏的用途和个性,还可帮助用户一眼识别你的产品。

App 图标是 App 或游戏品牌推广和用户体验的重要组成部分。它显示在主屏幕上和系统中的各个关键位置,包括显示在搜索结果、通知、系统设置和共享表单中。设计巧妙的 App 图标会在所有 Apple 平台上清晰连贯地传达 App 或游戏的特性。

1. 分层设计
虽然你可以为图标提供扁平图像,但分层可让你最大程度控制图标设计呈现的方式。分层的 App 图标组合在一起会产生深度感和活力感。在每个平台上,系统会应用响应周围环境和用户交互的视觉效果。
iOS、iPadOS、macOS 和 watchOS App 图标包括一个背景层以及一个或多个前景层,它们组合在一起可产生维度感。这些图标具有镜面高光、霜化感和半透明等 Liquid Glass 属性,而这些属性会响应光线变化以及 iOS 和 iPadOS 设备移动。
iOS App 图标
Apple tvOS App 图标使用二至五个叠层,以在用户聚焦到这些图标时营造动态感。获得焦点时,App 图标会响应用户手指在其遥控器上的移动而提升至前景,并在表面发光时轻微摇摆。层与层之间的分离和透明度的使用形成了视差效果期间的深度感。
Apple tvOS App 图标
visionOS App 图标包括一个背景层及其上方的一至两层,以生成在用户查看时会巧妙展开的三维对象。系统通过添加阴影体现各层之间的深度感并使用上层的 Alpha 通道打造浮凸感外观,以增强图标的视觉维度。
visionOS App 图标
使用喜爱的设计工具为 App 图标打造各个前景层。对于 iOS、iPadOS、macOS 和 watchOS 图标,之后将图标层导入 Xcode 附带的设计工具 Icon Composer 中,该工具可从 Apple 开发者网站下载。在 Icon Composer 中,你可定义图标的背景层,调整前景层的放置,应用透明度等视觉效果,定义默认、深色、透明色和色调外观变体,以及导出图标供在 Xcode 中使用。有关更多指南,请参阅 Creating your app icon using Icon Composer。

Icon Composer
对于 Apple tvOS 和 visionOS App 图标,你可以在 Xcode 中将图标层直接添加到图像叠层以形成完整图标。
首选在前景层中使用清晰边缘。为确保系统绘制的高光和阴影效果更佳,请避免为前景层形状使用柔和和羽化边缘。
改变前景层中的不透明度,增加深度感和生动感。例如,“照片”图标将其中心图案分隔成包含半透明部件的多个层,让设计更具有动感。在 Icon Composer 中导入完全不透明的层并调整透明度,即可基于透明度和系统效果互相影响的方式预览和调整设计。
设计醒目且同时强调前景内容的背景。精细的从上到下、从浅色到深色渐变往往能良好响应系统光效。Icon Composer 支持纯色和渐变背景层,因此在大多数情况下无需导入自定义背景图像。如果确实要导入背景层,请确保其为全幅且不透明。
将层导入 Icon Composer 时,首选矢量图形。与光栅图像不同,矢量图形(如 SVG 或 PDF)缩放平滑且在任何大小下都可锐利清晰显示。在设计中为插图绘制轮廓并将文本转换为轮廓。网格渐变和光栅插图首选 PNG 格式,因为这是一种无损的图像格式。
2. 图标形状
App 图标的形状因平台视觉语言而异。在 iOS、iPadOS 和 macOS 中,图标为正方形,且系统会应用遮罩生成圆角,以精确匹配整个系统中其他圆角界面元素和实体设备本身外框的曲度。在 Apple tvOS 中,图标为矩形,同样带有同心边缘。在 visionOS 和 watchOS 中,图标为正方形,且系统会应用圆形遮罩。

创建形状合适的未遮罩层。系统会为所有层边缘添加遮罩,生成图标的最终形状。对于 iOS、iPadOS 和 macOS 图标,请提供正方形层供系统应用圆角。对于 visionOS 和 watchOS,请提供正方形层供系统创建圆形图标形状。对于 Apple tvOS,请提供矩形层供系统应用圆角。提供带预定义遮罩的层会对镜面高光效果产生负面影响,并使边缘看起来有锯齿。
保持主要内容居中,避免其在系统调整圆角或应用遮罩时被截断。在 visionOS 和 watchOS 图标中,请特别注意将内容居中。为协助放置图标,请使用 App 图标制作模板中的网格,模板可在 Apple 设计资源中找到。
3. 设计
图标设计应拥抱简洁。简单的图标往往更容易被用户理解和识别。经系统提供的阴影和高光渲染后,包含精细视觉特征的图标可能看起来非常杂乱,且在较小尺寸下,细节还可能很难辨别。找到可抓住 App 或游戏精髓的概念或元素,使之成为图标的核心理念,并以简洁、独特且使用最少形状的方式表达出来。优先使用简单的背景(如纯色或渐变),将重点放在主要设计上,你不需要在整个图标画布上填满内容。









