iPhone 4 5 6屏幕尺寸大小和APP设计详细解读 – 25学堂

25学堂  •  扫码分享
我是创始人李岩:很抱歉!给自己产品做个广告,点击进来看看。  

25学堂再来跟大家重新解读下苹果手机4、5、6屏幕各尺寸大小,也许你们都知道啦,但是还有很多APP设计师新手不停的在群问,所以,25学堂的小编特为大家奉上这篇关于iPhone 4 5 6屏幕尺寸大小详细解读。

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

1、苹果手机(iPhone)全部尺寸规格

设备

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

320×480

@1x

320×480

163

4(s)

2.31 inches (58.6 mm)

4.5 inches (115.2 mm)

3.5-inch

320×480

@2x

640×960

326

5c

2.33 inches (59.2 mm)

4.90 inches (124.4 mm)

4-inch

320×568

@2x

640×1136

326

5(s)

2.31 inches (58.6 mm)

4.87 inches (123.8 mm)

4-inch

320×568

@2x

640×1136

326

6

2.64 inches (67.0 mm)

5.44 inches (138.1 mm)

4.7-inch

375×667

@2x

750×1334

326

6+

3.06 inches (77.8 mm)

6.22 inches (158.1 mm)

5.5-inch

414×736

@3x

(1242×2208->)

1080×1920

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)数目。

PPI数值越高,代表显示屏能够以越高的密度显示图像,即通常所说的分辨率越高、颗粒感越弱。

根据勾股定理,可以得知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中,同样大小(3.5 inch)的屏幕采用了 Retina显示技术 ,横、纵向方向像素密度都被放大到2倍,像素分辨率提高到(320×2)x(480×2)= 960×640(PPI=326), 显像分辨率提升至iPhone3GS的4倍(1个Point被渲染成1个2×2的像素矩阵)。

但是对于开发者来说,iOS绘制图形的API依然沿袭point(pt,注意区分印刷行业的“磅”)为单位。在同样的逻辑坐标系下(320×480):

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

    可以理解为:

    scale= 绝对长度比 point/pixel)= 单位长度内的数量比 pixel/point)

 为了自动适应分辨率,系统会根据设备实际分辨率,自动给UIScreen.scale赋值,该属性对开发者只读。APP设计师可以忽略。

iphone6 界面设计psd模板

4、 @2x/@3x   以及高倍图适配

ne 6 Plus发布后,iphone APP设计不得了考虑适配所有iPhone机型啦。

iPhone-6UI界面设计和适配尺寸规范

(1)、@2x

iPhone3GS时代,我们为一个应用提供图标(或按钮提供贴图),只需要icon.png。针对现在的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(1242×2208-> 1080×1920 ),准确的讲,应该是@2.46x。苹果为方便开发者用的是@3x的素材,然后再缩放到@2.46x上。

1、 iPhone 6/6Plus UI界面设计和适配尺寸规范

2、 iPhone 6/6Plus APPui界面设计规范以及界面适配

3、 最新WebAPP设计指南规范:适配iphone6技巧

    如果APP要同时兼容iPhone3GS~iPhone6+,则需要提供icon.png/icon@2x.png/icon@3x.png三种分辨率的图片。

    需要注意的是,iOS APP图标的尺寸 和 切图命名规范 都需要遵守相关规范

(3)高倍图文件命名

    对于iPhone3、4/5/6、6+三类机型,需要按分辨率提供相应的高倍图并且文件名添加相应后缀,否则会拉伸(stretchable/resizable)失真(模糊或边角出现锯齿)。

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

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

切图宽和高 必须的偶数。

 

 

无觅相关文章插件,快速提升流量

随意打赏

提交建议
微信扫一扫,分享给好友吧。