目前很多移動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
手機(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。
適配問題其實(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的適配技巧。
全站高品質(zhì)素材免費(fèi)下載!