新機型一發布，設計師們就要考慮適配問題。關于適配的文章看了幾篇了？ 眼花繚亂否？ 不如看一篇簡單直接的！

 

首先，我們來看下這三款機型的屏幕參數。

           

iPhone XS 

 

1125 X 2436px 分辨率， 458 ppi

 

iPhone XS Max

 

1242 x 2688px 分辨率，458 ppi

 

iPhone XR

 

828 X 1792px 分辨率，326ppi

 

 

從ppi看，萬幸，一切都是熟悉的，也就是說切圖倍數沒有改變。iPhone XS， XS Max 和 iPhone X 一致，都是 458 ppi，因此還是3倍切圖@3x就好了！ iPhone XR 和 iPhone 6/7/8 一致，都是 326ppi，因此采用2倍切圖@2x 。

 

切圖方面沒有什么麻煩，現在看下新尺寸對設計布局的影響。

 

 

首先我們看下新機型的邏輯像素（pt）尺寸（即密度無關像素尺寸）

 

iPhone XS：分辨率/3，即 375 x 812pt，因此跟iPhone X 的布局完全一致；

 

iPhone XS Max： 分辨率/3， 即 414 x 896pt；

 

iPhone XR：分辨率/2，即 414 x  896pt。

 

也就是說，相當于只增加了一個尺寸 414 x 896pt，而且 XS Max 和 XR 都是全面屏需要留出安全區域。

 

 

因此如果你是以 iPhone 8 （375x667pt） 為基準做 XS Max 和 XR 的設計稿，那么就是拉寬拉高尺寸到 414 x 896， 然后狀態欄由20pt變為44pt，添加底部主頁指示器34pt。

 

      
 

 

 

 

如果你是以 iPhone X (375x812) 為基準做 XS Max 和 XR 的設計稿，只需要拉寬拉高尺寸到 414 x 896，狀態欄和底部主頁指示器均不用更改。

      
 

 

 

而后續的圖片等元素的適配，就需要從視覺角度靈活調整了。

 

不過，對于尺寸計算和安全區域，現在完全不需要你手動操作，墨刀已經率先火速為大家新出了 XS/ XS Max 和 XR的適配，一鍵創建 XS/ MAX/ XR項目就可以！狀態欄和底部主頁指示器已經默默地躺在那里給你們用了！

 

      創建項目時，直接選擇“iPhone XS Max 和 XR”的尺寸

 

 

不管是從Sketch導入基準設計稿稍作調整，還是在墨刀完成新設計，

 

點擊”預覽“，便能 show 出 XS/ XS Max 和 XR 的展示效果了！ 

 

 墨刀的一個iPhone XS Max 原型范例