当前位置: 首页 >> APP界面设计_APPUI设计_APP设计素材 >> 阅读正文

iphone6/6+的适配原理和适配心得分享

目前很多移动UI设计师,开始了一个又一个的APPUI项目。只知道需要设计一个iphone 6+的尺寸,然后根据这个尺寸进行缩放,从而达到适配其他手机机型的方案。

iphone6适配

之前25学堂跟大家分享过:

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

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

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

等等优秀的关于iphone 界面设计尺寸的适配问题。 但是其中,有多少设计师真正理解这个适配的原理和做法呢?

今天25学堂的老谭童鞋利用周末的早上,跟大家一起分享下iphone6/6+的适配的真正原理。

 

第一步:回顾下主流iphone的分辨率pt、px和PPI

手机 pt px ppi
iphone4/4s/ 320×480 640×960 326
iphone5/5c/5s 320×568 640×1136 326
iphone6 375×667 750×1334 326
iphone6+ 414×736 1242×2208 (1080×1920) 401

对于6+之前的手机,pt和px的比例为1:2。而6+出来之后,这一比例达到了1:3。同时分辨率达到了1242×2208(使用ip6+截图,再传到电脑上看,就是这个分辨率),而iphone实际分辨率为1080×1920。分辨率的比率为1.15:1。

对于ppi,6+之前均为326,而6+之后变为401。

 

在实际APP项目开发中,素材通常是移动UI美眉负责提供。从@2x到@3x,素材的分辨率提高了1.5倍。

例如一个@2x的素材大小为44×44,那么相应的@3x大小分辨率为66×66。

 

文件命名的方式依然没变:${IMG_NAME}@3x.png这种形式了。

命名好的文件丢入资源文件夹内,只要代码保持一致,文件名称不变即可。

 

第二步:UI切图到代码这个过程,移动APP设计师必须了解的一个过程。

由于ip6+点(point)和像素(pixel)的关系为1:3,因此,当UI设计稿基于1242 x 2208 分辨率【iphone6+】图给定UI设计稿时,程序员进行实际换算为设计稿的  1/3。

app设计稿

适配问题其实在ip5出现的时候就存在了,乔布斯的3.5寸是最方便单手操作的尺寸已经成为过去,ip5的4寸屏幕扇了自己的脸。

随着ip6的出现,屏幕分辨率也越来越多样化,以前在iOS中很方便的写死坐标法将越来越不好用了。因此需要进行适配。

可以对控件间距进行适配,也可以对控件大小本身适配。

 

知识点: 适配的总体原则就是相对布局了

changba

 

第三步:机型尺寸适配

 从iPhone5(s)发展到iPhone6(+),由于高宽比保持不变,iOS对图标、图片、字体进行等比放大自适应,清晰度会有所降低。同时,绝对坐标布局会导致在大屏下出现偏左偏上的问题。从分辨率的角度来看,iPhone6沿用二倍图(@2x),但需为iPhone6+提供更高的三倍图(@3x);从屏幕尺寸角度来看,需要重新对UI元素尺寸和布局进行适配,以期视觉协调。

(1)按宽度适配

我们先来看一下iPhone4~6(+)的屏幕高宽比:

       iPhone4(s):   分辨率960*640,         高宽比1.5

       iPhone5(s):  分辨率1136*640,         高宽比1.775

       iPhone6:       分辨率1334*750,         高宽比1.779

       iPhone6+:  分辨率1920*1080,         高宽比1.778

可粗略认为iPhone5(s)、6(+)的高宽比是一致的(16:9),即可以等比例缩放。因此可以

按宽度适配

 适配代码: fitScreenWidth= width*(SCREEN_WIDTH/320)

这样,共有iPhone3/4/5、6、6+三组宽度,在iPhone6、6+下将按比例横向放大。

(2)按高度适配

    在同样的宽度下,iPhone4(s)的屏高比iPhone5(s)低,若纵向排版紧张,可以iPhone5(s)为基准,

按高度适配

 适配代码: fitScreenHeight= height*(SCREEN_HEIGHT/568)

共有iPhone3/4、5、6、6+四组高度,在iPhone3/4下将按比例纵向缩小,在iPhone6、6+下将按比例纵向放大。

这里需要注意iPhone/iOS双环上网的热点栏对纵向布局的影响:iPhone作为个人热点且有连接时,系统状态栏下面会多一行热点连接提示栏”Personal Hotspot: * Connection”,纵向会下压20pt,[UIApplication sharedApplication].statusBarFrame高度变为40pt;当所有连接都断开时,热点栏消失,纵向高度恢复正常为20pt。

(3)按字体适配

另外,iPhone的【设置】【通用】【辅助功能】中可以设置调节【更大字体】,

APP也可以按字号适配

例如适配表视图(UITableView:UIScrollView),无法左右滑动,因此无论字号缩放比例多大,横向都不应超过SCREEN_WIDTH。注意限定控件元素内容区域宽度以及间距,并设置适当的LineBreakMode。表视图支持上下滑动,因此纵向上的表格行高和内容区域高度可按字号缩放。

对于纵向也不支持滑动的视图,在屏幕可见视区内排版时,最好不要随字号缩放,否则可能超出既定宽高。

 最新APP设计教程_03

其他适配方法 还有:

1、对于ip6或者6+最简单的适配方法就是:不适配。

从上面计算可以看出,ip5,6,6+的屏幕比例均为16:9。因此,当一个app【支持ip5】的话,那么在ip6/6+上运行时,系统将会对画面进行拉伸,以便填充整个屏幕。

拉伸之后看起来图标、字体、图片什么的都变大了,并且清晰度降低了,感觉就是在PC上全屏运行FC模拟器玩游戏这种感受。虽然降低了用户体验,但是比以前屏幕顶端和底端出现粗又黑的黑条来说,简直是好多了。

 

2、占屏比适配

对于不同手机,屏幕宽度是不同的。这样两个按钮的间距在不同屏幕上就显示合适了。使用[UIScreen mainScreen].bounds.size.width求出屏幕宽度。

当然也不一定使用屏幕宽度作为基准尺度,在实际应用中,还可以选择superView frame的宽度、按钮本身宽度、某个基准图片的宽度等作为基准尺度。

 

3、比例缩放适配

这个是我们目前最常用的一种适配方式。根据屏幕比例进行适配。简单而容易理解,适配效果也还不错。

以上就是前辈们分享的关于iphone6/6+的适配原理和iphone6/6+的适配心得,希望对各位有所收获。

最后还跟大家分享一篇《一篇厚道的Autolayout及VFL经验分享》的博文。有兴趣的设计师和交互设计师可以阅读。关于ios Autolayout的适配技巧。



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

本文标题:iphone6/6+的适配原理和适配心得分享

本文地址:http://www.25xt.com/appdesign/8981.html

本文关键词: , ,

除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,转载同时请务必保留原网站网址。