普通屏 320像素 x 480像素 iPhone 1、3G、3GS,iPod Touch 1、2、3
3:2 Retina 屏 640像素 x 960像素 iPhone 4、4S,iPod Touch 4
16:9 Retina 屏 640像素 x 1136像素 iPhone 5、5s,iPod Touch 5
iPad
普通屏 768像素 x 1024像素 iPad 1, iPad2,iPad mini
Retina屏 1536像素 x 2048像素 New iPad,iPad 4
设备 iPhone | 宽 Width | 高 Height | 对角线 Diagonal | 逻辑分辨率(point) | Scale Factor | 设备分辨率(pixel) | PPI |
3GS | 2.4 inches (62.1 mm) | 4.5 inches (115.5 mm) | 3.5-inch
| 320x480 | @1x | 320x480 | 163 |
4(s) | 2.31 inches (58.6 mm) | 4.5 inches (115.2 mm) | 3.5-inch | 320x480 | @2x | 640x960 | 326 |
5c | 2.33 inches (59.2 mm) | 4.90 inches (124.4 mm) | 4-inch | 320x568 | @2x | 640x1136 | 326 |
5(s) | 2.31 inches (58.6 mm) | 4.87 inches (123.8 mm) | 4-inch | 320x568 | @2x | 640x1136 | 326 |
6 | 2.64 inches (67.0 mm) | 5.44 inches (138.1 mm) | 4.7-inch | 375x667 | @2x | 750x1334 | 326 |
6+ | 3.06 inches (77.8 mm) | 6.22 inches (158.1 mm) | 5.5-inch | 414x736 | @3x | (1242x2208->) 1080x1920 | 401 |
设备 | 分辨率 | 状态栏高度 | 导航栏高度 | 标签栏高度 |
---|---|---|---|---|
iPhone6 plus | 1242×2208 px | 60px | 132px | 147px |
iPhone6 | 750×1334 px | 40px | 88px | 98px |
iPhone5/5s/5c | 640×1136 px | 40px | 88px | 98px |
iPhone4/4s | 640×960 px | 40px | 88px | 98px |
iPad3/4/Air/Air2/mini2 | 2048×1536 px | 40px | 88px | 98px |
iPad1/2 | 1024×768 px | 20px | 44px | 49px |
iPad mini | 1024×768 px | 20px | 44px | 49px |
设备 | App Store | 程序应用 | 主屏幕 | spotlight搜索 | 标签栏 | 工具栏和导航栏 |
---|---|---|---|---|---|---|
iPhone6 plus | 1024*1024px | 180*180px | 144×144px | 87×87 px | 75*75px | 66*66px |
iPhone6 | 1024*1024px | 120*120px | 144×144px | 58*58px | 75*75px | 44*44px |
iPhone5/5s/5c | 1024*1024px | 120*120px | 144×144px | 58*58px | 75*75px | 44*44px |
iPhone4/4s | 1024*1024px | 120*120px | 144×144px | 58*58px | 75*75px | 44*44px |
iPad3/4/Air/Air2/mini2 | 1024*1024px | 180*180px | 144×144px | 100*100px | 50*50px | 44*44px |
iPad1/2 | 1024*1024px | 90*90px | 72*72px | 50*50px | 25*25px | 22*22px |
iPad mini | 1024*1024px | 90*90px | 72*72px | 50*50px | 25*25px | 22*22px |
字体大小:
长文本:32-34px最适宜,最小值26px
短文本:32px最适宜,最小值28px
注释:28px最适宜,最小值24px
1、所有能点击的图片不得小于44px(Retina需要88px)
2、单独存在的部件必须是双数尺寸
3、两倍图以@2x作为命名后缀
4、充分考虑每个控制按钮在四种状态下的样式(默认、按下、选中、不可点击)
设计规范:
http://www.ui001.com/article/302.html
http://www.tuicool.com/articles/nEFRBnR
适配问题
现在开发iOS应用,多数系统适配iOS7-iOS10,机型适配iPhone4s-iPhone7Plus就可以了
这样我们算下屏幕宽高比
iPhone5 320/568 = 0.56338
iPhone6 375/667 = 0.56222
iPhone6P 414/736 = 0.5625
可见屏幕宽高比并没有太大变化,这里没有使用过xib或者storyboard等布局,纯代码根据这个比例来计算控件大小、间距就比较靠谱了,也可以使用masonry等布局
xib跟storyboard的方式开发虽然快,但是维护起来简直。。。
按宽度适配fitScreenWidth= width*(SCREEN_WIDTH/320)
按高度适配fitScreenHeight= height*(SCREEN_HEIGHT/568)
素材方面,准备2x跟3x图片足够使用了。
对于iPad来说,还是要重新写一套布局最好。
适配流程:
http://blog.csdn.net/yongyinmg/article/details/41422823
http://www.cnblogs.com/iOS-mt/p/4222551.html
做好适配之后,美工应做相应UI走查,查看适配的效果,提出不符合审美的一些元素。