iphone国际通用设计尺寸规范

iphone国际通用设计尺寸规范

推荐设计尺寸

PhotoShop Sketch / Adobe XD 切图输出
750 x 1334 px (144ppi) 375 x 667 pt @2x、@3x

其他尺寸建议(iPhone6/7/8)750x1334px

状态栏高度 导航栏高度 Tab栏高度 字号
20pt(40px) 44pt(88px)导航标题字号建议17pt(34px)、导航栏图标建议22pt(44px) 49pt(98px)、Tab栏图标建议30pt(60px)、Tab栏图标注释文字11pt(22px)、左右安全距离建议12pt(24px) 10pt(20px)-34pt(68px)

iTunes 截图尺寸

1242 x 2688 px 1125 x 2436 px

适配相关

矢量界面工具作图时只需要调整设计稿上下尺寸便可,使用Photoshop作图需要放大缩小设计稿然后调上下尺寸可以得到新版设计稿,需要两套切图:@2x(750x1334px)、@3x(1242x2208px)

名称 尺寸(px) 分辨率(ppi) 状态栏(px) 导航栏(px) 标签栏 / 指示栏(px) 显示尺寸
iPhone 11/11 Pro 1125 x 2436 

1242 x 2688

458 132 132 147 / 102 5.8 ″ / 6.5 ″
iPhone XS Max 1242 x 2688

414 x 896 pt

458 132 132 147 / 102 6.5 ″
iPhone XS 1125 x 2436

375 x 812 pt

458 132 132 147 / 102 5.8 ″
iPhone XR 828 x 1792

414 x 896 pt

326 132 132 147 / 102 6.1 ″
iPhone X 1125 x 2436

375 x 812 pt

458 132 132 147 / 102 5.8 ″
iPhone 6/6s/7/8 Plus 1242 x 2208

414 x 736 pt

401 60 132 147 5.5 ″
iPhone 6/6s/7/8 750 x 1334

375 x 667 pt

326 40 88 98 4.7 ″
iPhone SE 640 x 1136

320 x 568 pt

326 40 88 98 4.0 ″
iPhone 5/5s/5c 640 x 1136

320 x 568 pt

326 40 88 98 4.0 ″
iPhone 4/4s 640 x 960

320 x 480 pt

326 40 88 98 3.5 ″
iPhone 1/2/3 320 x 480 163 20 44 49 3.5 ″
iPod Touch 640 x 1136

320 x 568 pt

326 40 88 98 4.0 ″

启动图标

准备好的1240px启动图标,切出不同尺寸的即可

导航栏

Sketch或Adobe XD按照下图切出@2@3,Photoshop使用iPhone6/7/8尺寸进行设计,切出@2x即可

建议尺寸 最大尺寸
48 x 48px (24 x 24pt) @2x 56 x 56px (28 x 28pt) @2x
72 x 72px (24 x 24pt) @3x 84 x 84px (28 x 28pt) @3x

标签栏

形状 正常导航栏 紧凑导航栏
圆形 50 x 50px (25 x 25pt) @2x 

75 x 75px (25 x 25pt) @3x

36 x 36px (18 x 18pt) @2x

54 x 54px (18 x 18pt) @3x

方形 46 x 46px (23 x 23pt) @2x

69 x 69px (23 x 23pt) @3x

51 x 51px (17 x 17pt) @2x

36 x 36px (17 x 17pt) @3x

扁形 62px (31pt) @2x

93px (31pt) @2x

46px (23pt) @2x

69px (23pt) @2x

长形 56px (28pt) @2x

4px (28pt) @2x

40px (20pt) @2x

60px (20pt) @2x

载入界面

首次打开app时出现的界面,建议满尺寸设计

名称 实际像素 逻辑像素
iPhone XS Max 1242 x 2688 px 414 x 896 pt
iPhone XR 828 x 1792 px 414 x 896 pt
iPhone X 1125 x 2436 px 375 x 812 pt
iPhone 8 Plus 1242 x 2208 px 414 x 736 pt
iPhone 8 750 x 1334 px 375 x 667 pt
iPhoneSE 640 x 1136 px 320 x 568 pt

字体尺寸

英文 中文
San Francisco Pro 苹方黑体/PingFang SC

APP的字体建议基于@2x

位置 字族 逻辑像素 实际像素 行距 字间距
大标题 Regular 34 pt 68 px 41 +11
标题一 Regular 28 pt 56 px 34 +13
标题二 Regular 22 pt 44 px 28 +16
标题三 Regular 20 pt 40 px 25 +19
头条 Semi-Bold 17 pt 34 px 22 -24
正文 Regular 17 pt 34 px 22 -24
标注 Regular 16 pt 32 px 21 -20
副标题 Regular 15 pt 30 px 20 20
注解 Regular 13 pt 26 px 18 -6
注释一 Regular 12 pt 24 px 16 0
注释二 Regular 11 pt 22 px 13 +6
转载请附上尺寸网标识UI尺寸网 » iphone国际通用设计尺寸规范
分享到:
赞(2)

注册有惊喜!!注册成功赢特权 立即注册