2018新款iPhone X系列 UI設計師應該懂的UI設計規範

2018年北京時間9月13日凌晨1點，蘋果的新品發布會如期而至，新一代 iPhone 產品線（iPhone Xs、iPhone Xs Max 和 iPhone XR）正式發布。

先來欣賞幾張新款iPhone的美圖

下面我們就來看下新款的屏幕尺寸以及外觀尺寸重量等規格。

顯示屏：

iPhone Xs：5.8 英寸 (對角線) OLED 全面屏，2436 x 1125 像素解析度，458 ppi。

iPhone XS 顯示屏採用曲線優美的圓角設計，四個圓角位於一個標準矩形內。按照標準矩形測量時，屏幕的對角線長度是 5.85 英寸 (實際可視區域較小)。

iPhone Xs Max：6.5 英寸 (對角線) OLED 全面屏，2688 x 1242 像素解析度，458 ppi。

iPhone XS Max 顯示屏採用曲線優美的圓角設計，四個圓角位於一個標準矩形內。按照標準矩形測量時，屏幕的對角線長度是 6.46 英寸 (實際可視區域較小)。

iPhone XR：6.1 英寸 (對角線) LCD 全面屏多點觸控顯示屏，1792 x 828 像素解析度，326 ppi。

iPhone XR 顯示屏採用曲線優美的圓角設計，四個圓角位於一個標準矩形內。按照標準矩形測量時，屏幕的對角線長度是 6.06 英寸 (實際可視區域較小)。

尺寸與重量

這次發布的iPhone XS Max 配備 iPhone 迄今最大的顯示屏，尺寸達到 6.5 英寸，讓一切更顯開闊。我們來看下iPhone XS Max與iPhone 8Plus的屏幕對比，就知道這個新款的iPhone XS Max 屏幕有多驚艷！

接下來我們重點說一下設計細節，新發布的iPhone對UI設計師有哪些影響？

那麼設計如何進行適配？該使用幾倍圖？

大家最關心的應該就是如何進行新機型的適配了，目前在我們設計界面時，最主流的方式是基於iPhone8（解析度750*1334）來進行設計，以@2x為基準做設計稿，然後提供@2x、@3x的切圖給到開發人員。

手機適配採用幾倍圖與PPI有關係，也就是像素密度，所以我們可以理解為什麼iPhone4、5、6之間解析度和屏幕尺寸不一樣，但是同樣採用@2x二倍圖的原因，是因為它們有同樣的PPI（326ppi）；

新發布的5.8英寸的iPhoneXS（458ppi），解析度為1125*2436px，與iPhoneX（三倍圖）的數據是一致的，所以我們可以得出iPhoneXS也是使用的三倍圖@3x。

6.5英寸的iPhoneXS Max（458ppi），解析度為1242*2688px，而iPhone8 Plus（三倍圖，401ppi），解析度為1242*2208px，iPhoneXS Max比iPhone8 Plus的PPI僅多了50多，跟iPhoneX（三倍圖）的PPI一致，可以推論出iPhoneXs Max使用的同樣是三倍圖@3x。

從頁面寬高比例來看：

iPhoneXS Max寬度1242/3=414pt，iPhone8 Plus寬度1242/3=414pt，兩者的寬度一致（大家看到寬度一致的時候是不是鬆了口氣呢？哈哈）；

iPhoneXS Max高度2688/3=896pt，iPhone8 Plus高度2208/3=736pt；

iPhoneXS Max比iPhone8 Plus長一截，多了160pt。

我們發現，iPhoneXS Max的適配，有些像去年設計師適配iPhoneX的套路（認真臉）。

最後我們來看6.1英寸的iPhoneXR（326ppi），解析度為828*1792px，可以看到iPhoneXR與蘋果二倍圖的PPI（326ppi）一致，可以推論出iPhoneXR使用的是二倍圖@2x。

從頁面寬高比例來看：

iPhoneXR寬度828/2=414pt，iPhoneXS Max寬度1242/3=414pt；

iPhoneXR高度1792/2=896pt，iPhoneXS Max高度2688/3=896pt；

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

我們來做一個小結：

iPhoneXS、iPhoneXS Max使用的是三倍圖@3x；

iPhoneXR使用的是二倍圖@2x。

下面給大家整理了當前iOS適配所用到的切圖及對應機型，便於大家記憶，是不是很貼心呢？

二、新尺寸對設計布局的影響

新發布的iPhoneXS、XS Max、XR都採用了全面屏設計，因此我們必須保證布局填滿屏幕，並且考慮到交互操作，要留出安全區域，才不會被圓角、劉海影響使用，布局的左右邊距可根據產品自定義，這些點與iPhoneX是相同的。

在上面有提到過，iPhoneXS與iPhoneX尺寸大小完全一致，所以頁面布局也是一樣的。我們只需要懂得怎樣適配到iPhoneXS Max以及iPhoneXR的布局就可以了（兩者的的邏輯像素是一致的，均為414*896pt，區別在於一個是@3x，一個是@2x）。

方式有多個，接下來主要介紹兩種：

方法一：

如果我們在設計的時候以iPhone8（375*667pt）為基準做設計稿，先得到iPhoneXR：由於都是@2x，首先需要將畫板寬度拉寬為414pt，高度拉高為896pt（與我們做iPhone5到iPhone6的寬高變化處理是一樣的道理）

狀態欄由20pt變高為44pt，在底部加上主頁指示器（Home Indicator）高度為34pt，導航欄以及標籤欄高度不變。我們發現iPhoneXR內容呈現的比iPhone8要多一些。

有了iPhoneXR後，直接等比例放大1.5倍就可以得到iPhoneXS Max。

方法二：

如果我們在設計的時候以iPhoneX（375*812pt）為基準做設計稿，先得到iPhoneXS Max：由於都是@3x，首先需要將畫板寬度拉寬為414pt，高度拉高為896pt（與方法一同理）

狀態欄、導航欄、標籤欄、主頁指示器的高度均不用更改。有了iPhoneXS Max後，直接等比例縮小2/3就可以得到iPhoneXR，很簡單～。

還有很多適配的方式，在這裡就不一一贅述了。以上就是給大家整理出來的新iPhone適配指南，希望對你設計有幫助！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！