阅读量:0
iPad和iPhone的APP UI设计尺寸和参考手册包括不同的分辨率、屏幕尺寸和设计规范，以确保应用在不同设备上的兼容性和用户体验。
iPad和iPhone APP UI设计尺寸和参考手册
尺寸
| 设备类型 | 设计尺寸（像素） | 分辨率（PPI） | 屏幕比例 |
| iPhone SE | 640 x 1136 | 72 PPI | 16:9 |
| iPhone 4/4s | 640 x 960 | 72 PPI | 16:9 |
| iPhone 5 | 640 x 1136 | 72 PPI | 16:9 |
| iPhone 6/7/8 | 750 x 1334 | 72 PPI | 16:9 |
| iPhone 6/7/8 Plus | 1242 x 2208 | 72 PPI | 16:9 |
| iPhone X / XS | 1125 x 2436 | 72 PPI | 19.5:9 |
| iPhone 11 Pro / XS Max / 12 Pro Max / 13 Pro Max / 14 Pro Max / 15 Pro Max | 1284 x 2778 | 72 PPI | 19.5:9 |
| iPad 1/2 | 1024 x 768 | 72 PPI | 4:3 |
| iPad 3/4 | 1536 x 2048 | 72 PPI | 4:3 |
| iPad Air / Air 2 / mini (第1代) / mini (第2代) / mini (第3代) / mini (第4代) / mini (第5代) / mini (第6代) | 2048 x 1536 | 72 PPI | 4:3 |
| iPad Pro (12.9inch) 1st / 2nd / 3rd Gen / 4th Gen / 5th Gen / 6th Gen | 2732 x 2048 | 72 PPI | 4:3 |
| iPad Pro (11inch) 1st / 2nd / 3rd Gen | 2388 x 1668 | 72 PPI | 4:3 |
| iPad Pro (10.5inch) | 2224 x 1668 | 72 PPI | 4:3 |
图标
| 设备类型 | 应用图标尺寸（像素） |
| iPhone SE / 4/4s / 5 / 6/7/8 | 120 x 120 |
| iPhone 6/7/8 Plus / X / XS / 11 Pro / XS Max / 12 Pro Max / 13 Pro Max / 14 Pro Max / 15 Pro Max | 180 x 180 |
| iPad 1/2 / mini (第1代) / mini (第2代) / mini (第3代) / mini (第4代) / mini (第5代) / mini (第6代) / Air / Air 2 / Pro (12.9inch) / Pro (11inch) / Pro (10.5inch) | 152 x 152 |
小贴士
1、设计要点：在设计时，需要按照上述表格中的尺寸来放大2倍作为实际的设计尺寸，初学者可以模仿苹果公司成熟的案例，导出一张完整的iPhone手机界面作为设计的底版，这是最快最有效的设计流程。
2、导出文件：确保为开发者提供正确的设计文件，包括所有必要的图层和切片，这样可以避免开发者在实现过程中遇到不必要的麻烦，提高开发效率。
常见问题解答
1、Q1：为什么需要按照2倍尺寸进行设计？
A1：因为iOS设备的Retina显示屏需要更高的分辨率图像以保持图像的清晰度，通过设计2倍尺寸的图像，可以确保在高分辨率设备上显示效果最佳。
2、Q2：如何确保设计在不同设备上的一致性？
A2：遵循官方的设计规范，使用响应式设计方法，确保UI元素在不同设备上的布局和样式保持一致，使用Auto Layout和Size Classes等工具可以帮助实现这一点。
通过遵循这些设计尺寸和参考手册，设计师可以为iPad和iPhone创建出色的APP UI设计，确保应用在不同设备上的一致性和高质量表现。
iPad 和 iPhone APP UI 设计尺寸及参考手册
基本尺寸单位
iPad
尺寸单位：英寸（in）和像素（px）
分辨率：根据设备型号有所不同
iPhone
尺寸单位：英寸（in）和像素（px）
分辨率：根据设备型号有所不同
iPad UI 设计尺寸
1. 视觉设计尺寸
iPad Pro 12.9英寸
视觉宽度：11.02英寸
视觉高度：8.46英寸
iPad Pro 11英寸
视觉宽度：10.31英寸
视觉高度：7.46英寸
iPad Air（第4代）
视觉宽度：8.46英寸
视觉高度：6.05英寸
iPad（第8代）
视觉宽度：8.46英寸
视觉高度：5.86英寸
2. 像素尺寸
iPad Pro 12.9英寸
宽度：2048px
高度：2732px
iPad Pro 11英寸
宽度：1668px
高度：2388px
iPad Air（第4代）
宽度：1792px
高度：2224px
iPad（第8代）
宽度：1792px
高度：2224px
iPhone UI 设计尺寸
1. 视觉设计尺寸
iPhone 14 Pro Max
视觉宽度：3.69英寸
视觉高度：7.79英寸
iPhone 14 Pro
视觉宽度：3.66英寸
视觉高度：7.82英寸
iPhone 14 Plus
视觉宽度：3.68英寸
视觉高度：7.78英寸
iPhone 14
视觉宽度：3.68英寸
视觉高度：7.76英寸
iPhone 13 Pro Max
视觉宽度：3.69英寸
视觉高度：7.79英寸
iPhone 13 Pro
视觉宽度：3.66英寸
视觉高度：7.82英寸
iPhone 13 Mini
视觉宽度：3.50英寸
视觉高度：6.73英寸
iPhone 12 Pro Max
视觉宽度：3.69英寸
视觉高度：7.79英寸
iPhone 12 Pro
视觉宽度：3.66英寸
视觉高度：7.82英寸
iPhone 12 Mini
视觉宽度：3.50英寸
视觉高度：6.73英寸
2. 像素尺寸
iPhone 14 Pro Max
宽度：390px
高度：844px
iPhone 14 Pro
宽度：390px
高度：837px
iPhone 14 Plus
宽度：390px
高度：829px
iPhone 14
宽度：390px
高度：828px
iPhone 13 Pro Max
宽度：390px
高度：844px
iPhone 13 Pro
宽度：390px
高度：837px
iPhone 13 Mini
宽度：350px
高度：677px
iPhone 12 Pro Max
宽度：390px
高度：844px
iPhone 12 Pro
宽度：390px
高度：837px
iPhone 12 Mini
宽度：350px
高度：677px
参考手册
Apple Human Interface Guidelines
官方指南，包含UI设计原则和最佳实践。
网址：[https://developer.apple.com/humaninterfaceguidelines/](https://developer.apple.com/humaninterfaceguidelines/)
Apple Design Resources
提供设计工具和资源，包括图标、颜色、字体等。
网址：[https://developer.apple.com/design/](https://developer.apple.com/design/)
Avocode
在线设计协作工具，支持多种文件格式，包括设计尺寸和规范。
网址：[https://www.avocode.com/](https://www.avocode.com/)
尺寸仅供参考，具体设计时还需考虑安全区域、状态栏高度等因素。
