iOS最新设计规范
2017-11-03 本文已影响861人
程序猿的产品狗进化史
苹果iOS11.1正式版在11月1号凌晨开始推送给iPhone、iPad用户,随着iOS11正式版的推送,苹果也正式终止了对iPhone5、iPhone5c、iPad4的系统升级计划。关于最新的设计规范也需要及时了解并运用到产品设计中,所以稍微整理了下相关资料。
1、iPhone 设备分辨率、显示屏规格
设备 | 资源分辨率 | 设计分辨率 | 状态栏(设计高度) | 导航栏(设计高度) | 底部Tabar(设计高度) | 倍图 |
---|---|---|---|---|---|---|
iPhone4 | 640x960 | 320x480 | 20px | 44px | 49px | @2x |
iPhone4s | 640x960 | 320x480 | 20px | 44px | 49px | @2x |
iPhone5 | 640x1136 | 320x568 | 20px | 44px | 49px | @2x |
iPhone5c | 640x1136 | 320x568 | 20px | 44px | 49px | @2x |
iPhone5s | 640x1136 | 320x568 | 20px | 44px | 49px | @2x |
iPhone6 | 750x1334 | 375x667 | 20px | 44px | 49px | @2x |
iPhone6 plus(设计版) | 1242x2208 | 414x768 | 20px | 44px | 49px | @3x |
iPhone7 | 750x1334 | 375x667 | 20px | 44px | 49px | @2x |
iPhone7 plus | 1242x2208 | 414x768 | 20px | 44px | 49px | @3x |
iPhone8 | 750x1334 | 375x667 | 20px | 44px | 49px | @2x |
iPhone8 plus | 1242x2208 | 414x768 | 20px | 44px | 49px | @3x |
iPhone X | 1125x2436 | 375x812 | 20px | 44px | 49px | @3x |
iPhoneX尺寸图.png
2、系统Icon、LanuchImage(启动图)
(1)系统icon
iPhone系统图标有通知、设置、搜索、App应用、商店图标几种类型,不同系统、不同分辨率大小需要适配对应大小的icon。
最新App图标标准.png 之前的App图标标准.png注:10月发布iPhoneX后,iOS系统更新到了11,App图标与之前变化不大,唯一变化的就是忽略了对iOS5,6的图标兼容。
最新的App图标对应关系如下:
Icon类型 | iOS系统 | @1x | @2x | @3x |
---|---|---|---|---|
App桌面图标 | iOS5,6(已不支持) | 57x57 | 114x114 | - |
iOS7-10 | - | 120x120 | 180x180 | |
设置图标 | iOS5-10 | 29x29 | 58x58 | 87x87 |
Spotlights搜索结果图标 | iOS5,6 | 29x29 | 58x58 | 87x87 |
iOS7-10 | - | 80x80 | 120x120 | |
通知图标 | iOS7-10 | - | 40x40 | 60x60 |
App商店图标 | iOS | 1024x1024 |
(2)LanuchImage
最新的iPhone启动图标准.png 之前的启动图标准.png注:LanuchImage与之前相比多了两个针对iPhoneX的竖屏和横屏启动图
最新的启动图对应关系如下:
系统和尺寸类型 | 分辨率 | 对应机型 | 倍图 |
---|---|---|---|
iPhone Portrait iOS 5,6-1x | 320×480 | iPhone1/2/3 | @1x |
iPhone Portrait iOS 5,6-2x | 640×960 | iPhone4/4s | @2x |
iPhone Portrait iOS 5,6-Retina4 | 640×1136 | iPhone5/5s/5c | @2x |
iPhone Portrait iOS 8,9-Retina HD 5.5 | 1242×2208 | iPhone6 plus/7 plus/8 plus | @3x |
iPhone Portrait iOS 8,9-Retina HD 4.7 | 750×1334 | iPhone6/7/8 | @2x |
iPhone Landscape iOS 8,9-Retina HD 5.5 | 2208×1242 | iPhone6 plus/7 plus/8 plus | @3x |
iPhone Portrait iOS 7,9-2x | 640×960 | iPhone4/4s | @2x |
iPhone Portrait iOS 7,9-Retina 4 | 640×1136 | iPhone5/5s/5c | @2x |
iPhoneX Portrait iOS 11+ | 1125x2436 | iPhoneX | @3x |
iPhoneX Landscape iOS 11+ | 2436x1125 | iPhoneX | @3x |
会持续更新最新的iOS设计规范,欢迎指正!