UI界面設(shè)計(jì)

新款蘋果iPhoneXS、XS Max與iPhoneXR的UI設(shè)計(jì)適配

19304

今天凌晨發(fā)布的三款新iPhone包括兩款OLED屏幕的iPhone XS和iPhone XS Max，屏幕尺寸分別為5.8英寸（分辨率為1125*2436）和6.5英寸（分辨率為1242*2688），第三款設(shè)備是iPhone XR，配備6.1英寸LCD液晶屏（分辨率為828*1792）。三款新iPhone均采用“劉海屏”+Face ID設(shè)計(jì)，搭載了蘋果A12處理器，預(yù)售價(jià)分別為999美元、1099美元和749美元。

設(shè)計(jì)如何進(jìn)行適配？該使用幾倍圖？

大家最關(guān)心的應(yīng)該就是如何進(jìn)行新機(jī)型的適配了，目前在我們?cè)O(shè)計(jì)界面時(shí)，最主流的方式是基于iPhone8（分辨率750*1334）來(lái)進(jìn)行設(shè)計(jì)，以@2x為基準(zhǔn)做設(shè)計(jì)稿，然后提供@2x、@3x的切圖給到開(kāi)發(fā)人員。手機(jī)適配采用幾倍圖與PPI有關(guān)系，也就是像素密度，所以我們可以理解為什么iPhone4、5、6之間分辨率和屏幕尺寸不一樣，但是同樣采用@2x二倍圖的原因，是因?yàn)樗鼈冇型瑯拥腜PI（326ppi）；

新發(fā)布的5.8英寸的iPhoneXS（458ppi），分辨率為1125*2436px，與iPhoneX（三倍圖）的數(shù)據(jù)是一致的，所以我們可以得出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。

從頁(yè)面寬高比例來(lái)看：

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

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

iPhoneXS Max比iPhone8 Plus長(zhǎng)一截，多了160pt。

我們發(fā)現(xiàn)，iPhoneXS Max的適配，有些像去年設(shè)計(jì)師適配iPhoneX的套路（認(rèn)真臉）。

最后我們來(lái)看6.1英寸的iPhoneXR（326ppi），分辨率為828*1792px，可以看到iPhoneXR與蘋果二倍圖的PPI（326ppi）一致，可以推論出iPhoneXR使用的是二倍圖@2x。

從頁(yè)面寬高比例來(lái)看：

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

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

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

我們來(lái)做一個(gè)小結(jié)：

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

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

像素妹給大家整理了當(dāng)前iOS適配所用到的切圖及對(duì)應(yīng)機(jī)型，便于大家記憶，是不是很貼心呢？（乖巧臉）

二、新尺寸對(duì)設(shè)計(jì)布局的影響

新發(fā)布的iPhoneXS、XS Max、XR都采用了全面屏設(shè)計(jì)，因此我們必須保證布局填滿屏幕，并且考慮到交互操作，要留出安全區(qū)域，才不會(huì)被圓角、劉海影響使用，布局的左右邊距可根據(jù)產(chǎn)品自定義，這些點(diǎn)與iPhoneX是相同的。

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

方式有多個(gè)，接下來(lái)主要介紹兩種：

方法一：

如果我們?cè)谠O(shè)計(jì)的時(shí)候以iPhone8（375*667pt）為基準(zhǔn)做設(shè)計(jì)稿，先得到iPhoneXR：由于都是@2x，首先需要將畫板寬度拉寬為414pt，高度拉高為896pt（與我們做iPhone5到iPhone6的寬高變化處理是一樣的道理），狀態(tài)欄由20pt變高為44pt，在底部加上主頁(yè)指示器（Home Indicator）高度為34pt，導(dǎo)航欄以及標(biāo)簽欄高度不變。我們發(fā)現(xiàn)iPhoneXR內(nèi)容呈現(xiàn)的比iPhone8要多一些。

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

方法二：

如果我們?cè)谠O(shè)計(jì)的時(shí)候以iPhoneX（375*812pt）為基準(zhǔn)做設(shè)計(jì)稿，先得到iPhoneXS Max：由于都是@3x，首先需要將畫板寬度拉寬為414pt，高度拉高為896pt（與方法一同理），狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄、主頁(yè)指示器的高度均不用更改。有了iPhoneXS Max后，直接等比例縮小2/3就可以得到iPhoneXR，很簡(jiǎn)單～。