iOS 图标图像（官方翻译版）

GuangdongQi

发布于 2018-05-24 17:47:23

3.6K0

发布于 2018-05-24 17:47:23

图像尺寸和分辨率

iOS用于将内容放置在屏幕上的坐标系基于以点为单位的测量，它们映射到显示屏中的像素。在标准分辨率屏幕上，一点等于一个像素。高分辨率屏幕具有较高的像素密度。因为在相同量的物理空间中有更多像素，所以每点有更多像素。因此，高分辨率显示器需要具有更多像素的图像。

为您的应用程序的所有设备提供高分辨率图像，适用于您的应用程序支持的所有设备。根据设备，您可以通过将每个图像中的像素数乘以特定比例因子来实现。标准分辨率图像的比例因子为1.0，称为@ 1x图像。高分辨率图像的比例因子为2.0或3.0，被称为@2x和@3x图像。假设你有一个标准的分辨率@1x图像，例如100px×100px。该图像的@2x版本将为200px×200px。@3x版本是300px×300px。

image.png

设计高分辨率作品

使用8px×8px的网格。网格保持线条清晰，并确保内容在所有尺寸上尽可能清晰，需要较少的修饰和锐化。将图像边界捕捉到网格以最小化半像素，并缩小缩小时可能会出现的模糊细节。

以适当的格式制作艺术作品。一般来说，使用去隔行PNG文件进行位图/光栅图稿。PNG支持透明度，因为它是无损的，压缩伪像不会模糊重要的细节或改变颜色。对于复杂的艺术作品来说，这是一个很好的选择，它需要像阴影，纹理和亮点这样的效果。使用JPEG的照片。其压缩算法通常产生比无损格式更小的尺寸，并且在照片中难以辨别伪影。但是，逼真的应用程序图标最适合PNG。将PDF用于需要高分辨率缩放的字形和其他平面的矢量图稿。

使用不需要完整24位颜色的PNG图形的8位调色板。使用8位调色板可以减少文件大小，而不会降低图像质量。此调色板不适合照片。优化JPEG文件以找到大小和质量之间的平衡。大多数JPEG文件可以被压缩，而不会明显降低所得到的图像。即使是少量的压缩也可以节省大量的磁盘空间。在每个图像上进行压缩设置，以找到可以获得可接受结果的最佳值。

提供图像和图标的替代文本标签。替代文字标签在屏幕上看不到，但是他们让VoiceOver听起来可以描述屏幕上的内容，使视觉障碍的人更方便导航。

应用图标

每个应用程序都需要一个美丽而难忘的图标，吸引App Store的关注，并在主屏幕上脱颖而出。您的图标是第一个与您的应用程序通信的机会，一目了然。它也出现在整个系统中，例如在设置和搜索结果中。

image.png

拥抱简约。找到一个单一的元素，捕捉您的应用程序的本质，并以简单，独特的形状表达该元素。谨慎地添加细节。如果图标的内容或形状过于复杂，则细节难以辨别，特别是较小的尺寸。

提供单个焦点。设计一个单一的中心点的图标，立即捕获注意力并清楚地识别您的应用程序。

设计一个可识别的图标。人们不应该分析图标来弄清楚它代表什么。例如，邮件应用程序图标使用与邮件通用关联的信封。花时间来设计一个美丽而引人入胜的抽象图标，从而艺术化地表达您的应用程序的目的

保持背景简单，避免透明度。确保你的图标是不透明的，不要杂乱的背景。给它一个简单的背景，所以它不会压倒附近的其他应用程序图标。您不需要填写整个图标的内容。

只有当它们是必需品或标志的一部分时才使用单词。应用程序的名称显示在主屏幕下方的图标下方。不要包含重复该名称的不重要的单词，或告诉人们如何处理您的应用程序，例如“观看”或“播放”。如果您的设计包含任何文本，请强调与您的应用程序提供的实际内容相关的单词。

不要包括照片，屏幕截图或界面元素。摄影细节在小尺寸上很难看出。屏幕截图对于应用图标来说太复杂了，通常不会帮助您传达应用的目的。图标中的界面元素具有误导性和混淆性。

