无论是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或更早版本中运行时，请按照以下指南操作。
系统提供内置图标，表示各种用例中的常见任务和内容类型。
· 导航栏和工具栏图标
· 标签栏图标
1 主屏幕快速操作图标
在运行iOS12及更早版本的APP中，尽可能使用这些内置图标是个好办法，因为它们对用户来说已经很熟悉了。
1、按预期使用系统图标
每个系统提供的图像都有特定的、通用的含义。为了避免混淆用户，每个图像必须按照其含义和推荐的用法使用。
2、为图标提供文本标签
备选文字标签在屏幕上不可见，但它们让解说者可以直观地描述屏幕上的内容，使视力障碍人士更容易导航。
3、如果在系统提供的图标里找不到符合你要求的图标，请设计自定义图标
设计自己的设备比滥用系统提供的图标要好。
导航栏和工具栏图标
在导航栏和工具栏中使用以下图标。
注：可以使用文本代替图标来表示导航栏或工具栏中的项目。例如：日历在工具栏中使用“今日”、“日历”和“收件箱”。还可以使用固定空间元素在导航图标和工具栏图标之间提供填充。
标签栏图标
在标签栏中使用以下图标。
主屏幕快速行动图标
在主屏幕快速操作菜单中使用以下图标。
网友评论