起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識移動端適配iPhone X 全面屏指南
移動端如何快速適配 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協議
- 目前還沒評論，等你發揮！