不要使用苹果硬件产品的副本。苹果产品受版权保护，无法在您的图标或图像中复制。一般来说，避免显示设备的副本，因为硬件设计往往会频繁更改，并且可以使您的图标看起来过时。

不要在应用程序图标的整个界面。在整个应用程序中看到用于不同目的的图标可能会令人困惑。相反，请考虑使用您的图标的配色方案。见颜色。

根据不同的壁纸测试你的图标。您无法预测哪些壁纸会为主屏幕选择，所以不要只是测试您的应用程序的光或暗的颜色。看看它如何看待不同的照片。尝试在具有动态背景的实际设备上，随设备移动而改变透视图。

保持图标角落正方形。系统应用一个自动轮回图标角的蒙版。

应用程序图标属性

所有应用图标应符合以下规格。

image.png

1、颜色管理 2、图像大小和分辨率

应用图标大小

每个应用程序必须提供小图标，以便在应用程序安装后在主屏幕和整个系统中使用，还有一个更大的图标可在App Store中显示。

image.png

为不同的设备提供不同大小的图标。确保您的应用程序图标在您支持的所有设备上看起来都很棒。

使用App Store图标模拟您的小图标。虽然App Store图标的使用方式与小型图标不同，但它仍然是您的应用程序图标。它应该通常与较小版本的外观相匹配，尽管它可以更加丰富和更细致，因为它没有应用视觉效果。

Spotlight，设置和通知图标

每个应用程序还应提供一个小的图标，当应用程序名称与Spotlight搜索中的术语匹配时，iOS可以显示该图标。此外，具有设置的应用程序应提供一个小图标，以显示在内置的“设置”应用程序中，支持通知的应用程序应提供一个小图标，以在通知中显示。所有图标应该清楚地标识您的应用 - 理想情况下，它们应该符合您的应用图标。如果您不提供这些图标，iOS可能会缩小您的主要应用图标，以便在这些位置显示。

image.png

不要在“设置”图标上添加叠加层或边框。iOS会自动为所有图标添加1像素笔画，使其在“设置”的白色背景上看起来很好。

提示如果您的应用程序创建自定义文档，则不需要设计文档图标，因为iOS会使用您的应用程序图标自动创建文档图标。

用户可选的应用程序图标

对于某些应用，定制是一个唤起个人连接并增强用户体验的功能。如果您在应用程式中提供价值，您可以让使用者从您应用程式中嵌入的一组预定义图示中选择其他应用程式图示。例如，运动应用程序可能会为不同的团队提供图标，或者具有明暗模式的应用程序可能会提供相应的明暗图标。请注意，您的应用图标只能根据用户的要求进行更改，系统始终向用户提供此类更改的确认。

提供所有必要尺寸的视觉一致的替代图标。像您的主要应用程式图示一样，每个替代应用程式图示均会传送成不同大小的相关图片的集合。当用户选择替代图标时，该图标的相应尺寸将替换主屏幕，Spotlight和系统其他位置的主应用程序图标。为了确保系统中的备用图标始终保持一致 - 用户不应该在主屏幕上看到图标的一个版本，而在“设置”中则看不到完全不同的版本，请以与您为主应用程序图标提供的尺寸相同的尺寸提供它们（App Store图标除外）。请参阅应用图标大小。有关开发人员的指导，请参阅UIApplication的setAlternateIconName方法。

注意替代应用图标需要通过应用程序审核进行审核，并且必须遵守App Store评估指南。

自定义图标

如果您的应用程序包含系统图标无法表示的任务或模式，或者系统图标与应用程序的风格不符，则可以创建自己的图标。

创建可识别，高度简化的设计。太多的细节可能会使图标变得混乱或不可读。努力实现一种简单的通用设计，大多数人都会快速识别，不会发现冒犯。最好的图标使用与他们发起的动作直接相关的熟悉的视觉隐喻或他们透露的内容。

image.png

设计图标为字形。字形，也称为模板图像，是具有透明度，抗锯齿功能的单色图像，并且没有使用掩模来定义其形状的阴影。字形根据上下文和用户交互自动收到适当的外观，包括着色，突出显示和活力。各种标准接口元素支持字形，包括导航栏，标签栏，工具栏和主屏幕快速操作。准备比例因子为@ 2x的字形，并保存为PDF格式。因为PDF是一种允许高分辨率缩放的矢量格式，所以在您的应用程序中提供一个@ 2x版本通常就足够了，并允许其扩展其他分辨率。

