NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

iOS開發:解析度畫素你知多少

iPhone螢幕尺寸和解析度方面的一些小姿勢 20160303

iPhone裝置現在有多種解析度,如下表所列,

裝置螢幕尺寸解析度(pt)Reader解析度(px)渲染後PPI(DPI)
iPhone 3GS3.5寸320 x 480@1x320 x 480163
iPhone 4/4S3.5寸320 x 480@2x640 x 960326
iPhone 5/5S/5C4.0寸320 x 568@2x640 x 1136326
iPhone 6/6S4.7寸375 x 667@2x750 x 1334326
iPhone 6/6S Plus5.5寸414 x 736@3x1242 x 22081080 x 1920401

剛開始看見上面的表格時候,我有三個疑問,

  1. DPI和PPI是什麼意思?

  2. pt和px是有什麼不同?

  3. iPhone 6/6s Plus解析度是1242 x 2208,為何渲染後解析度變為1080 x 1920?

針對以上三個問題,我遵循內事不決問百度,外事佈局問谷歌的原則,在網上找了一些答案,以下是簡單的解答。

1. DPI和PPI是什麼鬼?

DPI(Dots Per Inch)最初用於衡量列印無上每英寸的點數密度,就是說你的印表機可以在一英寸內打多少個點。DPI值越小,圖片越不驚喜。

當DPI的概念用在計算機螢幕上時候,就應該稱之為PPI(Pixels Per Inch)。同理:PPI就是計算機螢幕上每英寸可以顯示的畫素點的數量。

Windows系統預設PPI是96,Mac OS系統預設PPI是72.一般費視網膜螢幕的桌面電腦的PPI在72到120之間,使用72到120之間的PPI進行設計基本可以保證你的作品在大多數情況下看起來都差不多。

舉個栗子來說:27寸Mac的PPI是109,也就是每英寸有109個畫素。顯示器寬度(含邊框)為25.7英寸,螢幕純寬度差不多是23.5英寸,所以23.5 x 109 = 2560,由此可見螢幕的解析度為2560 x 1440px。

視網膜螢幕與PPI:視網膜螢幕是在iPhone4釋出時進入大眾視野的,叫視網膜是因為螢幕的PPI高到人的肉眼無法看到畫素點。從技術上來說就是他們在物理尺寸與上一代相同的螢幕上塞了2倍的畫素,如下圖所示,

這種情況下,不蘇傲笑元素的大小,相同尺寸螢幕上的元素精度提高了2倍。原來一個畫素的空間現在有4個畫素,畫素是原來的4倍。

iPhone 4採用Retina顯示屏,在物理尺寸不變的情況下,畫素成倍增加,達到了640 x 960畫素。這樣就出現了一個問題,怎樣讓原有的App執行在新的手機上面?為了執行之前的App,蘋果公司引入了一個新的概念point(點),點這個概念在iOS開發中十分重要,而開發者很少關注。iPhone
4螢幕尺寸繼續保持320 x 480,不過單位並非是畫素,而是點。

iPhone 3GS中,一個點等於一個畫素,也就是說點跟畫素可以直接互換;在iPhone 4中,一個點等於兩個畫素;在iPhone
6 Plus中,一個點等於3個畫素。

iPhone 4和iPhone 3GS的螢幕尺寸實際上是一樣的,都是3.5英寸。同樣一個點,實際上看起來是一樣的,只是iPhone
4在單位英寸上畫素更多,看起來更加細膩。

2. pt和px有什麼不同?

pt(Point)代表點,px(Piexl)表示畫素,這是兩個看起來很像、卻完全不一樣的單位,在某些場合它們是1:1的,在很多時候卻常常被搞混,或是製作過程根本沒有分清楚、導致結果不準確。在繪圖軟體裡面可以看到基本單位設定裡面就有這兩個選擇,

px,即是pixel,表示畫素。是螢幕上所顯示的最小單位,在解析度高的螢幕上,一個畫素可能會達到肉眼無法識別的大小,

pt,即是point,是一個標準的長度單位,定義上1pt = 1/72英寸,英雌他跟我們所熟悉的公分、公尺一樣,可以明確的指出1pt的長度是多少,

pt也是常見的標識文字尺寸的單位,在繪圖以及文書軟體等幾乎都是使用pt作為字型標尺的單位,故一般稱呼[字級]時候,通常即是指pt。

pt和px理解青睞其實並不難,在應用的時候也相當單純,在大部分的情況下適用的一個理論是:當設計的目的是用於供螢幕瀏覽,則趨向於使用px以方便掌握細節;而如果是為了做輸出列印的需求,使用pt則是較好的選擇。

iPhone 3GS時代,解析度和點是1:1,到了iPhone 4,解析度和點是2:1的關係,而在iPhone
6 Plus裝置上,解析度和點事3:1,所以為了方便開發人員開發,iOS中統一使用點(Point)對介面元素的大小進行描述,這樣解析度的差異對於開發者來說就不是問題了,在開發層面來說,開發者無需進行解析度和點的單位換算,完全感覺不到點和解析度的差異。

當我們說一個iPhone裝置的解析度時候,實際上我們是用的pt(點)作為描述解析度的單位;當我們和UI討論圖片的尺寸時候,實際說的是px(畫素)來作為描述圖片的單位。

3. iPhone 6/6s Plus解析度是1242 x 2208,為何渲染後解析度變為1080 x 1920?

iPhone 6 Plus除外,其他所有iPhone的PPI是一致的,都是326,用@2x素材。

但是iPhone 6 Plus的實際PPI是401,理論上蘋果應該用401 / 326 x @2x = @2.46x的素材,但是這個奇葩的臂力對於開發者而言很難切圖,所以蘋果為了方便開發者就採用了@3x的素材,然後再縮放到@2.46x的螢幕上,也就是縮放到2.46 / 3 = 83%,實際上蘋果選取了一個接近比例的87%。這樣算下來,物理解析度和虛擬解析度的比率是87%,也就是1080
/ 0.86 = 1242,1920 / 0.87 = 2208。好處是開發者更方便,比如準備素材時候,字號可以直接調整為3x的。

讓我們再來看一下不同iPhone裝置的解析度和畫素的對照表,

手機ptpxPPI(DPI)
iPhone 4/4S/5/5S/5C/61020326
iPhone 6/6S Plus1030401

對於iPhone 6 Plus之前的手機,pt和px的比例是1:2,而iPhone 6 Plus出來之後,這一比例達到了1:3,同時解析度達到了1242
x 2208(使用iPhone 6 Plus截圖,再上傳到電腦看,就是這個解析度),而iPhone 6 Plus實際解析度為1080
x 1920,解析度的比率為1.15:1。對於ppi,iPhone 6 Plus之前均為326,而之後變為401。

素材資源發生的變化@3x,在實際開發中,素材通常是UI美眉負責提供,從@2x到@3x,素材的解析度提高了1.5倍,例如一個@2x的素材大小為44×44,那麼響應的@3x大小解析度為66×66,檔案命名的方式依然沒變,$(IMG_NAME)@3x.png,命名好的檔案丟入資原始檔夾內,只要程式碼報紙一直,檔名稱不變即可。

相關文章

程式語言 最新文章