來自於:http://www.xiaweipin.com/archives/28#roundcorner
圖標的圓角和光暈效果
圓角效果。圖標的圓角效果是系統自動加上的,我們不能控制。這也是爲什麼我們看到的每個圖標,其圓角效果是完全相同的。
光暈效果。光暈效果也是系統加上的,和“圓角”不同的是,光暈效果是一個可選項。我們可以通過設置app的光暈參數(UIPrerenderedIcon),告訴系統是否要爲我們的圖標打上光暈效果。
總結:1)設計圖標時請記得,圖標的圓角效果是系統自動加上的,且是我們無法控制的。 2)設計圖標前先決定,是否要使用系統內建的“光暈效果”。
每個圖標都有相同的圓角。左邊的兩個圖標有光暈效果,右邊的兩個沒有。
啓動畫面
我們可以爲app設置啓動畫面,以便在app啓動的時候顯示。蘋果在其開發文檔中,很明確地表示:啓動畫面的作用是給使用者一種錯覺,一種app啓動很快速的錯覺。即,啓動畫面的初衷不是爲了給用戶某種“視覺上的衝擊”。所以,蘋果建議開發者使用app的“空白”界面作爲啓動畫面。蘋果自己的app就是這樣做的。如果我們無視這種約定,而是使用和app界面完全無關的“插畫”作爲啓動畫面(很多app都是這樣),那麼一般情況下,會有“地攤貨”的嫌疑。雖然大多數的普通用戶不清楚啓動畫面“應該”是什麼樣子:或許用戶會喜歡有“視覺衝擊力的”插畫;或許用戶會奇怪爲何到了4月,啓動畫面卻仍舊是春節的主題;又或許用戶什麼感覺也沒有。如果一定要使用插畫,那麼不妨先回答這樣一個問題:考慮到蘋果開發的app,其啓動畫面使用的都是樸素的“空白”界,那麼我們的app是否有足夠充分的理由,來支持使用插畫呢?
如果要讓啓動畫面漂亮,我們可以先讓app的界面漂亮;App的界面漂亮,那app的“空白”界面也就漂亮;App的“空白”界面漂亮,啓動畫面也就漂亮了。
系統自帶的“時鐘”app。第一張是啓動畫面:使用的是app的“空白”界面。第二張是app運行時的截圖。
App的界面漂亮 = App的“空白”界面漂亮,啓動畫面也就自然漂亮。比如,Tweetbot的啓動畫面。
Retina
iPhone 4和iPod Touch 4有一個新的特性:在屏幕尺寸不變的前提下,分辨率提升一倍(320 x 480 => 640 x 960)。蘋果將這個特性命名爲Retina。
用蘋果的話講:
Retina顯示屏的超高像素密度已超過人眼能分辨的範圍。
Retina對圖像設計(圖標、啓動畫面和其它所有像素有關的東西)有什麼影響呢?如果我們的app要支持Retina,就要提供高分辨率的(寬x2,高x2)的圖片。同時,爲了支持沒有Retina的設備,仍舊要準備低分辨率的版本。換言之,我們要準備兩套圖。
針對不同分辨率的圖片,蘋果規定了一個命名規範:假如一個普通分辨率的圖片,文件名是“abc.png”,那麼與其對應的高分辨率的文件名就應該是“[email protected]”,多了“@2x”。
舉一個例子:
這裏需要注意的是,雖然在瀏覽器中,第二張圖片的面積是第一張的4倍,但是在支持Retina的iPhone中,顯示的大小是一樣的。
格式和尺寸
圖標和啓動畫面的格式:推薦使用PNG格式,可以是標準的24位顏色(紅、綠和藍各用8位),外加alpha通道的8位。不要在app圖標上使用透明色。
圖標的尺寸:蘋果有一份完整的文檔,列出了app所需的全部圖標尺寸,和其各自的使用環境。
Technical Q&A QA1686: App Icons on iPad and iPhone
- App程序包必須包含以下標記爲“必須”的圖標。
- 圖片尺寸的單位是px。
表格一:只支持iPhone的app圖標要求。
尺寸 | 文件名 | 用途 | 是否必須 | 備註 |
---|---|---|---|---|
512×512 | iTunesArtwork | Ad Hoc iTunes | 可選,但建議加入 | 文件應該是PNG格式,但文件名不要使用.png後綴。 |
57×57 | Icon.png | iPhone/iPod touch的App Store和主屏幕(Home screen) | 必須 | 無 |
114×114 | [email protected] | 高分辨率的iPhone 4主屏幕 | 可選,但建議加入 | 無 |
72×72 | Icon-72.png | 主屏幕,爲了兼容iPad | 可選,但建議加入 | 無 |
29×29 | Icon-Small.png | Spotlight和設置app | 可選,但建議加入 | 無 |
50×50 | Icon-Small-50.png | Spotlight,爲了兼容iPad | 如果app有設置程序包,那麼建議加入。否則可選,但建議加入。 | 無 |
58×58 | [email protected] | 高分辨率的iPhone 4的Spotlight和設置app | 如果app有設置程序包,那麼建議加入。否則可選,但建議加入。 | 無 |
表格二:只支持iPad的app圖標要求。
尺寸 | 文件名 | 用途 | 是否必須 | 備註 |
---|---|---|---|---|
512×512 | iTunesArtwork | Ad Hoc iTunes | 可選,但建議加入 | 文件應該是PNG格式,但文件名不要使用.png後綴。 |
72×72 | Icon-72.png | iPad的App Store和主屏幕 | 必須 | 無 |
50×50 | Icon-Small-50.png | iPad的Spotlight | 可選,但建議加入。 | 無 |
29×29 | Icon-Small.png | iPad的設置app | 如果app有設置程序包,那麼建議加入。否則可選,但建議加入。 | 無 |
表格三:Universal的app圖標要求。
尺寸 | 文件名 | 用途 | 是否必須 | 備註 |
---|---|---|---|---|
512×512 | iTunesArtwork | Ad Hoc iTunes | 可選,但建議加入 | 文件應該是PNG格式,但文件名不要使用.png後綴。 |
57×57 | Icon.png | iPhone/iPod touch的App Store和主屏幕(Home screen) | 必須 | 無 |
114×114 | [email protected] | 高分辨率的iPhone 4主屏幕 | 可選,但建議加入 | 無 |
72×72 | Icon-72.png | iPad的App Store和主屏幕 | 必須 | 無 |
29×29 | Icon-Small.png | iPad和iPhone的設置app,iPhone的Spotlight | 如果app有設置程序包,那麼建議加入。否則可選,但建議加入。 | 無 |
50×50 | Icon-Small-50.png | iPad的Spotlight | 可選,但建議加入。 | 無 |
58×58 | [email protected] | 高分辨率的iPhone 4的Spotlight和設置app | 如果app有設置程序包,那麼建議加入。否則可選,但建議加入。 | 無 |
- 尺寸單位是px,寬x高。
- iPhone/iPod Touch的啓動畫面是全尺寸,iPad的則要去掉“狀態欄”(Status bar)的高度(20px)。
- iPad的啓動畫面是分模式的:豎排(portrait)和橫排模式(landscape)。
尺寸 | 設備 | 模式 |
---|---|---|
320 x 480 | 低分辨率iPhone/iPod Touch | 豎排和橫排 |
640 x 960 | 高分辨率iPhone/iPod Touch | 豎排和橫排 |
768 x 1004 | iPad | 豎排 |
1024 x 748 | iPad |
橫排 |