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翻译版)
iPhone 6 / 6 Plus 出现后,如何改进工作流以实现一份设计稿支持多个尺寸? - pigtwo 的回答 - 知乎
UI设计
,适配
- 文字流式、控件弹性、图片等比缩放
iOS 的 APP 在系统中如何适应 iPhone 5s/6/6 Plus 三种屏幕的尺寸? - 黄兢成的回答 - 知乎
适配
,pt
,px
- iPhone屏幕尺寸的具体解释、pt和px的具体解释
-
UI设计
,规范
,尺寸
,切图
,标注
,输出
,颜色
,字体
- 标注、切图输出、颜色、字体与大小
-
规范
- 字体、颜色、按钮、图标、布局、空间、提示、命名规范等
用 Sketch 做 iOS 设计时,一般选用哪个尺寸? - 犍云翔的回答 - 知乎
设计尺寸
,切图
- 用什么尺寸的画布做UI设计
- 切图的尺寸
-
切图
,尺寸
- iPhone:界面尺寸、icon图标尺寸
- iPad:界面尺寸、icon图标尺寸
- Android:主流分辨率、设计尺寸
- Web:主流浏览器界面尺寸、设计尺寸