iOS 设备尺寸以及图标尺寸

iPhone 4和iPod Touch 4有一个新的特性:在屏幕尺寸不变的前提下,分辨率提升一倍(320 x 480 => 640 x 960)。苹果将这个特性命名为Retina。

iPhone UI 设计的一些标准尺寸1 - 懒得喘气 - 懒得喘气的博客
用苹果的话讲:

Retina显示屏的超高像素密度已超过人眼能分辨的范围。

Retina对图像设计(图标、启动画面和其它所有像素有关的东西)有什么影响呢?如果我们的app要支持Retina,就要提供高分辨率的(宽x2,高x2)的图片。同时,为了支持没有Retina的设备,仍旧要准备低分辨率的版本。换言之,我们要准备两套图。

针对不同分辨率的图片,苹果规定了一个命名规范:假如一个普通分辨率的图片,文件名是“abc.png”,那么与其对应的高分辨率的文件名就应该是abc@2x.png,多了“@2x”。

举一个例子:

Icon.png
Icon11.png

 

Icon@2x.png
Icon@2x.png

 

这里需要注意的是,虽然在浏览器中,第二张图片的面积是第一张的4倍,但是在支持Retina的iPhone中,显示的大小是一样的。

 

格式和尺寸

图标和启动画面的格式:推荐使用PNG格式,可以是标准的24位颜色(红、绿和蓝各用8位),外加alpha通道的8位。不要在app图标上使用透明色。

图标的尺寸:苹果有一份完整的文档,列出了app所需的全部图标尺寸,和其各自的使用环境。

Technical Q&A QA1686: App Icons on iPad and iPhone

 

http://developer.apple.com/library/ios/#qa/qa1686/_index.html

 

XXXXX.png

 

 

XXXXX2.png

 

 

XXXXX3.png

 

iPhone-only Apps

Include the following in your application's Resources group in the Xcode project:

Table 1  iPhone-only apps icon requirements.


Image Size (px)

File Name

Used For

Required Status

512x512

iTunesArtwork

Ad Hoc iTunes

Optional but recommended

57x57

Icon.png

App Store and Home screen on iPhone/iPod touch

Required

114x114

Icon@2x.png

Home screen for iPhone 4 High Resolution

Optional but recommended

72x72

Icon-72.png

Home screen for iPad compatibility

Optional but recommended

29x29

Icon-Small.png

Spotlight and Settings

Optional but recommended

50x50

Icon-Small-50.png

Spotlight for iPad compatibility

Recommended if you have a Settings bundle, otherwise optional but recommended

58x58

Icon-Small@2x.png

Spotlight and Settings for iPhone 4 High Resolution

Recommended if you have a Settings bundle, otherwise optional but recommended

iPad-only Apps

Include the following in your application's Resources group in the Xcode project:

Table 2  iPad-only apps icon requirements.


Image Size (px)

File Name

Used For

Required Status

512x512

iTunesArtwork

Ad Hoc iTunes

Optional but recommended

72x72

Icon-72.png

App Store and Home screen on iPad

Required

50x50

Icon-Small-50.png

Spotlight on iPad

Optional but recommended

29x29

Icon-Small.png

Settings on iPad

Recommended if you have a Settings bundle, otherwise optional but recommended


Universal Apps

Include the following in your application's Resources group in the Xcode project:

Table 3  Universal apps icon requirements.


Image Size (px)

File Name

Used For

Required Status

512x512

iTunesArtwork

Ad Hoc iTunes

Optional but recommended

57x57

Icon.png

App Store and the Home screen on iPhone/iPod touch

Required

114x114

Icon@2x.png

Home screen for iPhone 4 High Resolution

Optional but recommended

72x72

Icon-72.png

App Store and Home screen on iPad

Required

50x50

Icon-Small-50.png

Spotlight on iPad

Optional but recommended

29x29

Icon-Small.png

Settings on iPad and iPhone, and Spotlight on iPhone

Recommended if you have a Settings bundle, otherwise optional but recommended

58x58

Icon-Small@2x.png

Spotlight and Settings for iPhone 4 High Resolution

Recommended if you have a Settings bundle, otherwise optional but recommended






http://uedc.163.com/5294.html

上传到App Store需要512px X 512px的图片
在iPhone  960px X 640px分辨率中
图标显示尺寸 114px X 114px
20像素的圆角
4像素的90度黑色投影
2像素的90度白色内投影
默认自带的高光
在iPhone  480px X 320px分辨率中
图标显示尺寸 57px X 57px
10像素的圆角
2像素的90度黑色投影
1像素的90度白色内投影
默认自带的高光
在iPad  1024px X 768px分辨率中
图标显示尺寸 72px X 72px
13像素的圆角
2像素的90度黑色投影
1像素的90度白色内投影
默认自带的高光



iTunes Artwork icon ───────── 512px (90px)

App icon(iPhone4) ──────────114px (20px)

App icon(iPad) ────────────72px (12px)


App icon(iPhone 3G/3GS) ───────57px(10px)


Spotlight/Settings icon icon(iPhone4) ── 58px (10px)


Spotlight/Settings icon icon(iPhone 3G/3GS/iPad) ──── 29px (9px)



使用现有的iOS图标模版

App Icon Template by Michael Flarup
http://www.pixelresort.com/blog/app-icon-template
http://appicontemplate.com/  (最近更新, 包括iPad Retina)
最流行也是最强大的,里面包含很多常用的材质。

iOS icon template for Illustrator CS5 by Jon Hicks
http://hicksdesign.co.uk/journal/ios-icon-template-for-illustrator-cs5
Ai的模板来自firefox的logo设计师

iOS App Icon Template by Louie Mantia
http://dribbble.com/shots/461654-iOS-App-Icon-Template

其他不是太流行的模板文件:
http://blog.cocoia.com/2010/iphone-ipad-icon-psd-template
http://blog.cocoia.com/2010/iphone-4-icon-psd-file/
http://dribbble.com/shots/446198-Freebie-iOS-icons
http://dribbble.com/shots/473390-iOS-App-Icons-PSD-Template
http://dribbble.com/shots/271363-iOs-icon-Free-PSD
http://dribbble.com/shots/37493-Icon-Template
http://dribbble.com/shots/292559-Icon-Template
http://dribbble.com/shots/44805-iOS-Icon-Template

 
 
 
参考:http://www.uimaker.com/uimakerhtml/uistudy/2012/0424/34102.html
posted @ 2016-01-02 20:55  w_only  阅读(2073)  评论(0编辑  收藏  举报