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/)
尺寸仅供参考,具体设计时还需考虑安全区域、状态栏高度等因素。
还没有评论,来说两句吧...