目前很多移動UI設(shè)計師，開始了一個又一個的APPUI項目。只知道需要設(shè)計一個iphone 6+的尺寸，然后根據(jù)這個尺寸進(jìn)行縮放，從而達(dá)到適配其他手機(jī)機(jī)型的方案。

之前25學(xué)堂跟大家分享過：

1、最新WebAPP設(shè)計指南規(guī)范：適配iphone6技巧

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

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

等等優(yōu)秀的關(guān)于iphone 界面設(shè)計尺寸的適配問題。 但是其中，有多少設(shè)計師真正理解這個適配的原理和做法呢？

今天25學(xué)堂的老譚童鞋利用周末的早上，跟大家一起分享下iphone6/6+的適配的真正原理。

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

對于6+之前的手機(jī)，pt和px的比例為1:2。而6+出來之后，這一比例達(dá)到了1:3。同時分辨率達(dá)到了1242x2208（使用ip6+截圖，再傳到電腦上看，就是這個分辨率），而iphone實(shí)際分辨率為1080x1920。分辨率的比率為1.15:1。

對于ppi，6+之前均為326，而6+之后變?yōu)?01。

在實(shí)際APP項目開發(fā)中，素材通常是移動UI美眉負(fù)責(zé)提供。從@2x到@3x，素材的分辨率提高了1.5倍。

例如一個@2x的素材大小為44x44，那么相應(yīng)的@3x大小分辨率為66x66。

文件命名的方式依然沒變：${IMG_NAME}@3x.png這種形式了。

命名好的文件丟入資源文件夾內(nèi)，只要代碼保持一致，文件名稱不變即可。

第二步：UI切圖到代碼這個過程，移動APP設(shè)計師必須了解的一個過程。

由于ip6+點(diǎn)（point）和像素(pixel)的關(guān)系為1：3，因此，當(dāng)UI設(shè)計稿基于1242 x 2208 分辨率【iphone6+】圖給定UI設(shè)計稿時，程序員進(jìn)行實(shí)際換算為設(shè)計稿的 ?1/3。

適配問題其實(shí)在ip5出現(xiàn)的時候就存在了，喬布斯的3.5寸是最方便單手操作的尺寸已經(jīng)成為過去，ip5的4寸屏幕扇了自己的臉。

隨著ip6的出現(xiàn)，屏幕分辨率也越來越多樣化，以前在iOS中很方便的寫死坐標(biāo)法將越來越不好用了。因此需要進(jìn)行適配。

可以對控件間距進(jìn)行適配，也可以對控件大小本身適配。

知識點(diǎn)：?適配的總體原則就是相對布局了

第三步：機(jī)型尺寸適配

?從iPhone5(s)發(fā)展到iPhone6(+)，由于高寬比保持不變，iOS對圖標(biāo)、圖片、字體進(jìn)行等比放大自適應(yīng)，清晰度會有所降低。同時，絕對坐標(biāo)布局會導(dǎo)致在大屏下出現(xiàn)偏左偏上的問題。從分辨率的角度來看，iPhone6沿用二倍圖（@2x），但需為iPhone6+提供更高的三倍圖（@3x）；從屏幕尺寸角度來看，需要重新對UI元素尺寸和布局進(jìn)行適配，以期視覺協(xié)調(diào)。

（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

可粗略認(rèn)為iPhone5(s)、6(+)的高寬比是一致的（16:9），即可以等比例縮放。因此可以

按寬度適配：

?適配代碼： fitScreenWidth= width*(SCREEN_WIDTH/320)

這樣，共有iPhone3/4/5、6、6+三組寬度，在iPhone6、6+下將按比例橫向放大。

（2）按高度適配

? ? 在同樣的寬度下，iPhone4(s)的屏高比iPhone5(s)低，若縱向排版緊張，可以iPhone5(s)為基準(zhǔn)，

按高度適配：

?適配代碼：?fitScreenHeight= height*(SCREEN_HEIGHT/568)

共有iPhone3/4、5、6、6+四組高度，在iPhone3/4下將按比例縱向縮小，在iPhone6、6+下將按比例縱向放大。

這里需要注意iPhone/iOS雙環(huán)上網(wǎng)的熱點(diǎn)欄對縱向布局的影響：iPhone作為個人熱點(diǎn)且有連接時，系統(tǒng)狀態(tài)欄下面會多一行熱點(diǎn)連接提示欄"Personal Hotspot: * Connection"，縱向會下壓20pt，[UIApplication sharedApplication].statusBarFrame高度變?yōu)?0pt；當(dāng)所有連接都斷開時，熱點(diǎn)欄消失，縱向高度恢復(fù)正常為20pt。

（3）按字體適配

另外，iPhone的【設(shè)置】【通用】【輔助功能】中可以設(shè)置調(diào)節(jié)【更大字體】，

APP也可以按字號適配：

例如適配表視圖（UITableView:UIScrollView），無法左右滑動，因此無論字號縮放比例多大，橫向都不應(yīng)超過SCREEN_WIDTH。注意限定控件元素內(nèi)容區(qū)域?qū)挾纫约伴g距，并設(shè)置適當(dāng)?shù)腖ineBreakMode。表視圖支持上下滑動，因此縱向上的表格行高和內(nèi)容區(qū)域高度可按字號縮放。

對于縱向也不支持滑動的視圖，在屏幕可見視區(qū)內(nèi)排版時，最好不要隨字號縮放，否則可能超出既定寬高。

?

其他適配方法 還有：

1、對于ip6或者6+最簡單的適配方法就是：不適配。

從上面計算可以看出，ip5，6，6+的屏幕比例均為16：9。因此，當(dāng)一個app【支持ip5】的話，那么在ip6/6+上運(yùn)行時，系統(tǒng)將會對畫面進(jìn)行拉伸，以便填充整個屏幕。

拉伸之后看起來圖標(biāo)、字體、圖片什么的都變大了，并且清晰度降低了，感覺就是在PC上全屏運(yùn)行FC模擬器玩游戲這種感受。雖然降低了用戶體驗(yàn)，但是比以前屏幕頂端和底端出現(xiàn)粗又黑的黑條來說，簡直是好多了。

2、占屏比適配

對于不同手機(jī)，屏幕寬度是不同的。這樣兩個按鈕的間距在不同屏幕上就顯示合適了。使用[UIScreen mainScreen].bounds.size.width求出屏幕寬度。

當(dāng)然也不一定使用屏幕寬度作為基準(zhǔn)尺度，在實(shí)際應(yīng)用中，還可以選擇superView frame的寬度、按鈕本身寬度、某個基準(zhǔn)圖片的寬度等作為基準(zhǔn)尺度。

3、比例縮放適配

這個是我們目前最常用的一種適配方式。根據(jù)屏幕比例進(jìn)行適配。簡單而容易理解，適配效果也還不錯。

以上就是前輩們分享的關(guān)于iphone6/6+的適配原理和iphone6/6+的適配心得，希望對各位有所收獲。

最后還跟大家分享一篇《一篇厚道的Autolayout及VFL經(jīng)驗(yàn)分享》的博文。有興趣的設(shè)計師和交互設(shè)計師可以閱讀。關(guān)于ios?Autolayout的適配技巧。