移動端如何快速適配 iPhone X？作者總結了以下幾個要點，希望對你有所幫助。

iPhone X上市一周時間，蘋果App Store終于出新版本，更新日志顯示：全面優化并適配iPhone X，大部分的APP已經適配了iPhone X，但是畢竟是臨時工版，后續如何深度適配iPhone X？歡迎大家一起來探討~

先拿王者農藥舉例，11月8日不停服更新，雖然沒有了大黑邊，用黑色漸變色沖淡“劉?！钡耐回８?，還加入了iPhone X高幀率模式，但是上一個版本home條的退出邏輯需要滑動兩次確認操作，現在變成了現在滑動就立刻退出，這交互設計不知道坑了多少玩家啊，而且一部分顯示內容還是被“劉?！睋踝×藒

吐槽完畢開始進入正式話題，移動端如何快速適配 iPhone X？個人總結可以從以下幾點快速入手，減少招黑指數。

1、比例和像素變化

iPhone X 的顯示寬度 4.7 寸，與 iPhone相一致，不過 iPhone X 高度比iPhone7多出145pt，內容增加了大約 20% 的垂直顯示空間，iPhone X 內容體驗更加狹長了，所以內容和按鈕要根據iPhone X 的 比例重新優化嘍。

iPhone X像素分辨率達到了1125? x?2436px ，458 ppi，官方稱之為 Super Retina 屏。要使用三倍圖是重點，官方建議盡可能多使用 PDF 矢量圖形，這將會獲得更好的展示，同時還可以減小 App 所占容量。

這張配置對比圖大家就可以直觀了解X的變化了

2、全面屏設計

iPhone X 狀態欄由以前的20pt變成了44pt，為了安置前置鏡頭以及紅外等更多的傳感器，所以出現了招黑的劉海，如果項目里隱藏了導航欄加了自定義按鈕之類，這里需要注意適配一下，最重要的是, ?如果用戶撥打電話或使用導航時，這個高度不會改變, 這一點在其他的 iPhone上也是一樣。

但是畢竟狀態欄在非安全區域，除非可以通過隱藏狀態欄給用戶帶來額外的價值，否則最好把狀態欄還給用戶。

為了讓屏幕能盡可能大，屏幕四個角全變成了圓角，展示出來的設計布局要求填滿整個屏幕，填滿的同時要注意控件不要被大圓角和劉海部分所遮擋，也不要放置黑色的狀態欄。

對于一些老項目，? APP在iPhone X上運行發現沒有充滿屏幕，上下有黑色區域，可能沒有采用xib或者SB進行適配的，這樣導致整個項目運行就會不能完全貼合，解決辦法啟動圖的尺寸為1125×2436，在項目設置里面直接用LaunchScreen.xib或者LaunchScreen.storyboard進行配置啟動圖，這樣項目就會完整顯示了。

3、Facel ID

iPhone以前采用Touch ID來解鎖設備或執行密碼鎖定的操作，iPhone X通過頂部傳感器實現Facel ID，應用中會有一些新的用戶界面，確保用戶激活時不在引用Touch ID，要將其替換為Facel ID。

4、home指示條

iPhone X為了達到全面屏效果，移除了實體 Home 鍵，取而代之的是一條 134 x 5 pt 的虛擬 Home 指示條。底端上劃成為了全局性的系統操作，用以返回桌面、切換程序，考慮到手勢沖突，這部分也要避免可交互的控件，以免造成王者農藥的尷尬。

在設計自定義鍵盤時, 不需要在鍵盤上添加表情或聽寫按鈕。因為它會自動添加到鍵盤下方的 Home鍵區域。

5、安全區布局

對于 iPhone 8 和以往的 iPhone，由于屏幕規規整整的矩形，安全區就是整塊屏幕。但 iPhone X全面屏留海、圓角、Home 指示條都讓屏幕交互非常棘手，所以要將屏幕矩形劃分，把重要內容放置在屏幕安全區, 以確保內容始終不被遮擋。

劃分安全區：手機縱向時，安全區上沿是從屏幕最頂端往下 44 pt，所以安全區并不是和劉海完全齊平，而是要再往下一點點。

iPhoneX由于底部安全區的原因UITabBar高度由49pt變成了83pt，為了給 Home 指示條足夠的空間，從下往上推 34 pt 開始才被視為安全區。

把屏幕橫向時，安全區又產生了變化，Home 指示條挪到了屏幕下方，而劉海和Home 指示條的安全范圍保持不變，但是橫向的安全區被“壓縮”得更狹長了。

確保重要內容在安全區并使用對稱插入, 這樣不會被劉?；驁A角所截斷。如果你是用自動布局，你的內容將自動適配到安全區域，所以你的設計不會被遮擋在劉?；蛘逪ome鍵之后。

作者：產品汪，微信公眾號：PM6YAYA

本文由 @產品汪 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基于CC0協議