引自《iOS12界面交互设计规范(iOS 12 Human Interface Guidelines)》
每个应用都需要一个精美、令人印象深刻的图标,能在苹果商店和主屏幕夺人眼球。轻瞥图标的瞬间,是你的第一个机会来传达你的应用。你的图标也会在系统中经常出现,比如在设置里和在搜索结果里。

拥抱简洁(Embrace simplicity.)寻找个单一的元素能够表现你的app的精髓,然后通过一个简单但是独特的形状来表现这个元素。谨慎地添加细节部分。如果一个图标的内容或是形状过于复杂,那么细节就很难辨认了,尤其是在更小的尺寸时。
提供一个单独的焦点(Provide a single focus point.)为图标设计一个单独的、集中的点,使它能快速吸引注意力并且明确地代表你的应用。
设计一个易于辨识的图标(Design a recognizable icon.)用户不应通过分析图标才能弄清楚它代表什么。比如,邮件应用的图标使用了一个信封,因为它普遍与邮件联系在一起。花点时间去设计一个好看迷人且精炼的图标,艺术性地传达你的应用的目的。
保持背景简单并且避免使用透明度(Keep the background simple and avoid transparency.)确保你的图标是不透明的,并且不要让背景变得杂乱。使用一个简单的背景,这样它就不会过度影响周围的其它图标。你没有必要将整个图标填满内容。
只有当logo全部或部分由文字组成时,才在图标使用文字(Use words only when they’re essential or part of a logo. )在主屏幕时,一个应用的名称会在图标之下显示。不要包含没有意义的文字重复说明名称或是告诉用户该如何使用你的应用,比如“Watch”或“Play”。如果你的设计包含了一些文字,那么请强调文字与你的应用提供的实际内容相关。
不要包含照片、屏幕截图或是界面元素(Don’t include photos, screenshots, or interface elements.)影像细节在很小的尺寸会难于辨认。屏幕截图对于一个应用图标来说太复杂了,也一般不利于传达应用的目的。在图标中的界面元素会令人误解并且困惑。
不要复用Apple硬件产品的图形(Don’t use replicas of Apple hardware products.)Apple产品受版权保护,不能在你的图标或是图片中被二次创作。一般来说,避免复用设备的图形,因为硬件设计频繁地更新换代,这会导致你的图标看起来易于过时。
不要在界面里到处放置应用图标(Don’t place your app icon throughout the interface. )在应用里发现一个图标用于多种目的会让人困惑。反之,考虑使用图标的色彩方案。请参阅 Color。
在不同的壁纸下测试你的图标(Test your icon against different wallpapers. )你不能预期用户会为他们的主屏幕选择什么样的壁纸,所以不要只是在一种深色和一种浅色的背景上测试你的图标。而是观察它在不同的照片上如何表现。在有动态背景的真实设备上试用它,因为背景会随着设备移动而改变视角。
保证图标的四角是方的(Keep icon corners square.)系统会自动覆盖一个遮罩层让图标变成圆角。
应用图标尺寸
每一个应用都必须提供一大一小两个应用图标。小图标会出现在主屏幕,并且当你的应用被安装后会被系统使用。大的图标会被应用商店使用。
设备 | 图标尺寸 |
---|---|
iPhone | 180px × 180px (60pt × 60pt @3x) |
120px × 120px (60pt × 60pt @2x) | |
iPad Pro | 167px × 167px (83.5pt × 83.5pt @2x) |
iPad, iPad mini | 152px × 152px (76pt × 76pt @2x) |
App Store | 1024px × 1024px |
为不同的设备提供不同尺寸的小图标(Provide different sized small icons for different devices. )确保你的应用图标在所有的设备中都是被支持且看起来很棒。
模仿大图标的形式制作小图标(Mimic your small app icon with your large app icon.)尽管大的应用图标和小的应用图标的应用方式不太一样,但总的来说二者均是你的应用图标。因此大图标通常应该与小图标相匹配,虽然它可以更微妙更丰富,更详细。
设备 | 搜索框图标尺寸 |
---|---|
iPhone | 120px × 120px (40pt × 40pt @3x) |
80px × 80px (40pt × 40pt @2x) | |
iPad Pro, iPad, iPad mini | 80px × 80px (40pt × 40pt @2x) |
设备 | 设置菜单图标尺寸 |
---|---|
iPhone | 87px × 87px (29pt × 29pt @3x) |
58px × 58px (29pt × 29pt @2x) | |
iPad Pro, iPad, iPad mini | 58px × 58px (29pt × 29pt @2x) |
设备 | 通知图标尺寸 |
---|---|
iPhone | 60px × 60px (20pt × 20pt @3x) |
40px × 40px (20pt × 20pt @2x) | |
iPad Pro, iPad, iPad mini | 40px × 40px (20pt × 20pt @2x) |
不要对用于设置的图标叠加或是描边(Don’t add an overlay or border to your Settings icon.)iOS会自动为所有图标加上1个像素的描边,以确保它们很好地呈现在设置白色的背景上。
TIP:
如果你的应用能创建自定义文档,你无需额外设计文档图标,因为iOS会利用你的应用图标自动创建文档图标。
用户可选应用图标
对于有些应用来说,定制化是一个能唤起应用与用户间联系并增强用户体验的功能。如果定制化可以在你的应用程序中提供价值,那么你可以让人们选择一个替代应用程序的图标。例如,一个体育应用程序可以为不同的团队提供图标,或者一个应用在光和暗两种模式下可以提供相应不同的光明和黑暗的图标。请注意,您的应用程序图标只能根据用户的要求进行更改,系统总是向用户提供这种更改的确认。
为在所有必要的尺寸提供视觉一致的替代图标(Provide visually consistent alternate icons in all necessary sizes. )像主应用程序图标一样,每个替代应用程序图标都是作为一组大小不同的相关图像的集合传递的。当用户选择一个备用图标时,该适当大小的图标将取代主屏幕上的主应用程序图标、搜索框以及系统中的其他地方。更多内容请查看App Icon Sizes。
更多相关规范,请查看UIApplication中的setAlternateIconName。