@2x 为:for iPhone 6/5s/5/4s/4
@3x为:for iPhone6 plus
iOS各型号尺寸
类型 | 屏幕尺寸 | 显示像素 | 需要倍数 | 切图尺寸 | 命名规范 |
---|---|---|---|---|---|
iPhone6 plus | 414*736 | @3 | 1242×2208 | 5.5Retina HD | |
iPhone6 | 375*667 | @2 | 750×1334 | 4.7Retina HD | |
iPhone5 | 320*568 | @2 | 640×1136 | 4Retina HD | |
iPhone4 | 320*480 | @2 | 640×960 | 3.5Retina | |
iPhone3 | 320*480 | @1 | 320*480 | 3.5 |
AppIcon图片
可以使用在线移动图标生成工具:图标工场http://icon.wuruihong.com/网站自动生成iOS所需的所有对应格式的图标
类型 | 桌面图标 | 显示像素 | 需要倍数 | 切图尺寸 | 命名规范 |
---|---|---|---|---|---|
notification(iOS 7-10) | 推送通知图标 | 20pt | 2x 3x | 40pt和60pt | [email protected],[email protected] |
spotlight(iOS5-6) | 手机搜索 | 29pt | 2x 3x | 58pt和87pt | [email protected],[email protected] |
settings(iOS 5_10) | 设置页面 | 29pt | 2x 3x | 58pt和87pt | [email protected],[email protected] |
spotlight(iOS7-10) | 搜索 | 40pt | 2x 3x | 80pt和120pt | [email protected],[email protected] |
APP(iOS 7-10) | 桌面图标 | 60pt | 2x 3x | 120pt和180pt | [email protected],[email protected] |
APP | 应用市场 | 1024 | APPIconForAppStore.png |
启动图片设置
类型 | 横竖屏 | 系统版本 | 屏幕尺寸 | 切图尺寸 | 命名规范(1,表示第一个版本,P竖屏L横屏) |
---|---|---|---|---|---|
iPhone6 plus | 竖屏 | iOS8,9 | RetinaHD5.5 | 1242×2208 | [email protected] |
iPhone6 | 竖屏 | iOS8,9 | RetinaHD4.7 | 750×1334 | [email protected] |
iPhone6 plus | 横屏 | iOS8,9 | RetinaHD5.5 | 2208x1242 | [email protected] |
iPhone5/5 | 竖屏 | iOS7-9 | retina 4 | 640×1136 | [email protected] |
iPhone4/4s | 竖屏 | iOS7-9 | 2x | 640×960 | [email protected] |
iPad | 竖屏 | ios7-9 | 1x | 768×1024 | [email protected] |
iPad | 竖屏 | ios7-9 | 2x | 1536×2048 | [email protected] |
iPad | 横屏 | ios7-9 | 1x | 1024×768 | [email protected] |
iPad | 横屏 | ios7-9 | 2x | 2048×1536 | [email protected] |
图片命名规范
一个简单的命名规范,作用就不说了~~~~
- 不要用拼音,尽量使用英文
- 下划线 nav_right_back
- 注意区分倍图@2x 和@3x 的后缀,不然效果差强人意
命名的组成部分:
逻辑板块(可由Tabbar来判断,如果我:My),定位到哪一个页面(personMessage),哪一个功能描述(比如说设置setting),状态(选中,高亮,不可使用,正常状态)
例:my_personMessage_setting_s 表示个人中心选项卡中的个人信息中的设置图标的选中状态。
除此之外,就是对于一下公共的图片:
- 如果是整个项目都要用到的,就为pub_message,pub_nav_back(导航栏返回按钮)
- 如果是某个模块要用到的,就为my_pub_message
这样效果显而易见了,当然在设计目录结构的时候也一定按照相应的层次结构进行设计,千万不要偷懒,放在同一级目录里,版本迭代多了后,你会哭的。