图片的大小和分辨率
在iPhone5面世之前,iPhone只有3.5寸的版本,却有两种不同的分辨率,为了方便开发人员适配,iOS统一使用点(Point)对界面元素的大小进行描述;在非retina屏幕上,1pt=1pixel,在retina屏幕上 1pt = 2pixel。而后iOS分辨率不断提高,但是依然沿用pt来表示,由于在相同的物理空间中有更多的像素,所以每个pt有更多的pixel。
比例因子与分辨率的关系
iOS开发中要为你应用所支持的设备提供相应分辨率的图像
您可以通过将每个图像中的像素数乘以特定比例因子来实现此目的。标准分辨率图像的比例因子为1.0(非retina屏使用,现在基本不适配),被称为@ 1x图像。高分辨率图像的比例因子为2.0或3.0,被称为@ 2x和@ 3x图像。假设您有一个标准分辨率@ 1x图像,例如100px×100px。这个图像的@ 2x版本将是200px×200px。@ 3x版本将是300px×300px。
设备 | 比例因子 |
---|---|
iPhone X,Plus系列,iPad Pro | @3x |
其他retina分辨率iOS设备 | @2x |
非retina分辨率iOS设备 | @1x |
应用图标
每个应用程序都需要一个图标,在App Store中引起注意,并在主屏幕上脱颖而出。图标是用户对你的应用程序的第一印象。它也出现在整个系统中,如设置和搜索结果。
部分系统图标
应用图标属性
图标文件需要满足
属性 | 值 |
---|---|
格式 | PNG |
色域 | sRGB或者P3 |
图层 | 无叠加层和透明图层 |
形状 | 不带圆角的正方形 |
应用程序在主屏幕的图标大小
每个应用程序都必须提供小图标以便在主屏幕和整个系统上安装应用程序,以及在App Store中显示更大的图标。
主屏幕的图标
设备 | 图标尺寸 |
---|---|
iPhone | 60pt × 60pt |
iPad Pro | 83.5pt × 83.5pt |
iPad,iPad mini | 76pt × 76pt |
App Store | 1024pt × 1024pt @1x |
Spotlight,设置,和通知中心的图标
设备 | Spotlight | 设置 | 通知 |
---|---|---|---|
iPhone/iPad | 40pt × 40pt | 29pt × 29pt | 20pt × 20pt |
每个应用程序还应提供一个小图标,以便在spotlight中显示。带有设置的应用程序应该提供一个小图标以显示在内置的“设置”应用程序中,支持通知的应用程序应该提供一个小图标以显示在通知中。所有的图标应该清楚地标识你的应用程序,理想情况下,它们应该匹配你的应用程序如果您不提供这些图标,iOS可能会缩小您的主应用程序图标以显示在这些位置。
设置和通知中的图标
设备 | Spotlight | 设置 | 通知 |
---|---|---|---|
iPhone/iPad | 40pt × 40pt | 29pt × 29pt | 20pt × 20pt |
应用程序中的自定义图标
NavigationBar和Toolbar的图标大小
目标尺寸 | 最大尺寸 |
---|---|
25pt × 25pt | 28pt × 28pt |
TabBar的图标尺寸
在纵向方向上,标签栏图标显示在标签标题上方。在横向,图标和标题并排显示。根据设备和方向的不同,系统会显示常规或紧凑的选项卡栏。您的应用程序应包含两种尺寸的自定义选项卡栏图标。
属性 | 常规尺寸 | 紧凑尺寸 |
---|---|---|
圆形图标 | 25pt × 25pt | 18pt × 18pt |
方形图标 | 23pt × 23pt | 17pt × 17pt |
宽图标 | 31pt(宽) | 23pt(宽) |
长图标 | 28pt(长) | 20pt (长) |
程序启动图片
启动图片会在您的应用程序启动时立即出现。启动图片快速被您的应用程序的第一个屏幕取代,给人的印象是你的应用程序是快速和响应。每个应用程序都必须提供启动屏幕。
启动图片(左)和首屏(右)
启动图片尺寸
设备 | 竖屏 | 横屏 |
---|---|---|
12.9“iPad Pro | 2048px×2732px | 2732px×2048px |
10.5“iPad Pro | 1668px×2224px | 2224px×1668px |
9.7“iPad | 1536px×2048px | 2048px×1536px |
7.9“iPad mini 4 | 1536px×2048px | 2048px×1536px |
iPhone X | 1125px×2436px | 2436px×1125px |
iPhone 8 Plus | 1242px×2208px | 2208px×1242px |
iPhone 8 | 750px×1334px | 1334px×750px |
iPhone 7 Plus | 1242px×2208px | 2208px×1242px |
iPhone 7 | 750px×1334px | 1334px×750px |
iPhone 6s Plus | 1242px×2208px | 2208px×1242px |
iPhone 6s | 750px×1334px | 1334px×750px |
iPhone SE | 640px×1136px | 1136px×640px |
网友评论