iOS最新设计规范

作者: 程序猿的产品狗进化史 | 来源:发表于2017-11-03 15:14 被阅读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

iPhone尺寸图集合.png

iPhoneX尺寸图.png

iPhone系统图标有通知、设置、搜索、App应用、商店图标几种类型，不同系统、不同分辨率大小需要适配对应大小的icon。

注：10月发布iPhoneX后，iOS系统更新到了11，App图标与之前变化不大，唯一变化的就是忽略了对iOS5，6的图标兼容。

最新App图标标准.png

之前的App图标标准.png

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

注：LanuchImage与之前相比多了两个针对iPhoneX的竖屏和横屏启动图

最新的iPhone启动图标准.png

之前的启动图标准.png

系统和尺寸类型	分辨率	对应机型	倍图
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