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

注：

因为iPhone4与iPhone4s分辨率相同，以下均称为iPhone4。

因为iPhone5、iPhone5s与iPhone5C分辨率相同，以下均称为iPhone5。

因为iPhone6与iPhone6s分辨率相同，以下均称为iPhone6。

因为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图标（系统设置）
图片	启动图 引导图	页面数据为空时的图片

二、参考资料

iOS Human Interface Guidelines: Designing for iOS

Apple官方

，

iOS人机界面指南

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

[ISUX转译]iOS 8人机界面指南（一）：UI设计基础

[ISUX转译]iOS 8人机界面指南（二）：设计策略

[ISUX转译]iOS 8人机界面指南（三）：iOS技术（上）

[ISUX转译]iOS 8人机界面指南（三）：iOS技术（下）

iOS人机界面指南

，

iOS8

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

UI设计

，

适配

文字流式、控件弹性、图片等比缩放

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

适配

，

pt

，

px

iPhone屏幕尺寸的具体解释、pt和px的具体解释

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

UI设计

，

规范

，

尺寸

，

切图

，

标注

，

输出

，

颜色

，

字体

标注、切图输出、颜色、字体与大小

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

规范

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

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

设计尺寸

，

切图

用什么尺寸的画布做UI设计

切图的尺寸

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

切图

，

尺寸

iPhone：界面尺寸、icon图标尺寸

iPad：界面尺寸、icon图标尺寸

Android：主流分辨率、设计尺寸

Web：主流浏览器界面尺寸、设计尺寸

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