超全面！UI設計師如何適配2018新款iPhone
北京時間9月13日凌晨1點，蘋果在美國加利福尼亞州的Apple Park園區召開了2018年蘋果秋季新品釋出會。
很多人對這次科技界的春晚充滿了期待，除了那些讓人“剁手”的新品，設計師關注的還有新手機發布後的設計適配工作。下面畫素妹給大家全面梳理一下今天凌晨釋出會的主要內容，向大家娓娓道來。
新手機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設計師有哪些影響
一、設計如何進行適配？該使用幾倍圖？
大家最關心的應該就是如何進行新機型的適配了，目前在我們設計介面時，最主流的方式是基於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全家桶～
以上就是給大家整理出來的關於今天凌晨蘋果釋出會的內容和新iPhone適配指南，還是熱騰騰的呢！裹上雞蛋液，沾上面包糠，各位小夥伴們及時享用哦～
畫素妹先去打個盹兒(o-ωｑ)).oO…