手把手教你如何適配 iPhone X

前言

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

 

熟悉 iPhone X

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

iPhone 6:750×1334(375x667pt @2x)

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

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

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

 

iPhone X 適配

我列出了 iPhone X 的三種分辨率的尺寸:375x812pt(@1x),750x1624px(@2x),1125×2436(@3x)

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

iPhone X安全區域問題

  • 如果你用@1x 來做設計稿:iPhone X 安全區域是375x734pt

  • 如果你用@2x 來做設計稿:iPhone X 安全區域是750x1468px

 

如何計算 iPhone X 安全區域

  • @1x 的 iPhone X 安全區域:其實安全區域=812pt—Status Bar (44pt) Home Indicator(34pt)

  • @2x 的 iPhone X 安全區域:其實安全區域=1624px—Status Bar (88px) Home Indicator(68px)

 

iPhone X 實際案例適配

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

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

在沒有 iPhone X 之前,固定高度做法:可以直接整體藍色區域高度給200pt 解決問題,不用考慮導航欄問題~

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

 

最后總結

  1. 這里只是講解了iPhone X 一小部分和 iOS 適配問題,還有其他適配的經驗希望大家在工作中去積累總結,我這里就不一一講解了。

  2. 由于 iPhone X的屏幕比例發生變化,對于長期靠“等比縮放”完成適配的H5活動頁而言也有不小的影響,需要對頁面結構進行適當微調(注意縮放的時候不要把主體裁切了,然后注意頁面的布局在 iPhone X 上面的變化)

  3. 如果你的 app 有全屏尺寸的活動圖,沒有導航欄,這個時候應該給開發 @2x(750×1334) 和 @3x(1125×2001) 圖,然后 iPhone X 上的圖會使用@3x的圖按照高度鋪滿然后裁切兩邊(注意兩側被裁切區域不要包含重要內容)

 

作者:

來源:學UI網

 

上一篇: 以登錄賬號密碼不匹配為例,來全面淺析設計背后的邏輯

下一篇: 4個規律快速畫好斷線圖標!

分享到: 更多
pk10如何将100玩到一万 变态斗地主赢钱官网 北京pk10冠军走势图 江西时时骗局 七乐彩走势图表 黑马计划软件官方网 二人雀神麻将番数图解 免费下载欢乐斗地主 时时彩单双计划 pk10赛车冠亚和值公式 11选5计划软件神器 资金盘提现困难 网络mg电子游戏 江苏时时开奖结果 云南时时多人玩吗 pk10刷水方案