225
搜狐
手把手教你如何適配 iPhone X
編者按：基於很多文章都隻是翻譯了官方的原文，並沒有加入自己的想法和見解，所以我決定自己試著適配 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的圖按照高度鋪滿，然後裁切兩邊。（注意兩側被裁切區域不要包含重要內容）
------
作者的知乎：zhihu.com/people/olafchou/activities
商業轉載請聯係作者獲得授權，非商業轉載請注明出處！
關注優設品牌號微信號：uisdcer & 內容號微信號：youshege；推送領域專業知識掌握優設新品動態和50萬設計師獲取新鮮知識
最後更新：2017-10-09 04:16:35