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 |