无论是UI、交互，还是产品经理，都应该熟读iOS平台设计规范。这对我们的产品设计，百利而无一弊。

   图标与图片(Icons and Images)  

一、图片大小和分辨率(Image Size and Resolution)

iOS屏幕上放置内容的坐标系统，是基于以点为单位的测量值，该测量值是映射到显示屏上的像素。

标准分辨率显示器的像素密度为1:1(或@1X)，其中一个像素等于一个点。高分辨率显示屏具有更高的像素密度，提供2.0或3.0的比例因子(称为@2x和@3x)。因此，高分辨率显示需要更多像素的图像。

例如：假设你有一个100px×100px的标准分辨率(@ 1x)图像。该图像的@ 2x版本为200px×200px，@ 3x版本为300px×300px。

为所有支持的设备，提供所有图标/图片的高分辨率图像。根据设备的不同，你可以将每个图片中的像素数乘以特定的比例因子来实现这个目的。

设计高分辨率的设计

1、使用8px-by-8px网格

网格可以保持线条锐利，并确保内容在所有尺寸下尽可能清晰，不需要再进行修饰和锐化。将图片边界紧贴网格边缘，以最小化缩小时可能会出现的半像素和模糊细节。

2、用适当的格式来制作图标/图片

通常，对位图/栅格图稿使用去隔行PNG文件。PNG支持透明度，因为它是无损的，被压缩也不会模糊重要细节或改变颜色。对于需要阴影、纹理和高光等效果的复杂图标/图片来说，PNG是一个不错的选择。

将照片用JPEG格式。它的压缩算法使它比PNG格式可以产生更小的尺寸，并且在照片中更难辨别伪像。但是，照片般逼真的APP图标看起来最适合用PNG。将PDF用于需要高分辨率缩放的字形和其他平面矢量图稿。

3、对于不需要全24位颜色的PNG图形，请使用8位调色板

使用8位调色板可以在不降低图像质量的情况下让文件更小。此调色板不适用于照片。

4、优化JPEG文件以在大小和质量之间找到平衡

可以压缩大多数JPEG文件，而且生成的图像质量也不会被降低。即使是少量压缩也可以节省大量磁盘空间。

尝试对每个图像进行压缩设置，以找到产生可接受结果的最佳值。

5、为图片和图标提供备选的文本标签

备选文字标签在屏幕上不可见，但它们让解说者可以直观地描述屏幕上的内容，使视力障碍人士更容易导航。

二、应用图标(App Icon)

每个APP都需要一个美观且令人难忘的图标来吸引 App Store 的注意，并在主屏幕上脱颖而出。应用图标是用户第一次与APP进行交流的机会，它让你的APP目标/用途一目了然。它也会出现在整个系统中，例如设置和搜索结果中。

1、拥抱简约

找到一个能够捕捉APP本质的元素，并以简单、独特的形状表达该元素。谨慎添加细节。如果图标的内容或形状过于复杂，细节很难被看出来，尤其是在较小尺寸时。

2、提供单一焦点

设计一个单一中心点的图标，可以立即捕获用户的注意力，并清楚地识别你的APP。

3、设计一个可识别的图标

不应该让用户去分析图标它代表什么。例如：邮件APP图标用的是一个信封，因为信封与邮件关联很密切。

多花点时间设计一个美观且引人入胜的抽象图标，艺术地表示APP的用途。

4、保持背景简单，避免透明度

确保你的图标不透明，并且不会使背景混乱。给它一个简单的背景，这样它就不会在其他应用图标中过于突兀。没有必要用内容填满整个图标。

5、只有在文字必不可少或是商标的一部分时才使用

APP的名称会显示在主屏幕上的图标下方。不要包含重复的名称，或告诉用户如何使用你的APP的鸡肋文字，例如 “观看”或“播放”。

如果你的设计包含任何文字，请保证它与你的APP提供的实际内容是相关的。

6、不要包含照片，屏幕截图或界面元素

小尺寸的照片很难看到细节。屏幕截图对于APP图标来说过于复杂，通常无法帮助你传达APP的用途。而界面元素被用在APP图标中会有误导性，或者让人混淆。

7、不要使用Apple硬件产品的副本

Apple产品受版权保护，无法在你的图标或图像中复用。通常，避免显示Apple设备的副本，因为硬件设计往往经常更改，并且会使图标看起来过时。

8、不要在整个界面中放置APP图标

在APP中看到用于不同目的相同图标可能会令人困惑。相反，你可以通过图标的配色方案解决。

9、针对不同的壁纸测试你的图标

你无法预测用户将为其主屏幕选择哪种壁纸，因此不要只针对浅色或深色模式测试。

多看看它在不同的照片背景图上是怎样的。在具有动态背景的实际设备上进行尝试，该背景会随着设备的移动而改变透视效果。

