北京時間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設計師有哪些影響
一、設計如何進行適配？該使用幾倍圖？
大家最關心的應該就是如何進行新機型的適配了，目前在我們設計界面時，最主流的方式是基於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適配指南，還是熱騰騰的呢！裹上雞蛋液，沾上面包糠，各位小伙伴們及時享用哦～
編輯：千鋒UI設計
作者：新像素
UI中國主頁：http://i.ui.cn/ucenter/80593.html