UI設(shè)計如何適配 iPhone X

熟悉 iPhone X

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

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

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

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

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

iPhone X 適配

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

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

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

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

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

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

@1x 的 iPhone X 安全區(qū)域：

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

@2x 的 iPhone X 安全區(qū)域：

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

 

iPhone X 實際案例適配

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

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

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

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

最后總結(jié)

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