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

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

iphone6適配

之前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

手機(jī) pt px ppi
iphone4/4s/ 320x480 640x960 326
iphone5/5c/5s 320x568 640x1136 326
iphone6 375x667 750x1334 326
iphone6+ 414x736 1242x2208 (1080x1920) 401

對于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。

app設(shè)計稿

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

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

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

 

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

changba

 

第三步:機(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)排版時,最好不要隨字號縮放,否則可能超出既定寬高。

?最新APP設(shè)計教程_03

其他適配方法 還有:

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的適配技巧。

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