10、保持图标四个角直角

系统应用自动对图标的直角进行遮罩，从而形成统一的圆角图标。

应用程序图标属性

所有应用程序图标都应符合以下规范:

应用程序图标大小

每个APP都必须提供小图标，以便在安装后在主屏幕和整个系统中都可使用，同时在App Store中提供较大尺寸的图标。

为不同的设备提供不同大小的图标。确保所支持的所有设备上的APP图标都能很好呈现。

让App Store图标与小图标相匹配。虽然App Store图标的使用方式与小图标有所不同，但它仍然是你的APP图标。它通常应该与较小的版本相匹配，尽管没做视觉效果，它仍然可以巧妙地展示更丰富和更详细的细节。

Spotlight、设置和通知图标

每个APP还应提供一个小图标，当APP名称与Spotlight搜索中的关键词匹配时，iOS可以显示该图标。此外，提供可以显示在系统内置的“设置”APP中的小图标，支持通知功能的APP也应提供一个小图标以显示在通知中。

确保所有图标都能清楚地识别出你的APP，理想情况下，它们都应与你的APP图标相匹配。如果你不提供这些图标，iOS可能会缩小你的主应用程序图标显示在这些位置上。

不要在“设置”图标上添加叠加层或边框。iOS会自动为所有图标添加1像素描边，以便它们在“设置”的白色背景上看起来更友好。

用户可选的APP图标

对于某些APP来说，定制是一项能够唤起用户共鸣并增强用户体验的功能。如果它能在你的APP中提供价值，你可以从APP中嵌入的一组预定义图标让用户来选择一个作为备用应用图标。

例如：一个体育APP可能为不同的球队提供图标，或者一个有明暗模式的APP可能会提供相应的明暗图标。请注意，APP图标只能根据用户的请求进行更改，并且系统始终会向用户提供此类更改的确认。

提供所有尺寸并且视觉上一致的备用图标。与主应用程序图标一样，每个备用图标都作为一组大小不同的相关图像提供。当用户选择备用图标时，该图标的相应大小将替换主屏幕、Spotlight和系统等其他位置的图标。

为了确保备用图标在整个系统中统一显示，避免让用户在主屏幕上看到一个版本的图标，又在设置中的看到完全不同的版本的图标 - 例如：提供与主应用程序图标相同尺寸的图标(App Store图标除外)。

三、自定义图标 (iOS12及更早版本)

在iOS 13或更高版本中，更习惯使用SF Symbols符号(简称SF符号)来表示APP中的任务和模式。

当你的APP在iOS 12或更早版本中运行时，如果你的APP含有不能用系统图标表示的任务或模式，亦或是系统图标与你的APP风格不符时，你可以创建自定义位图图标。请按照以下指导进行操作。

注：SF Symbols 提供了一组1500多个一致、可配置的符号，你可以在APP中使用这些符号。Apple设计的 SF Symbols 可与 San Francisco 系统字体无缝对接，因此SF符号可确保与所有规格和大小的文本进行光学垂直对齐。

SF 符号有9种规格 - 从 Ultralight 到 Black  - 每个规格对应于 San Francisco 系统字体的规格。SF的每个符号有3种尺寸可供选择：Small、Medium和Large 。比例是按照San Francisco系统字体的高度上限定义的。

1、创建辨识度高的、极简的设计

加太多的细节可能会使图标混乱或不具可读性。力求简单、通用的设计，大多数人会很快认识到，并且不会觉得很突兀。

最好的图标是使用熟悉的视觉隐喻，这些隐喻与他们发起的行为或代表的内容直接相关。

2、将图标设计成象形图标

象形，也称为模板图像，是具有透明度、抗锯齿效果的单色图像，并且没有使用蒙版定义其形状的阴影。

象形图标根据上下文和用户交互，自动获得适当的外观 - 包括着色、突出显示和活力。各种标准界面元素都支持象形图标，包括导航栏、标签栏、工具栏和主屏幕快速操作。

3、准备比例因子为@2x的象形图标并将其另存为PDF

因为PDF是一种支持高分辨率缩放的矢量格式，所以通常只需在APP中提供一个@2x版本，并允许它在其他分辨率上缩放即可。

4、保持图标一致

无论你是只使用自定义图标，还是混合自定义图标和系统图标，APP中的所有图标在细节级别、光学重量、笔触粗细、位置和透视方面都应该相同。

5、确保图标清晰可见

一般来说，实心图标比线性图标更清晰易读。如果一个图标必须包含线条，请协调它与其他图标/APP排版的权重。

6、使用颜色来表示选中和未选中状态

避免在两种不同的图标设计之间切换，例如实习填充图标和线性图标。

7、避免图标中包含文字

如果真的很需要文字，请在图标下方显示文字标签并相应调整其位置。

