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

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中国-专业界面交互设计平台