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

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

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

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

1、比例和像素變化

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

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

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

2、全面屏設(shè)計

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

但是畢竟?fàn)顟B(tài)欄在非安全區(qū)域，除非可以通過隱藏狀態(tài)欄給用戶帶來額外的價值，否則最好把狀態(tài)欄還給用戶。

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

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

3、Facel ID

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

4、home指示條

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

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

5、安全區(qū)布局

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

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

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

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

確保重要內(nèi)容在安全區(qū)并使用對稱插入, 這樣不會被劉海或圓角所截斷。如果你是用自動布局，你的內(nèi)容將自動適配到安全區(qū)域，所以你的設(shè)計不會被遮擋在劉海或者Home鍵之后。

作者：產(chǎn)品汪，微信公眾號：PM6YAYA

本文由 @產(chǎn)品汪 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議