編者按：基于很多文章都只是翻譯了官方的原文，并沒有加入自己的想法和見解，所以我決定自己試著適配 iPhone X，如果出現了失誤或者問題，請多指教。畢竟寫文章的初衷是為了跟大家一起進步和探討呢~

熟悉 iPhone X

這里用 iPhone 6 舉例子是因為大部分設計師都用 iPhone 6 來做設計稿，方便大家理解，其實 iPhone 8也是這個分辨率。

iPhone 6 ：750×1334px（375×667px @2x）

iPhone X ：1125×2436px (375×812px @3x)

在邏輯像素上 iPhone X 的寬度和 iPhone 6 保持一致，只是高度高了145px（812-667），如果是用@1x做設計稿，那么在適配 iPhone X 的時候會方便很多，因為只需要增加高度就能得到 iPhone X 的大小，所有的 Symbol 基本不變，只是復制幾個蘋果爸爸的Symbol 到你的Symbol 里面，用來做 iPhone X 的設計稿。但是如果用@2x 來做設計稿會稍微麻煩些，畢竟Sketch UI Kit 都是基于@1x 來做設計稿的，所以只能把 symbol 重新解散，然后做成@2x大小的尺寸。

雖然它們的邏輯像素寬度一致，但是他們的像素分辨率是不一樣的，iPhone 6 采用@2x切圖，iPhone X 采用@3x 切圖。有人會用@2x 做設計稿，那怎么適配 iPhone X 設計稿，難道要縮放？ iPhone 6 （750×1334px）尺寸到 iPhone X（1125×2436px），雖然兩者的寬度關系是1.5倍，但是通過縮放做 iPhone X 也是相當麻煩，因為你的 Sketch 設計稿里面可能存在 Symbol，所以這樣的做法是行不通的。但如果你的團隊都是用@2x 來做設計稿的話，也沒什么問題，接下來就提供一個更簡單的方法解決 iPhone X 的適配問題。

iPhone X 適配

我列出了 iPhone X 的三種分辨率的尺寸：375×812px（@1x），750×1624px（@2x），1125×2436px（@3x）

如果你的團隊使用的是750×1334px（@2x）的設計稿，你在適配 iPhone X 的時候可以采用 iPhone X @2x的圖來適配，這樣就省去了縮放這一步驟，而且開發使用的是邏輯像素即375pt×812px來做 iPhone X 的設計還原的，所以這樣設計 iPhone X 是不會影響開發的，因為750×1624px（@2x）還原到@1x 還是375×812px，相信你已經明白了。

1.iPhone X安全區域問題

如果你用@1x 來做設計稿：iPhone X 安全區域是375×734px。

如果你用@2x 來做設計稿：iPhone X 安全區域是750×1468px。

2.如何計算 iPhone X 安全區域

@1x 的 iPhone X 安全區域：

安全區域=812px—Status Bar (44px) +Home Indicator（34px）

@2x 的 iPhone X 安全區域：

安全區域=1624px—Status Bar (88px) +Home Indicator（68px）

iPhone X 實際案例適配

在開始之前，我們先看一下其他App怎么適配之前的 iOS 設備的，我們可以知道頭部區域采用了等比例的方法來適配，因為只有這樣才能保證640×1136px上面能夠放得下相應的內容。其他的只需要放置相應的切圖即可。

一開始以為頭部適配很簡單，我們也采用了等比例適配，后來發現沒有必要，因為 640×1136px基本可以顯示完全。然后我們就開始適配 iPhone X 了，后來開發通過 Xcode 模擬出 iPhone X 的適配結果，我發現問題出現了。和我們的用藥助手 iOS 開發討論了以后，發現原來導航欄的高度不是簡單的200px 解決的，這里我們采用的是固定高度的做法而不是采用等比例的做法。一般這塊區域可以有2種做法：等比例和固定高度，觀察你的頁面構成，如果頁面內容較少可以采用固定高度的做法。不然的話可能在小屏幕手機有些內容放不下。

在沒有 iPhone X 之前，固定高度做法：整體藍色區域高度給200px 解決問題，不用考慮導航欄問題。

但是 iPhone X 出來了，這樣的做法就會行不通，因為 iPhone X 的導航欄高度是44px+44px=88px，比 iPhone 6的導航欄（64px）高了24px，所以正確適配 iPhone X 的做法應該是導航欄區域高度（88px）+（200px-64px）=224px，其實就是 Status Bar 高度多了24px，所以224px 比200px 大了24px。

最后總結

• 這里只是講解了iPhone X 一小部分和 iOS 適配問題，還有其他適配的經驗希望大家在工作中去積累總結，我這里就不一一講解了。
• 由于 iPhone X的屏幕比例發生變化，對于長期靠「等比縮放」完成適配的H5活動頁而言也有不小的影響，需要對頁面結構進行適當微調。（注意縮放的時候不要把主體裁切了，注意頁面的布局在 iPhone X 上面的變化）
• 如果你的App有全屏尺寸的活動圖，沒有導航欄，這個時候應該給開發 @2x（750×1334px） 和 @3x(1125×2001) 圖，然后 iPhone X 上的圖會使用@3x的圖按照高度鋪滿，然后裁切兩邊。（注意兩側被裁切區域不要包含重要內容）

歡迎關注作者的知乎：https://www.zhihu.com/people/olafchou/activities

「干貨十足！最全面的iPhoneX學習資源」

• 《最新版iOS 11設計規范發布了，來下載官方源文件！》
• 《優設首發！iPhone X 官方人機交互指南中文版》
• 《取消了Home鍵的 iPhone X，交互方式都有哪些變化？》
• 《谷歌設計師：如何評價新版 iPhone X 的設計規范？》
• 《優設首發！800M高質量的iPhone X+8展示模板免費打包下載》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com