iPhone XR、XS、XS Max發布後，UI設計師如何做適配？

12-12

北京時間9月13日凌晨1點，蘋果在美國加利福尼亞州的Apple Park園區召開了2018年蘋果秋季新品發布會；發布的三款新iPhone包括兩款OLED屏幕的iPhone XS和iPhone XS Max，屏幕尺寸分別為5.8英寸和6.5英寸，和iPhone XR，配備6.1英寸LCD液晶屏。

新機型的發布，必然會對UI設計師的適配產生一些影響，下面U妹帶大家一起來看看都有哪些變化？

一、屏幕尺寸與解析度

二、如何進行適配？

手機適配採用幾倍圖與PPI是有關係的，也就是所謂的像素密度，現在，我們都是以750x1334px的尺寸作為設計稿進行設計，以@2x為基準做設計稿，有一種情況現在非常普遍，那就是一稿兩用；設計師都是做IOS版本的設計稿，同時適配安卓，這樣既節省了開發時間和並減少了項目成本。

1、對於iPhone XS

新發布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。

我們發現，iPhone XS Max的適配，和去年設計師適配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；

對比發現，iPhone XR與iPhone XS Max寬高比是一致的！這意味著 UI設計者做完iPhone XS Max的適配後，直接進行等比例縮放2/3就可以得到iPhone XR了，不用重新進行修改布局（也可以先做iPhone XR的適配，再等比例縮放到iPhone XS Max）。

三、布局與安全區域

在為iPhone X做設計時，由於之前的直角屏幕變為了圓角，所以我們必須確保布局覆蓋到整個屏幕，不會被設備屏幕上的圓角、感測器和指示燈所遮蔽。

對於應用程序中大多數使用標準化的、系統提供的UI元素（如導航欄、表格等）會自動適配iPhone X。背景延伸到顯示器邊緣。

以上是官方提供的布局指南，這個布局有助於內容的定位，對齊和間距安全區域可以防止內容覆蓋狀態欄，導航欄，工具欄和標籤欄。

豎直時的安全區可延伸至螢幕左右兩側，上部留44pt給狀態欄；布局邊距通常左右再內縮15pt。

橫向時的安全區左右兩側皆內縮44pt；布局邊距通常左右再內縮15pt。

需要特別注意的是，將手機橫向展示時，需要注意「劉海」區域，做設計時儘可能左右對稱內縮，可達成體驗的一致性。

四、總結

對於新發布的3種機型，我們還是以750x1334px為設計稿尺寸，切圖資源正常輸出@2X、@3X為切圖資源，設計稿尺寸不變，在適配上，iPhone XR使用的是二倍圖@2x切圖資源，iPhone XS、iPhone XS Max使用的是三倍圖@3x切圖資源。