移動(dòng)端如何快速適配 iPhone X?作者總結(jié)了以下幾個(gè)要點(diǎn)，希望對(duì)你有所幫助。

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

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

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

　　1、比例和像素變化

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

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

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

　　2、全面屏設(shè)計(jì)

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

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

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

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

　　3、Facel ID

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

　　4、home指示條

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

　　在設(shè)計(jì)自定義鍵盤時(shí), 不需要在鍵盤上添加表情或聽寫按鈕。因?yàn)樗鼤?huì)自動(dòng)添加到鍵盤下方的 Home鍵區(qū)域。

　　5、安全區(qū)布局

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

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

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

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

　　確保重要內(nèi)容在安全區(qū)并使用對(duì)稱插入, 這樣不會(huì)被劉海或圓角所截?cái)唷Ｈ绻闶怯米詣?dòng)布局，你的內(nèi)容將自動(dòng)適配到安全區(qū)域，所以你的設(shè)計(jì)不會(huì)被遮擋在劉海或者Home鍵之后。