UI大牛教你適配iPhoneX

前言

基于很多文章都只是翻譯了官方的原文，并沒有加入自己的想法和見解，這樣的文章看多了也就沒啥意思了，所以我決定自己試著適配 iPhone X，如果出現(xiàn)了失誤或者問題，請嚴(yán)厲的批評我，但是不要謾罵，畢竟寫文章的初衷是為了跟大家一起進(jìn)步和探討呢~

熟悉 iPhone X

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

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

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

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

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

iPhone X 適配

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

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

iPhone X安全區(qū)域問題

• 如果你用@1x 來做設(shè)計稿：iPhone X 安全區(qū)域是375x734pt
• 如果你用@2x 來做設(shè)計稿：iPhone X 安全區(qū)域是750x1468px

如何計算 iPhone X 安全區(qū)域

• @1x 的 iPhone X 安全區(qū)域：其實(shí)安全區(qū)域=812pt—Status Bar (44pt) Home Indicator（34pt）
• @2x 的 iPhone X 安全區(qū)域：其實(shí)安全區(qū)域=1624px—Status Bar (88px) Home Indicator（68px）

iPhone X 實(shí)際案例適配

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

一開始以為頭部適配很簡單就沒有特別在意，我們一開始也采用了等比例適配，后來發(fā)現(xiàn)沒有必要，因為 640×1136 上基本可以顯示完全。然后我們就開始適配 iPhone X 了，后來開發(fā)通過 Xcode 模擬出 iPhone X 的適配結(jié)果，我發(fā)現(xiàn)問題好像出現(xiàn)了，所以我陷入了沉思。是不是我方法不對？后來跟我們的用藥助手 iOS 開發(fā)討論了以后，發(fā)現(xiàn)原來導(dǎo)航欄的高度不是簡單的200pt 解決的，這里我們采用的是固定高度的做法而不是采用等比例的做法，一般這塊區(qū)域可以有2種做法：等比例和固定高度，看你頁面的構(gòu)成，如果頁面內(nèi)容較少可以采用固定高度的做法。不然的話可能在小屏幕手機(jī)有些內(nèi)容放不下。

在沒有 iPhone X 之前，固定高度做法：可以直接整體藍(lán)色區(qū)域高度給200pt 解決問題，不用考慮導(dǎo)航欄問題~

但是 iPhone X 出來了，這樣的做法就會行不通，因為 iPhone X 的導(dǎo)航欄高度是44pt 44pt=88pt，比 iPhone 6的導(dǎo)航欄（64pt）高了24pt，所以正確適配 iPhone X 的做法應(yīng)該是導(dǎo)航欄區(qū)域高度（88pt） （200pt-64pt）=224pt，相信大家也知道了其實(shí)說白了就是 Status Bar 高度多了24pt，所以224pt 比200pt 大了24pt。

最后總結(jié)

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