做了一段UI设计,遇到了一些关于屏幕适配问题,自己通过查找和个人理解做了一些总结(有问的)
iOS界面尺寸
| 设备 | 分辨率 | 状态栏高度 | 导航栏高度 | 标签栏高度 |
|
iPhone6 plus/iPhone6s plus
|
1242×2208 px (5.5 英寸)
|
60px
| 132px | 147px |
| iPhone6、iPhone6s |
750×1334 px(4.7英寸)
| 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/ 6s plus | 1024*1024px | 180*180px | 144*144px | 87*87 px | 75*75px | 66*66px |
| iPhone6/6s | 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 |
iPhone6Plus的@3x,iPhone6的@2x, iPhone5的@2x的介绍
1、iPhone6Plus是5.5英寸屏幕,1242x2208px-@3x的像素分辨率,逻辑分辨率是414x736pt-@1x。物理尺寸是1080x1920px。这个物理尺寸,也是安卓机目前最流行的大屏设计稿尺寸。2、iPhone6是4.7英寸屏幕,750x1334px-@2x的像素分辨率,逻辑分辨率是375x667pt-@1x。
3、iPhone5是4英寸屏幕,640x1135px-@2x的像素分辨率,逻辑分辨率是320x568pt-@1x。
内部设计1、所有能点击的图片不得小于44px(Retina需要88px)
2、单独存在的部件必须是双数尺寸
3、两倍图以@2x作为命名后缀
本文详细介绍了iOS不同设备的界面尺寸与图标大小,并针对屏幕适配问题提供了实用建议,如点击区域尺寸规范等。
1589

被折叠的 条评论
为什么被折叠?



