各设备像素参数
| 设备 | 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/
未完待续
翻译水平有限，欢迎提出改进意见
