1 iOS裝置的解析度

都說做iOS開發比Android省心，那麼iOS是如何做到這一點的呢？我們今天就來分析一下，希望對做iOS的介面設計的同學有點協助。

 

1 iOS裝置的解析度

iOS裝置，目前最主要的有3種（Apple TV等不在此討論），按解析度分為兩類

iPhone/iPod Touch

普屏解析度    320像素 x 480像素

Retina解析度 640像素 x 960像素

iPad,iPad2/New iPad

普屏        768像素 x 1024像素

Retina屏  1536像素 x 2048像素

 

2  iOS設計時用的點與解析度的關係

儘管有上面列出的4種解析度情況，不過細心的人會發現，對於Retina屏的解析度始終保持為普屏的2倍，這對於iOS的設計還是開發的時候提供的莫大的方便，自然可以想到對於介面設計而言，只需要設計一套，然後進行等比例放大縮小即可。實際進行設計與開發的時候，也確實是這樣，Apple為了防止在交流過程中（尤其對於編程實現）解析度對思維的迷惑，統一使用點（Point）對介面元素的大小進行描述，例如： 

iPhone/iPod Touch

介面描述    320點 x 480點

iPhone/iPad

介面描述    768點 x 1024點

換算關係 

普屏       1點 = 1像素 

Retina屏 1點 = 2像素 

這樣，不管我們是在為普屏還是Retina屏進行設計與開發，我們都可以清楚地，並且統一地使用點對介面元素的大小進行描述了。

 

3  iOS介面圖片的命名

現在我們能夠用統一的語言描述兩種螢幕的介面元素的大小，但是我們如何針對不同螢幕設定不同解析度的圖片素材呢？難道說開發的時候我們要在每一個圖片載入的地方進行，添加判斷當前裝置是否是Retina屏的語句，然後載入對應的圖片嗎？當然可以這樣做，但是iOS有一套更簡便的方法進行自動載入，即通過規範的檔案名稱命名。例如下面這條載入圖片的語句：

[UIImage imageNamed:@"pic.png"]] 

在實際運行時，如果發現當前的裝置是Retina屏，會自動尋找圖片"pic@2x.png" ，自動載入針對Retina屏的圖片素材，是不是很方便呢？

所以，我們在製作iOS裝置時，可以仿照下面這樣，對圖片檔案進行分類，對於640x960檔案夾裡的圖片，檔案命名添加"@2x"即可。

 

4  iOS應用常用表徵圖的命名規範

可以參考下面兩個文檔：

Apple對此問題的Q&A 

Apple的官方說明文檔

請務必按照文檔中描述的規範進行表徵圖的命名！！

 

PS：一些額外的表徵圖參考

a 表徵圖會自動添加高亮效果，如果不需要，可以在plist中明確指定UIPrerenderedIcon的索引值去掉

b 57像素的普屏的iPhone表徵圖，表徵圖圓角的半徑為10像素

c 114像素Retina屏的iPhone表徵圖，表徵圖圓角的半徑為20像素

d 512像素的用於iTunes/App Store的表徵圖，在實際顯示是會被縮放到175像素進行顯示（但提交是不可以提交175像素）

e 72像素的普屏iPad表徵圖，表徵圖圓角的半徑為13像素

f 144像素Retina屏iPad表徵圖，表徵圖圓角的半徑為26像素

g 50像素iPad的Spotlight搜尋表徵圖的最終視覺大小是48像素，原因是iOS會對表徵圖的每個邊去掉1個像素，添加陰影製作效果

h 100像素Retina屏的Spotlight搜尋表徵圖的最終視覺大小是96像素，原因同上，這次是每邊減2個像素