天天看點

iOS App的圖示,啟動畫面及其它

注意: 最新的圖示尺寸和檔案名規格以Apple的文檔為準:Technical Q&A QA1686: App Icons on iPad and iPhone 。其中要注意,iTunesArtWork這項不用 寫入Info.plist的Icon files。這點Apple的文檔加粗說明了。

圖示的圓角和光暈效果

圓角效果。 圖示的圓角效果是系統自動加上的,我們不能控制。這也是為什麼我們看到的每個圖示,其圓角效果是完全相同的。

光暈效果。 光暈效果也是系統加上的,和“圓角”不同的是,光暈效果是一個可選項。我們可以通過設定app的光暈參數(UIPrerenderedIcon),告訴系統是否要為我們的圖示打上光暈效果。

總結:1)設計圖示時請記得,圖示的圓角效果是系統自動加上的,且是我們無法控制的。 2)設計圖示前先決定,是否要使用系統内建的“光暈效果”。

每個圖示都有相同的圓角。左邊的兩個圖示有光暈效果,右邊的兩個沒有。

iOS App的圖示,啟動畫面及其它

啟動畫面

我們可以為app設定啟動畫面,以便在app啟動的時候顯示。蘋果在其開發文檔中,很明确地表示:啟動畫面的作用是給使用者一種錯覺,一種app啟動很快速的錯覺。即,啟動畫面的初衷不是為了給使用者某種“視覺上的沖擊”。是以,蘋果建議開發者使用app的“空白”界面作為啟動畫面。蘋果自己的app 就是這樣做的。如果我們無視這種約定,而是使用和app界面完全無關的“插畫”作為啟動畫面(很多app都是這樣),那麼一般情況下,會有“地攤貨”的嫌疑。雖然大多數的普通使用者不清楚啟動畫面“應該”是什麼樣子:或許使用者會喜歡有“視覺沖擊力的”插畫;或許使用者會奇怪為何到了4月,啟動畫面卻仍舊是春節的主題;又或許使用者什麼感覺也沒有。如果一定要使用插畫,那麼不妨先回答這樣一個問題:考慮到蘋果開發的app,其啟動畫面使用的都是樸素的“空白”界,那麼我們的app是否有足夠充分的理由,來支援使用插畫呢?

如果要讓啟動畫面漂亮,我們可以先讓app的界面漂亮;App的界面漂亮,那app的“空白”界面也就漂亮;App的“空白”界面漂亮,啟動畫面也就漂亮了。

系統自帶的“時鐘”app。第一張是啟動畫面:使用的是app的“空白”界面。第二張是app運作時的截圖。

iOS App的圖示,啟動畫面及其它
iOS App的圖示,啟動畫面及其它

App的界面漂亮 = App的“空白”界面漂亮,啟動畫面也就自然漂亮。比如,Tweetbot的啟動畫面。

iOS App的圖示,啟動畫面及其它

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”。

舉一個例子:

Icon.png

iOS App的圖示,啟動畫面及其它

[email protected]

iOS App的圖示,啟動畫面及其它

這裡需要注意的是,雖然在浏覽器中,第二張圖檔的面積是第一張的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 橫排

來源:http://www.xiaweipin.com/archives/28