您當前位置:圖趣網(Tuquu) >> 網頁設計教程 >> 設計理論 >> 瀏覽設計教程

脫手試試!手把手教你如何適配 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的圖按照高度鋪滿,然后裁切兩邊。(細致兩側被裁切區域不要包含緊張內容)

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

[教程作者:互聯網]
免責聲明:本站文章系圖趣網整理發布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業用途!
本文地址:http://www.77356051.com/Tutorial/di3936.html
如何畫好斷線圖標?我總結了這4個規律
復盤實戰案例指導用戶開通唯品金融五部曲
圖趣網微信
建議反饋
内蒙古时时彩走势图