iPhone 尺寸规范大全
精简的尺寸，看完就懂
| 设备名称 | 屏幕尺寸 | PPI | Asset | 竖屏点（point） | 竖屏分辨率（px） |
|---|---|---|---|---|---|
| iPhone X | 5.8 in | 458 | @3x | 375 x 812 | 1125 x 2436 |
| iPhone 8+, 7+, 6s+, 6+ | 5.5 in | 401 | @3x | 414 x 736 | 1242 x 2208 |
| iPhone 8, 7, 6s, 6 | 4.7 in | 326 | @2x | 375 x 667 | 750 x 1334 |
| iPhone SE, 5, 5S, 5C | 4.0 in | 326 | @2x | 320 x 568 | 640 x 1136 |
| iPhone 4, 4S | 3.5 in | 326 | @2x | 320 x 480 | 640 x 960 |
| iPhone 1, 3G, 3GS | 3.5 in | 163 | @1x | 320 x 480 | 320 x 480 |
| iPad Pro 12.9 | 12.9 in | 264 | @2x | 1024 x 1366 | 2048 x 2732 |
| iPad Pro 10.5 | 10.5 in | 264 | @2x | 834 x 1112 | 1668 x 2224 |
| iPad Pro, iPad Air 2, Retina iPad | 9.7 in | 264 | @2x | 768 x 1024 | 1536 x 2048 |
| iPad Mini 4, iPad Mini 2 | 7.9 in | 326 | @2x | 768 x 1024 | 1536 x 2048 |
| iPad 1, 2 | 9.7 in | 132 | @1x | 768 x 1024 | 768 x 1024 |
如果你打算直接用iPhone X来设计界面：
注意：实际工作中一般不会直接用iPhone X 来设计，建议还是用750*1334来设计再适配iPhone X @3x，比较方便。
下面横向的尺寸标注数值是1倍的pt单位，自己换成像素，乘3。
iPhone 8 (8, 7, 6S, 6)，都以iPhone 6为例子，尺寸没变。
更多文章推荐：
facebook出品的iOS 10 GUI (iPhone)源文件
字体：
中文字体：苹方黑PingFang SC
英文字体：San Francisco（ SF UI Text 、SF UI Display）
其中SF UI Text适用与小于19pt的文字，SF UI Display适用于大于20pt的文字
常见的字体大小：
24px、26px、28px、30px、32px、34px，36px等等。记住是偶数的。最小字号20px。
| 元素 | 字重 | 字号(pt) | 行距 | 字间距 |
|---|---|---|---|---|
| Title 1 | Light | 28pt | 34pt | 13pt |
| Title 2 | Regular | 22pt | 28pt | 16pt |
| Title 3 | Regular | 20pt | 24pt | 19pt |
| Headline | Semi-Bold | 17pt | 22pt | -24pt |
| Body | Regular | 17pt | 22pt | -24pt |
| Callout | Regular | 16pt | 21pt | -20pt |
| Subhead | Regular | 15pt | 20pt | -16pt |
| Footnote | Regular | 13pt | 18pt | -6pt |
| Caption 1 | Regular | 12pt | 16pt | 0pt |
| Caption 2 | Regular | 11pt | 13pt | 6pt |
| 元素 | 字号（pt） | 字重 | 字距（pt） | 类型 |
|---|---|---|---|---|
| Nav Bar Title | 17 | Medium | 0.5 | Display |
| Nav Bar Button | 17 | Regular | 0.5 | Display |
| Search Bar | 13.5 | Regular | 0 | Text |
| Tab Bar Button | 10 | Regular | 0.1 | Text |
| Table Header | 12.5 | Regular | 0.25 | Text |
| Table Row | 16.5 | Regular | 0 | Text |
| Table Row Subline | 12 | Regular | 0 | Text |
| Table Footer | 12.5 | Regular | 0.2 | Text |
| Action Sheets | 20 | Regular / Medium | 0.5 | Display |
启动图标做1024×1024尺寸，一般做方形无圆角。然后用 IconTemplate 自动切图一套图标资源丢给程序员就ok了。
| 设备名称 | 应用图标 | App Store图标 | Spotlight图标 | 设置图标 |
|---|---|---|---|---|
| iPhone X, 8+, 7+, 6s+, 6s | 180 x 180 px | 1024 x 1024 px | 120 x 120 px | 87 x 87 px |
| iPhone X, 8, 7, 6s, 6, SE，5s, 5c, 5, 4s, 4 |
120 x 120 px | 1024 x 1024 px | 80 x 80 px | 58 x 58 px |
| iPhone 1, 3G, 3GS | 57 x 57 px | 1024 x 1024 px | 29 x 29 px | 29 x 29 px |
| iPad Pro 12.9, 10.5 | 167 x 167 px | 1024 x 1024 px | 80 x 80 px | 58 x 58 px |
| iPad Air 1 & 2, Mini 2 & 4, 3 & 4 |
152 x 152 px | 1024 x 1024 px | 80 x 80 px | 58 x 58 px |
| iPad 1, 2, Mini 1 | 76 x 76 px px | 1024 x 1024 px | 40 x 40 px | 29 x 29 px |
界面里的小图标常见的尺寸：
24px、32px，48px等，记住4的倍数比较好。
注意图标的尺寸要统一尺寸，以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大，需要调整下。
界面的图标切图：
用Cutterman选中@2x @3x导出。
| 设备名称 | 操作系统 | 尺寸 in | PPI | 纵横比 | 宽 x 高 dp | 宽 x 高 px | 密度 dpi |
|---|
| iPhone X | iOS | 5.8 | 458 | 19 : 9 | 375 x 812 | 1125 x 2436 | 3.0 xxhdpi |
| iPhone 8+ (8+, 7+, 6S+, 6+) | iOS | 5.5 | 401 | 16 : 9 | 414 x 736 | 1242 x 2208 | 3.0 xxhdpi |
| iPhone 8 (8, 7, 6S, 6) | iOS | 4.7 | 326 | 16 : 9 | 375 x 667 | 750 x 1334 | 2.0 xhdpi |
| iPhone SE（SE, 5S, 5C） | iOS | 4.0 | 326 | 16 : 9 | 320 x 568 | 640 x 1136 | 2.0 xhdpi |
| Android One | Android | 4.5 | 218 | 16 : 9 | 320 x 569 | 480 x 854 | 1.5 hdpi |
| Google Pixel | Android | 5.0 | 441 | 16 : 9 | 411 x 731 | 1080 x 1920 | 2.6 xxhdpi |
| Google Pixel XL | Android | 5.5 | 534 | 16 : 9 | 411 x 731 | 1440 x 2560 | 3.5 xxxhdpi |
| Moto X | Android | 4.7 | 312 | 16 : 9 | 360 x 640 | 720 x 1280 | 2.0 xhdpi |
| Moto X 二代 | Android | 5.2 | 424 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
| Nexus 5 | Android | 5.0 | 445 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
| Nexus 5X | Android | 5.2 | 565 | 16 : 9 | 411 x 731 | 1080 x 1920 | 2.6 xxhdpi |
| Nexus 6 | Android | 6.0 | 493 | 16 : 9 | 411 x 731 | 1440 x 2560 | 3.5 xxxhdpi |
| Nexus 6P | Android | 5.7 | 518 | 16 : 9 | 411 x 731 | 1440 x 2560 | 3.5 xxxhdpi |
| Samsung Galaxy S8 | Android | 5.8 | 570 | 18.5 : 9 | 360 x 740 | 1440 x 2960 | 4.0 xxxhdpi |
| Samsung Galaxy S8+ | Android | 6.2 | 529 | 18.5 : 9 | 360 x 740 | 1440 x 2960 | 4.0 xxxhdpi |
| Samsung Galaxy Note 4 | Android | 5.7 | 515 | 16 : 9 | 480 x 853 | 1440 x 2560 | 3.0 xxhdpi |
| Samsung Galaxy Note 5 | Android | 5.7 | 518 | 16 : 9 | 480 x 853 | 1440 x 2560 | 3.0 xxhdpi |
| Samsung Galaxy S5 | Android | 5.1 | 432 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
| Samsung Galaxy S7 (S7, S6, S6 Edge) | Android | 5.1 | 576 | 16 : 9 | 360 x 640 | 1440 x 2560 | 4.0 xxxhdpi |
| Samsung Galaxy S7 Edge | Android | 5.5 | 534 | 16 : 9 | 360 x 640 | 1440 x 2560 | 4.0 xxxhdpi |
| Smartisan T2 | Android | 4.95 | 445 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
| Smartisan M1 | Android | 5.15 | 428 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
| Smartisan M1L | Android | 5.7 | 515 | 16 : 9 | 480 x 853 | 1440 x 2560 | 3.0 xxhdpi |
| 坚果 Pro | Android | 5.5 | 403 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
| OnePlus 5 | Android | 5.5 | 401 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
| OnePlus 3T | Android | 5.5 | 401 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
| Oppo R9s (R9s, R11) | Android | 5.5 | 401 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
| Oppo R9s Plus (R9s Plus, R11 Plus) | Android | 6.0 | 368 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
| Oppo A57 | Android | 5.2 | 282 | 16 : 9 | 360 x 640 | 720 x 1280 | 2.0 xhdpi |
| Oppo A59s | Android | 5.5 | 267 | 16 : 9 | 360 x 640 | 720 x 1280 | 2.0 xhdpi |
| Oppo A37 | Android | 5.0 | 293 | 16 : 9 | 360 x 640 | 720 x 1280 | 2.0 xhdpi |
| 小米MIX2 | Android | 5.99 | 403 | 18 : 9 | 360 x 720 | 1080 x 2160 | 3.0 xxhdpi |
| 小米MIX | Android | 6.4 | 362 | 17 : 9 | 360 x 680 | 1080 x 2040 | 3.0 xxhdpi |
| 小米Note 3 | Android | 5.5 | 403 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
| 小米Note 2 | Android | 5.7 | 386 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
| 小米6 | Android | 5.15 | 428 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
| 小米5s | Android | 5.15 | 428 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
| 小米5s Plus | Android | 5.7 | 386 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
| 小米Max | Android | 6.44 | 342 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
| 红米Note 4 (4, Note 4X) | Android | 5.5 | 403 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
| 红米 4 (4, 4X) | Android | 5.0 | 296 | 16 : 9 | 360 x 640 | 720 x 1280 | 2.0 xhdpi |
| Vivo X9 (X9, X9s) | Android | 5.5 | 401 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
| Vivo X9 Plus (X9 Plus, X9s Plus) | Android | 5.88 | 375 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
| HUAWEI P10 | Android | 5.1 | 432 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
| HUAWEI P10 Plus | Android | 5.5 | 540 | 16 : 9 | 360 x 640 | 1440 x 2560 | 4.0 xxxhdpi |