iOS开发之获取iPhone/iPad/Android 界面和icon尺寸规范

来源：互联网发布：mac解压rar百度云编辑：程序博客网时间：2024/06/05 03:36

注意：iOS所有图标的圆角效果由系统生成，给到的图标本身不能是圆角的。

1. 桌面图标 (app icon)

for iPhone6 plus(@3x) : 180 x 180
for iPhone 6/5s/5/4s/4(@2x) : 120 x 120

2. 系统搜索框图标 (Spotlight search results icon)

for iPhone6 plus(@3x) : 120 x 120
for iPhone6/5s/5/4s/4(@2x) : 80 x 80

3. 系统设置图标 (Settings icon)

for iPhone6 plus(@3x) : 87 x 87
for iPhone6/5s/5/4s/4(@2x) : 58 x 58

4. 启动图片 (launch image)

for iPhoen5s/5(@2x) : 640 x 1136
for iPhoen4s/4(@2x) : 640 x 960
iPhone6/iPhone6 plus 建议使用 launch file 或 storyboard ；如果依然想使用图片，尺寸数值为：
for iPhone 6(@2x) : 750 x 1334
for iPhone 6 plus (@3x) : 1242 x 2208

5. 另一种根据iOS系统的分类法

Spotlight

iOS 5,6
base: 29pt, 需要 @1x, @2x, @3x，得出：29 x 29, 58 x 58, 87 x 87
iOS 7,8
base: 40pt, 需要 @2x, @3x，得出：80 x 80, 120 x 120

iPhone App

iOS 5,6
base: 57pt，需要 @1x, @2x, 得出：57 x 57, 114 x 114
iOS 7,8
base: 60pt，需要 @2x, @3x，得出：120 x 120, 180 x 180

Settings

iOS 5,6,7,8
base: 29pt，需要 @1x,@2x,@3x，得出：29 x 29, 58x58, 87x87

6. 尺寸总结：

图标尺寸输出列表：

180x180
120x120
87x87
80x80
58x58
57x57
29x29

启动图片尺寸输出列表：

640x960
640x1136
750x1334
1242x2208

iPhone界面尺寸

设备分辨率 PPI 状态栏高度导航栏高度标签栏高度

iPhone6 plus设计版

1242×2208 px 401PPI 60px 132px 146px

iPhone6 plus放大版

1125×2001 px 401PPI 54px 132px 146px

iPhone6 plus物理版

1080×1920 px 401PPI 54px 132px 146px

iPhone6

750×1334 px 326PPI 40px 88px 98px

iPhone5 - 5C - 5S

640×1136 px 326PPI 40px 88px 98px

iPhone4 - 4S

640×960 px 326PPI 40px 88px 98px

iPhone & iPod Touch第一代、第二代、第三代

320×480 px 163PPI 20px 44px 49px

iPhone图标尺寸：

设备 App Store 程序应用主屏幕 Spotlight搜索标签栏工具栏和导航栏

iPhone6 Plus (@3×)

1024×1024 px 180×180 px 114×114 px 87×87 px 75×75 px 66×66 px

iPhone6 (@2×)

1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px

iPhone5 - 5C - 5S (@2×)

1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px

iPhone4 - 4S (@2×)

1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px

iPhone & iPod Touch第一代、第二代、第三代

1024×1024 px 120×120 px 57×57 px 29×29 px 38×38 px 30×30 px

很系统的分类，非常有用的文章：http://tool.lanrentuku.com/guifan/ui.html

阅读全文

0 0