8、不要使用Apple硬件产品的副本

Apple的产品受版权保护，无法在你的图标或图像中复用。通常，避免显示Apple设备的副本，因为硬件设计往往经常更改，并且会使图标看起来过时。

9、为图标提供备选文本标签

备选文字标签在屏幕上不可见，但它们让解说者可以直观地描述屏幕上的内容，使视力障碍人士更容易导航。

自定义图标大小

最重要的是，同一系列的APP图标，应该在视觉上保持大小一致。如果某个图标设计的重量不同，则这个图标可能需要略大于其他图标才能达到视觉一致。

主屏幕快速操作图标大小(3D Touch)

标题旁边会出现主屏幕快速操作图标。如果你需要为主屏幕快速操作创建自定义图标，请使用以下尺寸作为指南：

导航栏和工具栏图标大小

在自定义导航栏和工具栏图标时，请使用以下尺寸作为指导，但也需要根据需要进行调整以创建平衡：

标签栏图标大小

在纵向方向上，标签栏图标显示在标签标题上方。而在横向方向上，图标和标题则并排显示。根据设备和方向，系统显示常规或紧凑的标签栏。你的APP应包含两种尺寸的自定义标签栏图标。

目标宽度和高度(圆形)

目标宽度和高度(方形)

目标宽度(宽)

目标高度(高)

四、启动屏幕(Launch Screen)

当APP启动时，系统会立即显示启动屏幕，并立即将其替换为APP的首屏，从而给用户留下快速响应的印象。

启动屏幕并不是用来表现你设计功力的。它仅用于增强APP的感知，让用户可以快速启动并立即使用APP。每个APP都必须提供启动屏幕。

为了适应不同设备和环境的屏幕尺寸，例如多任务处理，请使用Xcode故事板来提供启动屏幕。故事板具有灵活性和适应性，你可以使用单个故事板来管理所有启动屏幕。

1、设计一个与APP首屏尽量相同的启动屏

如果你的启动屏包含看起来很不同的元素，则用户可能会在启动屏幕和APP的第一个屏幕之间感受到令人不愉快的闪烁。

PS：对于这一点，国内几乎所有APP都是背道而驰，千篇一律地选择用Logo或Slogan做成可传递品牌价值的启动图。国外的APP就践行得比较好，启动页和首页很相似，过度自然，用户几乎感觉不到有启动这个过程，用户体验很好，比如Facebook、Drribbble、Instagram。站在用户体验的角度，个人还是比较赞同这种做法，尤其是注重效率的APP。

2、避免在启动屏上包含文字

由于启动屏是静态的，因此任何显示的文本都不会本土化(国际化)。

3、弱化启动

用户可能会经常切换退出APP，因此设计一个不会引起用户过度关注的启动屏。

4、不要打广告

启动屏幕不适合用做品牌推广。不要设计类似开屏广告或者介绍窗口的启动体验。不要在启动屏中包含Logo或其他品牌元素，除非它们是APP首屏的一部分(静态)。

静态启动屏幕图像(不推荐)

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

PS：Apple官方最不推荐的，恰恰是我们国内APP最常用的。

五、系统图标(System Icons)iOS12及更早版本

在iOS 13或更高版本中，更习惯使用SF符号来表示APP中的任务和模式。当你的APP在iOS 12或更早版本中运行时，请按照以下指南操作。

系统提供内置图标，表示各种用例中的常见任务和内容类型。

• 导航栏和工具栏图标

• 标签栏图标

• 主屏幕快速操作图标

在运行iOS12及更早版本的APP中，尽可能使用这些内置图标是个好办法，因为它们对用户来说已经很熟悉了。

1、按预期使用系统图标

每个系统提供的图像都有特定的、通用的含义。为了避免混淆用户，每个图像必须按照其含义和推荐的用法使用。

2、为图标提供文本标签

备选文字标签在屏幕上不可见，但它们让解说者可以直观地描述屏幕上的内容，使视力障碍人士更容易导航。

3、如果在系统提供的图标里找不到符合你要求的图标，请设计自定义图标

设计自己的设备比滥用系统提供的图标要好。

导航栏和工具栏图标

在导航栏和工具栏中使用以下图标。

注：可以使用文本代替图标来表示导航栏或工具栏中的项目。例如：日历在工具栏中使用“今日”、“日历”和“收件箱”。还可以使用固定空间元素在导航图标和工具栏图标之间提供填充。

标签栏图标

在标签栏中使用以下图标。

主屏幕快速行动图标

在主屏幕快速操作菜单中使用以下图标。

- 推 荐 阅 读 -

iOS平台设计规范(四)视觉

iOS平台设计规范(三)交互

iOS平台设计规范(二)APP架构

iOS平台设计规范(一)原则与界面要素