IOS设计尺寸

界面尺寸

设计尺寸

• PhotoShop:750 x 1334 px (144ppi)

• Sketch 或 Adobe XD:375 x 667 pt

• 切图输出:@2x、@3x

尺寸建议(iPhone6/7/8)

• 状态栏高度20pt(40px)

• 导航栏44pt(88px)、导航标题字号建议17pt(34px)、导航栏图标建议22pt(44px)

• Tab栏49pt(98px)、Tab栏图标建议30pt(60px)、Tab栏图标注释文字11pt(22px)、左右安全距离建议12pt(24px)

• 字号从10pt(20px)到34pt(68px)均可,要视具体情况决定

iTunes 截图尺寸

• 需提供1242 x 2688 px和1125 x 2436 px两套截图,可做一些设计

实时预览工具

• Design Mirror:可实时预览Photoshop、XD等设计稿

• Adobe XD:可实时预览XD画板

• Sketch Mirror:可实时预览Sketch画板

适配说明

• 使用矢量界面工具那么只需要调整设计稿头和尾巴即可,如果使用Photoshop的设计师需要放大缩小设计稿然后调整头和尾巴可以得到新版设计稿。而切图其实和之前没有变化,不管用什么工具设计还是得出两套切图:@2x(750x1334px)、@3x(1242x2208px)即可。

设备尺寸(px)分辨率(ppi)状态栏(px)导航栏(px)标签栏 / 指示栏(px)显示尺寸

iPhone XS Max1242 x 2688 / @3x 

414 x 896 pt

458132132125 / 1026.5 ″

iPhone XS1125 x 2436 / @3x 

375 x 812 pt

458132132125 / 1025.8 ″

iPhone XR828 x 1792 / @3x 

414 x 896 pt

326132132125 / 1026.1 ″

iPhone X1125 x 2436 / @3x 

375 x 812 pt

458132 (40pt)132 (44pt)248 (83pt)5.8 ″

iPhone 6/6s/7/8 Plus 1242 x 2208 / @3x 

414 x 736 pt

401601321475.5 ″

iPhone 6/6s/7/8 750 x 1334 / @2x 

375 x 667 pt

32640 (20pt)88 (44pt)98 (49px)4.7 ″

iPhone SE 640 x 1136 / @2x 

320 x 568 pt

3264088984.0 ″

iPhone 5/5s/5c 

640 x 1136 / @2x 

320 x 568 pt

3264088984.0 ″

iPhone 4/4s 

640 x 960 / @2x 

320 x 480 pt

3264088983.5 ″

iPhone 

1代 / 2代 / 3代

320 x 480 / @1x1632044493.5 ″

iPod Touch 640 x 1136 / @2x 

320 x 568 pt

3264088984.0 ″

ICON模板下载 图标尺寸

启动图标

• 点击下载官方规范文件.psd ,用准备好的1240px启动图标替换智能对象里的内容,保存后把背景隐藏,切出不同尺寸图标即可。

导航栏

• 图标作为文字的补充,在移动端中应用非常广泛。在导航栏区域上的功能诸如搜索、添加、更多、返回等均需要用图标来表达。说明:@2x和@3x在逻辑像素单位是一样的,如果您使用如Sketch、Adobe XD等矢量工具设计,可以参照逻辑像素数值设计即可。但是如果您用Photoshop工具以iPhone6/7/8尺寸进行设计,就需按照@2x下的px单位数值设计。

建议尺寸最大尺寸

48 x 48px (24 x 24pt) @2x56 x 56px (28 x 28pt) @2x

72 x 72px (24 x 24pt) @3x84 x 84px (28 x 28pt) @3x

标签栏

• 我们在标签栏上的图标一般来说30pt(60px)大小左右,苹果给出了四种不同形状标签栏图标的尺寸参考供大家设计时考虑。其意义是让不同外形的图标看上去是差不多大的,保证图标的平衡。标签栏图标的选中态应该是一个彩色,来区别于非选中状态。

造型正常导航栏紧凑导航栏

圆形50 x 50px (25 x 25pt) @2x / 75 x 75px (25 x 25pt) @3x36 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) @3x51 x 51px (17 x 17pt) @2x / 36 x 36px (17 x 17pt) @3x

扁形62px (31pt) @2x / 93px (31pt) @2x46px (23pt) @2x / 69px (23pt) @2x

长形56px (28pt) @2x / 84px (28pt) @2x40px (20pt) @2x / 60px (20pt) @2x

工具栏

• 我们在苹果自带浏览器底部就能看到工具栏。工具栏提供了和当前任务相关的操作和按钮,在滑动时可以收起。工具栏同Tab栏一样都是位于底部,但是高度略窄,它的高度是44pt(88px)。

闪屏资源

• 由于闪屏是一张完整的静态满屏图片,而不是诸如其他页面一样是由切图和文本拼成的,所以闪屏的适配更简单粗暴:我们需要提供不同尺寸的闪屏效果。闪屏资源就是满尺寸的一张png,上端不需要状态栏里的信息,程序会在开发完毕时自动在闪屏中补上状态栏里的信息。我们需要提供的闪屏尺寸有:

机型实际像素逻辑像素张数

iPhone XS Max1242 x 2688 px414 x 896 pt1

iPhone XR828 x 1792 px414 x 896 pt1

iPhone X1125 x 2436 px375 x 812 pt1

iPhone 8 Plus1242 x 2208 px414 x 736 pt1

iPhone 8750 x 1334 px375 x 667 pt1

iPhoneSE640 x 1136 px320 x 568 pt1

字体尺寸

IOS字体

• 英文:San Francisco Pro (下载地址:https://developer.apple.com/fonts)

• 中文:苹方黑体/PingFang SC ( CSS:font-family:PingFangSC )

• 下方是APP的字体建议(基于@2x)

位置字族逻辑像素实际像素行距字间距

大标题Regular34 pt68 px41+11

标题一Regular28 pt56 px34+13

标题二Regular22 pt44 px28+16

标题三Regular20 pt40 px25+19

头条Semi-Bold17 pt34 px22-24

正文Regular17 pt34 px22-24

标注Regular16 pt32 px21-20

副标题Regular15 pt30 px20-16

注解Regular13 pt26 px18-6

注释一Regular12 pt24 px160

注释二Regular11 pt22 px13+6

你可能感兴趣的:(IOS设计尺寸)