文章整理了一些關于iPhone X 適配法則，希望對你有所幫助

　　iPhone X 11月才發貨，但現在也許你就已經接到適配任務了。

　　官方已經出了「Designing for iPhone X」視頻，結合官方文檔「人機交互指南」，你需要的適配指南墨墨姐為你整理出來啦!

　　文章較長，建議先馬后看。

　　注：文中圖片大部分來自官方視頻截圖和文檔配圖，請放心食用。

　　好了，我們開始梳理重點吧!

　　更高更清晰的屏幕

　　1、比例變化

　　iPhone X 的顯示寬度與 4.7 寸的 iPhone 6、7、8 相一致。不過 iPhone X 的顯示屏比 4.7 寸顯示屏高 145pt，為內容增加了大約 20% 的垂直顯示空間。

　　對于更加狹長的屏幕，按鈕和內容是否需要重新排布都需要再做考量。

　　另外，在我們做全屏圖的時候，需要注意長寬比的差異，尤其需要注意屏幕比例變化造成的切割位置的變化。

　　看了看切割示意，感覺還是老老實實做單獨適配 iPhone X 的圖片比較穩妥……

　　2、Super Retina

　　iPhone X 達到了 2436 x 1125 像素分辨率，458 ppi，官方稱之為 Super Retina 屏。

　　更高屏幕畫質意味著位圖素材的尺寸也要相應變大。

　　對于 Super Retina 屏，官方建議盡可能多使用 PDF 矢量圖形，這將會獲得更好的展示，同時還可以減小 App 所占容量。

　　全面屏的妥協產物：「留?！古c安全區

　　讓強迫癥為止顫抖的「留?！箍梢哉f是蘋果為了全面屏的一個妥協。同時，為了讓屏幕能盡可能大，屏幕四個角全變成了圓角。

　　異形屏幕無疑讓產品設計師感到抓狂，官方對此提出的解決方案是：「安全區布局」(Safe Area Layout Guide)。

　　1、安全區布局

　　「安全區」顧名思義，就是一塊你可以把重要元素放在里面，而不用擔心由于屏幕異形導致交互問題的區域。

　　對于 iPhone 8 和以往的 iPhone，由于屏幕規規整整的矩形，安全區就是整塊屏幕。但對于 iPhone X，圓角、留海、Home 指示條都讓屏幕交互非常棘手。

　　這里可以參考國外網友對「留?！菇换サ膼焊悖?/p>

　　為了不出現這樣反人類的交互，我們需要在異形屏基礎上劃分出矩形安全區來放置重要內容。

　　2、安全區數值

　　手機縱向時，安全區上沿是從屏幕最頂端往下 44 pt，所以，安全區并不是和「齊劉?！雇耆R平，而是要再往下一點點。

　　「下巴」位置上，為了給 Home 指示條足夠的空間，從下往上推 34 pt 開始才被視為安全區。

　　把屏幕橫過來的時候，「安全區」又產生了變化：Home 指示條挪到了屏幕下方，而「留海」和「下巴」的安全范圍保持不變。也就是說，橫向的安全區被“壓縮”得更狹長了。

　　對于指示條位移但縱向安全區不變，官方給出的解釋是：

　　用戶在使用手機時非常依賴肌肉記憶(比如你可以不看鍵盤打字)，不對稱的設計盡管可以更有效地利用屏幕，但卻與用戶肌肉記憶相悖，容易引起誤操作。水平布局時，交互元素兩側距離相等，左側右側旋轉時位置固定，可以方便用戶記憶。

　　能想到那么細節的問題，還是要給蘋果點個贊。

　　綠色區域是安全區域，藍色是 margin

　　3、例外情況

　　不過也有個例外，如果是滾動的長列表，為了達到全屏展示效果，文案和按鈕是可以超出安全區的。

　　安全區看起來很煩，但是，如果你想把安全區外涂黑，把留海藏起來，是不可以滴。因為這樣會讓你的 App 看起來比別的 App 小，并且和 iOS 系統沒有統一的整體感。

　　Home Indicator

　　為了達成全面屏，蘋果移除了實體 Home 鍵，取而代之的是一條 134 x 5 pt 的虛擬 Home 指示條。參照 Macbook Pro 的 Touch Bar，感覺庫克對可以滑動的 Bar 真是有迷之熱愛。

　　總之，原先需要 Home 鍵達成的操作，都將由這個 Home Indicator 承擔。為了和 Home Indicator 兼容，你需要做到：

　　1、避免交互干擾

　　「底端上劃」成為了全局性的系統操作，用以返回桌面、切換程序。所以在你的 App 中就需要避免出現這個操作，以免和指示條的交互打架。

　　不過，在以往的 iPhone 中，「底端上劃」也是用來調用控制中心的手勢，所以對廣大產品設計師來說，應該也不會在 App 里進行這樣的交互。

　　另外值得注意的是，不建議在屏幕底部放置太多交互式控件。Home Indicator 周圍的間距純粹是為手勢觸碰創建的，將按鈕放在指示條附近，用戶很可能意外的觸碰到指示條，或是在使用指示條時誤觸 App 按鈕，造成操作干擾。

　　2、融為一體

　　Home Indicator 將根據背景的顏色變化改變成白/黑兩種顏色，從而與背景區分。不要在指示條上做特殊強調，這將被視官方為異類，小心審核不給你通過哦!

　　Face ID

　　正如 Home 鍵的按鍵功能被 Home Indicator 取代，Home 鍵的 Touch ID 被 Face ID 取代。所以使用 Touch ID 的應用，一定要記得將 Touch ID 改為 Face ID。

　　說了那么多，感覺頭都大了。最頭大的是，真機都沒拿到就要做適配。