保持你的图标一致。无论您仅使用自定义图标还是混合使用自定义和系统图标，应用程序中的所有图标在细节级别，光学重量，行程重量，位置和透视度方面都应相同。

确保图标清晰可辨。一般来说，固体图标往往比概述的图标更清晰。如果图标必须包含线条，请与其他图标和应用程序的排版协调权重。

使用颜色来传达选择和取消选择的状态。避免在两个不同的图标设计之间切换，如固体版本和概述版本。

避免在图标中加入文字。 如果您需要文字，请在图标下方显示标签，并相应调整其位置。

不要使用苹果硬件产品的副本。苹果产品受版权保护，无法在您的图标或图像中复制。一般来说，避免显示设备的副本，因为硬件设计往往会频繁更改，并且可以使您的图标看起来更加周到。

提供图标的替代文字标签。替代文字标签在屏幕上看不到，但是他们让VoiceOver听起来可以描述屏幕上的内容，使视觉障碍的人更方便导航。

自定义图标大小

最重要的是，您的应用程序的图标系列应在大小上视觉上保持一致。如果个别图标设计的重量不同，则某些图标可能需要略大于其他图标才能实现此效果。

导航栏和工具栏图标大小

准备自定义导航栏和工具栏图标时，请使用以下尺寸进行指导，但是根据需要进行调整以创建余额。

image.png

标签栏图标大小

在纵向方向，标签栏图标显示在标题标题上方。在横向上，图标和标题并排出现。根据设备和方向，系统会显示常规或紧凑的标签栏。您的应用程式应包含两种尺寸的自订标签栏图示。

启动屏幕

启动应用程序时，即会立即显示启动屏幕。您的应用程序的第一个屏幕快速替换启动屏幕，给人的印象是您的应用程序快速响应。发射屏幕不是艺术表现的机会。它只是为了提高您的应用程序的感觉，快速启动并立即准备使用。每个应用程序都必须提供启动屏幕。

启动屏幕

第一屏

由于设备屏幕大小不同，启动屏幕大小也不尽相同。为了适应这个需要，您可以为您的应用程序支持的设备提供启动屏幕作为Xcode故事板或一组静态图像。使用Xcode故事板是推荐的方法，因为故事板是灵活和适应性强。您可以使用单个故事板来管理所有的启动屏幕。要了解如何实现适应性界面，请参阅自动布局指南。

设计一个几乎与应用程序的第一个屏幕相同的启动屏幕。如果您在应用程序完成启动时包含看起来不同的元素，则可能会在启动屏幕和应用程序的第一个屏幕之间遇到不愉快的闪光。

避免在启动屏幕上包含文本。因为启动屏幕是静态的，任何显示的文本都不会被本地化。

低调发射。人们很可能会频繁切换应用，因此设计一个不会引起对应用程序启动体验的启发屏幕。

不要做广告发射屏幕不是品牌的机会。不要设计一个看起来像闪屏或“关于”窗口的入门体验。不要包含徽标或其他品牌元素，除非它们是应用程序的第一个屏幕的静态部分。

静态启动屏幕图像

最好在启动屏幕上使用Xcode故事板，但如果需要，您可以提供一组静态图像。为不同的设备创建不同大小的静态图像，并确保包含状态栏区域。

image.png

系统图标

该系统提供内置的图标，代表各种用例中常见任务和内容类型。导航栏和工具栏图标标签栏图标主屏幕快速操作图标

这是一个好主意，尽可能使用这些内置的图标，因为他们是熟悉的人。按照预期使用系统图标。每个系统提供的图像具有特定的，众所周知的意义。为了避免混淆用户，必须根据其含义和推荐用法使用每张图像。提供图标的替代文字标签。替代文字标签在屏幕上看不到，但是他们让VoiceOver听起来可以描述屏幕上的内容，使视觉障碍的人更方便导航。如果您找不到符合您需求的系统提供的设计，请设计自定义图标。设计自己比使用系统提供的图像更好。查看自定义图标。