iOS 设备尺寸以及图标尺寸

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

用苹果的话讲：

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

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

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

举一个例子：

Icon.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

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