iPhone XR午笛、XS、XS Max發(fā)布后苗桂，UI設(shè)計師如何做適配季研？
北京時間9月13日凌晨1點，蘋果在美國加利福尼亞州的Apple Park園區(qū)召開了2018年蘋果秋季新品發(fā)布會誉察；發(fā)布的三款新iPhone包括兩款OLED屏幕的iPhone XS和iPhone XS Max，屏幕尺寸分別為5.8英寸和6.5英寸惹谐，和iPhone XR持偏，配備6.1英寸LCD液晶屏。
新機(jī)型的發(fā)布氨肌，必然會對UI設(shè)計師的適配產(chǎn)生一些影響鸿秆，下面U妹帶大家一起來看看都有哪些變化？
一怎囚、?屏幕尺寸與分辨率
二卿叽、如何進(jìn)行適配桥胞？
手機(jī)適配采用幾倍圖與PPI是有關(guān)系的，也就是所謂的像素密度考婴，現(xiàn)在贩虾，我們都是以750x1334px的尺寸作為設(shè)計稿進(jìn)行設(shè)計，以@2x為基準(zhǔn)做設(shè)計稿沥阱，有一種情況現(xiàn)在非常普遍缎罢，那就是一稿兩用；設(shè)計師都是做IOS版本的設(shè)計稿考杉，同時適配安卓策精，這樣既節(jié)省了開發(fā)時間和并減少了項目成本。
1崇棠、對于iPhone XS
新發(fā)布iPhone XS（458ppi）咽袜，5.8英寸，分辨率為1125x2436px枕稀，與iPhone X（三倍圖）是一致的询刹，所以我們可以得出iPhone XS也是使用的三倍圖@3x。
2抽莱、對于iPhone XS Max
iPhone XS Max（458ppi）范抓，6.5英寸，分辨率為1242*2688px食铐，而iPhone8 Plus（三倍圖匕垫，401ppi），分辨率為1242x2208px虐呻，iPhoneXS Max比iPhone8 Plus的PPI僅多了50多象泵，跟iPhoneX（三倍圖）的PPI一致，可以看出iPhoneXs Max使用的同樣是三倍圖@3x斟叼。
從屏幕寬高比例來看：
iPhone XS Max寬度1242/3=414pt偶惠，iPhone8 Plus寬度1242/3=414pt，兩者的寬度一致
iPhone XS Max高度2688/3=896pt朗涩，iPhone8 Plus高度2208/3=736pt忽孽；
iPhone XS Max比iPhone8 Plus長一截，多了160pt谢床。
我們發(fā)現(xiàn)兄一，iPhone XS Max的適配，和去年設(shè)計師適配iPhoneX差不了多少识腿。
3出革、對于iPhone XR
iPhone XR（326ppi），6.1英寸渡讼，分辨率為828x1792px骂束，可以看到iPhone XR與iOS二倍圖的PPI（326ppi）一致耳璧，可以看出iPhone XR使用的是二倍圖@2x。
從屏幕寬高比例來看：
iPhone XR寬度828/2=414pt展箱，iPhone XS Max寬度1242/3=414pt旨枯；
iPhone XR高度1792/2=896pt，iPhone XS Max高度2688/3=896pt析藕；
對比發(fā)現(xiàn)召廷，iPhone XR與iPhone XS Max寬高比是一致的！這意味著?UI設(shè)計者做完iPhone XS Max的適配后账胧，直接進(jìn)行等比例縮放2/3就可以得到iPhone XR了竞慢，不用重新進(jìn)行修改布局（也可以先做iPhone XR的適配，再等比例縮放到iPhone XS Max）治泥。
三筹煮、布局與安全區(qū)域
在為iPhone X做設(shè)計時，由于之前的直角屏幕變?yōu)榱藞A角居夹，所以我們必須確保布局覆蓋到整個屏幕败潦，不會被設(shè)備屏幕上的圓角、傳感器和指示燈所遮蔽准脂。
對于應(yīng)用程序中大多數(shù)使用標(biāo)準(zhǔn)化的劫扒、系統(tǒng)提供的UI元素（如導(dǎo)航欄、表格等）會自動適配iPhone X狸膏。背景延伸到顯示器邊緣沟饥。
以上是官方提供的布局指南，這個布局有助于內(nèi)容的定位湾戳，對齊和間距安全區(qū)域可以防止內(nèi)容覆蓋狀態(tài)欄贤旷，導(dǎo)航欄，工具欄和標(biāo)簽欄砾脑。
豎直時的安全區(qū)可延伸至螢?zāi)蛔笥覂蓚?cè)幼驶，上部留44pt給狀態(tài)欄；布局邊距通常左右再內(nèi)縮15pt韧衣。
橫向時的安全區(qū)左右兩側(cè)皆內(nèi)縮44pt盅藻；布局邊距通常左右再內(nèi)縮15pt。
需要特別注意的是畅铭，將手機(jī)橫向展示時萧求，需要注意“劉海”區(qū)域顶瞒，做設(shè)計時盡可能左右對稱內(nèi)縮，可達(dá)成體驗的一致性元旬。
四榴徐、總結(jié)
對于新發(fā)布的3種機(jī)型守问，我們還是以750x1334px為設(shè)計稿尺寸，切圖資源正常輸出@2X坑资、@3X為切圖資源耗帕，設(shè)計稿尺寸不變，在適配上袱贮，iPhone XR使用的是二倍圖@2x切圖資源仿便，iPhone XS、iPhone XS Max使用的是三倍圖@3x切圖資源攒巍。
