iPhone 4 5 6屏幕尺寸大小和APP設計詳細解讀

25學堂再來跟大家重新解讀下蘋果手機4、5、6屏幕各尺寸大小,也許你們都知道啦,但是還有很多APP設計師新手不停的在群問,所以,25學堂的小編特為大家奉上這篇關于iPhone 4 5 6屏幕尺寸大小詳細解讀。

iPhone-4-5-6屏幕尺寸大小

1、蘋果手機(iPhone)全部尺寸規(guī)格

設備

iPhone

Width

Height

對角線

Diagonal

邏輯分辨率(point)

Scale Factor

設備分辨率(pixel)

PPI

3GS

2.4 inches (62.1 mm)

4.5 inches (115.5 mm)

3.5-inch

320x480

@1x

320x480

163

4(s)

2.31 inches (58.6 mm)

4.5 inches (115.2 mm)

3.5-inch

320x480

@2x

640x960

326

5c

2.33 inches (59.2 mm)

4.90 inches (124.4 mm)

4-inch

320x568

@2x

640x1136

326

5(s)

2.31 inches (58.6 mm)

4.87 inches (123.8 mm)

4-inch

320x568

@2x

640x1136

326

6

2.64 inches (67.0 mm)

5.44 inches (138.1 mm)

4.7-inch

375x667

@2x

750x1334

326

6+

3.06 inches (77.8 mm)

6.22 inches (158.1 mm)

5.5-inch

414x736

@3x

(1242x2208->)

1080x1920

401

 

單位inch(英吋)的注釋:??1 inch = 2.54cm = 25.4mm

相關邏輯分辨率和 物理分辨率的詳細解讀:

手機屏幕分辨率術語:邏輯分辨率和物理分辨率

 

簡單明要的說iPhone 4 5 6屏幕尺寸大小:

蘋果iphone4 /iphone 4s ?-------------------- ?3.5英寸 --------- ?640*960px-----高寬比1.5

蘋果iphone5 / ?iphone 5c ?/iphone 5s ?------4英寸------------640*1136px-----高寬比1.775

蘋果iphone6 ?----------------------------------4.7英寸------------750*1334px-----高寬比1.779 ?

蘋果iphone6 plus ------------------- ---------5.5英寸------------1242*2208px-----高寬比1.778

 

我們通常所說的iPhone4屏幕尺寸為3.5英寸、iPhone5屏幕尺寸為4英寸、iPhone6屏幕尺寸為4.7英寸,指的是顯示屏對角線的長度(diagonal)。

 

2、蘋果手機iphone 的屏幕密度PPI

iPhone-4-5-6-屏幕密度

PI(Pixel Per Inch by diagonal):表示沿著對角線,每英寸所擁有的像素(Pixel)數(shù)目。

PPI數(shù)值越高,代表顯示屏能夠以越高的密度顯示圖像,即通常所說的分辨率越高、顆粒感越弱。

根據(jù)勾股定理,可以得知iPhone4(s)的PPI計算公式為:

3、蘋果手機iPhone 4 5 6的屏幕的縮放因子(Scale)

?早期的iPhone3GS的屏幕分辨率是320*480(PPI=163),iOS繪制圖形(CGPoint/CGSize/CGRect)均以point為單位(measured in points):

????1 point = 1 pixel(Point Per Inch=Pixel Per Inch=PPI)

后來在iPhone4中,同樣大?。?.5 inch)的屏幕采用了Retina顯示技術,橫、縱向方向像素密度都被放大到2倍,像素分辨率提高到(320x2)x(480x2)= 960x640(PPI=326),?顯像分辨率提升至iPhone3GS的4倍(1個Point被渲染成1個2x2的像素矩陣)。

但是對于開發(fā)者來說,iOS繪制圖形的API依然沿襲point(pt,注意區(qū)分印刷行業(yè)的“磅”)為單位。在同樣的邏輯坐標系下(320x480):

? ? 1 point = scale*pixel(在iPhone4~6中,縮放因子scale=2;在iPhone6+中,縮放因子scale=3)。

? ? 可以理解為:

? ? scale=絕對長度比point/pixel)=單位長度內(nèi)的數(shù)量比pixel/point)

?為了自動適應分辨率,系統(tǒng)會根據(jù)設備實際分辨率,自動給UIScreen.scale賦值,該屬性對開發(fā)者只讀。APP設計師可以忽略。

iphone6 界面設計psd模板

4、@2x/@3x ??以及高倍圖適配

ne 6 Plus發(fā)布后,iphone APP設計不得了考慮適配所有iPhone機型啦。

iPhone-6UI界面設計和適配尺寸規(guī)范

(1)、@2x

iPhone3GS時代,我們?yōu)橐粋€應用提供圖標(或按鈕提供貼圖),只需要icon.png。針對現(xiàn)在的iPhone4~6 Retina顯示屏,需要制作額外的@2x高分辨率版本。

? ? 例如在iPhone3GS中,scale=1,用的圖標是50x50pixel(logicalimage.size=50x50point);在iPhone4~6中,scale=2,則需要100×100pixel(logical image.size=50x50point,乘以image.scale=dimensions in pixels),并且命名為icon@2x.png。

? ??如果APP要同時兼容iPhone3GS~iPhone6,則需要提供icon.png/icon@2x.png兩種分辨率的圖片。

(2)@3x

? ? @3x?means a new “triple” retina resolution, where eachuser interface point is represented by?three?display pixels. A single @2x pointis a 2?×?2 square of 4 pixels; an @3x point is a 3?×?3 square of 9 pixels.”

? ? iPhone6+在實際渲染時,downsampling/1.15(1242x2208->1080x1920),準確的講,應該是@2.46x。蘋果為方便開發(fā)者用的是@3x的素材,然后再縮放到@2.46x上。

1、iPhone 6/6Plus UI界面設計和適配尺寸規(guī)范

2、iPhone 6/6Plus APPui界面設計規(guī)范以及界面適配

3、最新WebAPP設計指南規(guī)范:適配iphone6技巧

? ? 如果APP要同時兼容iPhone3GS~iPhone6+,則需要提供icon.png/icon@2x.png/icon@3x.png三種分辨率的圖片。

? ? 需要注意的是,iOS APP圖標的尺寸切圖命名規(guī)范都需要遵守相關規(guī)范

(3)高倍圖文件命名

? ? 對于iPhone3、4/5/6、6+三類機型,需要按分辨率提供相應的高倍圖并且文件名添加相應后綴,否則會拉伸(stretchable/resizable)失真(模糊或邊角出現(xiàn)鋸齒)。

?比如:bg-xxx@2x.png、btn-xxx@2x.png?、icon-xxx@2x.png

如bg-xxx@3x.png、btn-xxx@3x.png?、icon-xxx@3x.png

切圖寬和高 必須的偶數(shù)。

 

 

每天更新,
全站高品質(zhì)素材免費下載!