iOS 设计准则（The iOS Design Guidelines）

各设备像素参数

设备	Retina	像素(宽 x 高)(px)
iPhone 6+ (6S+)	Retina HD	1080 x 1920
iPhone 6 (6S)	Retina	750 x 1334
iPhone 5 (5S,5C)	Retina	640 x 1136
iPhone 4 (4,4S)	Retina	640x 960
iPhone (1,2,3)	No	320 x 480
iPad Air（1,2)/iPad(3,4)	Retina	1536 x 2048
iPad Pro	Retina	2048 x 2732
iPad Mini(2,3)	Retina	1536 x 2048
iPad(Mini1,1,2)	No	768 x 1024

Points和Pixel的概念

Points是一个“分辨率无关”测量方法。
根据屏幕的像素密度，一个point可以包含多个像素(例如：在一个常规retina屏幕里，1pt包含2x2个像素)
当设计师在对多种屏幕尺寸进行设计时，应该以points的角度考虑，然后以像素的角度进行设计。
就是说你需要导出3份不同像素的切图。

设计稿最好以points来标注，除非特别在数值后面标注px,否则一般情况下认为该数值为points

如下图:

图1

图1中的标注单位为points，实际代表的左图像素为：640x1136 右图为：750x1334

---

设备尺寸信息

设备	像素与points的倍率	屏幕ppi	屏幕尺寸
iPhone 6+ (6S+)	@3x	401	5.5"
iPhone 6 (6S)	@2x	326	4.7"
iPhone 5 (5S,5C)	@2x	326	4.0"
iPhone 4 (4,4S)	@2x	326	3.5"
iPhone (1,2,3)	@1x	163	3.5"
iPad Air（1,2)/iPad(3,4)	@2x	264	9.7"
iPad Pro	@2x	264	12.9"
iPad Mini(2,3)	@2x	326	7.9"
iPad Mini1	@1x	163	7.9"
iPad(1,2)	@1x	132	9.7"

iPhone6+的“缩减像素采样”

iPhone6+的渲染像素和实际物理像素和其他设备不一样，因为它的屏幕的像素不足以支撑points的@3x数量的像素，所以实际在手机屏幕上显示的的像素值是point@3x分辨率的87%(就是从2208 x 1242 到 1920 x 1080的适配)

图2

点击这里查看所有设备的渲染像素和实际物理像素参考

App图标

设备	App界面	AppStore界面	Spotlight界面	设置界面
iPhone 6+ (6S+)	180x180 px	1024x1024 px	120x120 px	87x87 px
iPhone (6S,6,5S,5,5C,4S,4)	120x120 px	1024x1024 px	80x80 px	58x58 px
iPhone (1,2,3)	57x57 px	1024x1024 px	29x29 px	29x29 px
iPad Pro	167x167 px	1024x1024 px	120x120 px	58x58 px
iPad (Mini2,Mini3,Air,3,4)	152x152 px	1024x1024 px	80x80 px	58x58 px
iPad (1,2,Mini1)	76x76 px	1024x1024 px	40x40 px	29x29 px

圆角:

自从iOS7以后，App图标使用的是超椭圆形状。鉴于苹果没有提供官方的形状模板，你可以使用非官方模板

图2

虽然圆角不能用于最终的切图(最终的app切图必须是方形),但你可以在设计阶段用来测试

警告：如果你为了给app边缘加效果而给app加了超椭圆遮罩，请确保遮罩外部区域没有使用透明通道。
苹果不支持对app图标使用透明通道，如果你使用了，透明区域会被替换成黑色。
如果你的遮罩不是100%准确，用户会发现你的app图标圆角边缘有黑色线条。最好为画布和app图标设置相同的背景

如果你的app图标的背景色为白色，在设置界面和AppStore界面会自动在其边缘加上宽度为1px的灰色线条

在iOS6之前的版本圆角的效果会有所不同，而且app图标在手机主界面会出现阴影效果和光泽效果（光泽效果可以选择不显示）

排版

iOS9以前，苹果使用的字体是Helvetica Neue（中文是：Heiti SC），iOS9发布后，苹果将字体改为了San Francisco（中文叫：苹方）

字体参数

界面元素	Size(pt)	Weight	Spacing(pt)
导航栏标题（Nav Bar Title）	17	Medium	0.5
导航栏按钮（Nav Bar Button）	17	Regular	0.5
搜索栏标题（Search Bar）	13.5	Regular	0
标签栏按钮（Tab Bar Title）	10	Regular	0.1
表格列表标题（Table Header）	12.5	Regular	0.25
表格列表正文（Table Row）	16.5	Regular	0
表格列表副描述（Table Row Subline）	16.5	Regular	0
表格页脚(Table Footer)	12.5	Regular	0.2
底部弹出菜单(Action Sheet)	20	Regular/Medium	0.5

色调

图3

以上列出的颜色值是iOS7以后苹果的主要配色，进行设计时可以使用这些颜色，或者自行选择

按钮的图标

按钮的图标需要有两种状态：默认状态的图文风格的图标以1或者1.5pt的线条宽度，触发点击状态的图标以单色填充

图4

Activiy 视图的图标

Activity视图（有时也叫作分享视图）,在iOS8以前是用图文风格的图标，iOS8之后只用了一个白色背景图加一个图标的风格。

状态栏

图5

状态栏有两种风格：暗和亮

导航栏

9F2C4952-CA7D-4239-9157-5F37E7115213.png

英文原文：http://iosdesign.ivomynttinen.com/

未完待续

翻译水平有限，欢迎提出改进意见