超全面！UI設計師如何適配2018新款iPhone

北京時間9月13日凌晨1點，蘋果在美國加利福尼亞州的Apple Park園區召開了2018年蘋果秋季新品發佈會。

不少人對此次科技界的春晚充滿了期待，除了那些讓人「剁手」的新品，設計師關注的還有新手機發布後的設計適配工做。本文UI中國會員-新像素將給你們全面梳理一下今天凌晨發佈會的主要內容，向你們娓娓道來。 

 

新手機iPhoneXS、XS Max與iPhoneXR

發佈的三款新iPhone包括兩款OLED屏幕的iPhone XS和iPhone XS Max，屏幕尺寸分別爲5.8英寸（分辨率爲1125*2436）和6.5英寸（分辨率爲1242*2688），第三款設備是iPhone XR，配備6.1英寸LCD液晶屏（分辨率爲828*1792）。三款新iPhone均採用「劉海屏」+Face ID設計，搭載了蘋果A12處理器，預售價分別爲999美圓、1099美圓和749美圓。

 

蘋果針對中國市場推出了支持雙卡的新iPhone，包括新款iPhoneXS Max和iPhoneXR。看來蘋果仍是很看重中國市場的，以前就已經翹首以待的小夥伴能夠去入手了～

 

更大屏幕的Apple Watch 4

Apple Watch 4屏幕全面升級，含全新的UI設計和錶盤，屏幕顯示面積佔比相較於舊款將增長30%，搭載了64位雙核S4處理器。新款的Apple Watch 4對健康功能進行了加強，最主要提升心率檢測能力，同時可以保證最長18小時的續航。

 

iOS 12正式版即將發佈

在經歷了不少個Beta版後，iOS 12正式版也將會在此次發佈會後亮相。相信通過精心設計的iOS 12會給用戶帶來更快速、更靈敏、更驚喜的體驗。 

 

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

 

1、設計如何進行適配？該使用幾倍圖？

你們最關心的應該就是如何進行新機型的適配了，目前在咱們設計界面時，最主流的方式是基於iPhone8（分辨率750*1334）來進行設計，以@2x爲基準作設計稿，而後提供@2x、@3x的切圖給到開發人員。手機適配採用幾倍圖與PPI有關係，也就是像素密度，因此咱們能夠理解爲何iPhone四、五、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適配所用到的切圖及對應機型，便於你們記憶，是否是很貼心呢？（乖巧臉） 

 

2、新尺寸對設計佈局的影響

新發布的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全家桶～

 

以上就是給你們整理出來的關於今天凌晨蘋果發佈會的內容和新iPhone適配指南，仍是熱騰騰的呢！裹上雞蛋液，沾上面包糠，各位小夥伴們及時享用哦～

 

編輯：千鋒UI設計

做者：新像素

UI中國主頁：http://i.ui.cn/ucenter/80593.html