iOS设计规范、切图规范与需求

最后更新于 2016年1月22日

一、设计规范

1. 常见iPhone尺寸与分辨率等

设备 尺寸 分辨率(px) 分辨率(pt) 状态栏高度(20pt) 导航栏高度(44pt) 标签栏高度(49pt) iPhone4 & 4s 3.5英寸 640 × 960 320 × 480 40px 88px 98px iPhone5 & 5s & 5C 4英寸 640 × 1136 320 × 568 40px 88px 98px iPhone6 & 6s 4.7英寸 750 × 1334 375 × 667 40px 88px 98px iPhone6 Plus & 6s Plus
(物理版) 5.5英寸 1080 × 1920 414 × 736 54px 132px 147px iPhone6 Plus & 6s Plus
(设计版) 1242 × 2208 60px 132px 147px

注：

1. 因为iPhone4与iPhone4s分辨率相同，以下均称为iPhone4。
2. 因为iPhone5、iPhone5s与iPhone5C分辨率相同，以下均称为iPhone5。
3. 因为iPhone6与iPhone6s分辨率相同，以下均称为iPhone6。
4. 因为iPhone6 Plus与iPhone6s Plus分辨率相同，以下均称为iPhone6 Plus。

2. 图标尺寸(px)

（注意此处单位为像素pixel，不是point）

图标 必要性 iPhone4
(@2x) iPhone5,
iPhone6
(@2x) iPhone6 Plus
(@3x) APP图标
(桌面) 必需 120 × 120 120 × 120 180 × 180 APP图标
(App Store) 必需 1024 x 1024 1024 x 1024 1024 x 1024 APP图标
(Spotlight搜索结果) 建议 80 x 80 80 x 80(iPhone5)
120 x 120(iPhone6 & 6s) 180 x 180 APP图标
(系统设置) 建议 58 x 58 58 x 58 87 x 87 工具栏和导航栏图标 可选 约44 x 44 约44 x 44 约66 x 66 标签栏图标 可选 约50 x 50
(最大:96 x 64) 约50 x 50
(最大:96 x 64) 约75 x 75
(最大:144 x 96) Web clip icon？

3. 图片尺寸(px)

（注意此处单位为像素pixel，不是point）

图片 必要性 iPhone4 iPhone5 iPhone6 iPhone6 Plus 启动图 必需 640 × 960 640 × 1136 750 × 1334 1242 × 2208 引导图(若干) 建议 640 × 960 640 × 1136 750 × 1334 1242 × 2208

4. 建议需要的图片和图标

必需 建议 可选 图标 APP图标(桌面)
APP图标(App Store)
Logo APP图标（Spotlight搜索结果）
APP图标（系统设置） 图片 启动图
引导图 页面数据为空时的图片

二、参考资料

1. iOS Human Interface Guidelines: Designing for iOS

   • Apple官方，iOS人机界面指南

2. [ ISUX 转译 ] iOS 8人机界面指南（ISUX翻译版）

   1. [ISUX转译]iOS 8人机界面指南（一）：UI设计基础
   2. [ISUX转译]iOS 8人机界面指南（二）：设计策略
   3. [ISUX转译]iOS 8人机界面指南（三）：iOS技术（上）
   4. [ISUX转译]iOS 8人机界面指南（三）：iOS技术（下）
      
      • iOS人机界面指南，iOS8

3. iPhone 6 / 6 Plus 出现后，如何改进工作流以实现一份设计稿支持多个尺寸？ - pigtwo 的回答 - 知乎

   • UI设计，适配
   • 文字流式、控件弹性、图片等比缩放

4. iOS 的 APP 在系统中如何适应 iPhone 5s/6/6 Plus 三种屏幕的尺寸？ - 黄兢成的回答 - 知乎

   • 适配，pt，px
   • iPhone屏幕尺寸的具体解释、pt和px的具体解释

5. iOS APP UI设计之从效果图到UI切图 | 设计达人

   • UI设计，规范，尺寸，切图，标注，输出，颜色，字体
   • 标注、切图输出、颜色、字体与大小

6. 一套完整的UI设计规范手册（IOS版）

   • 规范
   • 字体、颜色、按钮、图标、布局、空间、提示、命名规范等

7. 用 Sketch 做 iOS 设计时，一般选用哪个尺寸？ - 犍云翔的回答 - 知乎

   • 设计尺寸，切图
   • 用什么尺寸的画布做UI设计
   • 切图的尺寸

8. iOS、Android、Web设计规范 - UI设计第一站

   • 切图，尺寸
   • iPhone：界面尺寸、icon图标尺寸
   • iPad：界面尺寸、icon图标尺寸
   • Android：主流分辨率、设计尺寸
   • Web：主流浏览器界面尺寸、设计尺寸

9. APP适配IOS8，iPhone6和Plus截图简要说明-UI中国-专业界面交互设计平台