iPhoneX設計尺寸和適配

 

被iPhone X刷了一天屏，到下午實在受不了各類假帖。標題寫着「iPhone X 適配、指南、設計稿」 內容倒是發佈會回顧和手機介紹。索性本身去官網找素材寫一篇只針對iPhone X適配的貼子，與設計圖無關的內容統統不提

昨夜發佈的iPhone 8屬於常規升級，屏幕與以往的iPhone六、6S、7系列相同。在昨天發佈的新機中，只有iPhone X的分辨率發生了變化，但變化僅限於物理像素層面。在真正決定屏幕內容的邏輯像素層面，新版的iPhone X與過去咱們熟知的iPhone 4.7''、iPhone 5.5'' 放大模式寬度相同。通俗的說，iPhone X可看作是iPhone 4.7'' 的加長版

然而，事情並非設計圖加長這麼簡單。

過去，咱們拿到的手機是方方正正的矩形，因此整個屏幕均可以看作是安全區域Safe Area，而現在因爲iPhone X屏幕上的「劉海」以及屏幕四周採用圓角的設計，須要設計師對繪圖區域作出調整。蘋果給出的安全區域以下

頁面內容不能超出安全區域（Safe Area）

避免將觸發交互行爲的按鈕放在屏幕的底部，人們會在屏幕底端使用手勢進入主屏或切換應用。（底部橫條是Home鍵）

 

值得注意的是，iPhone X 底部操做欄目進行了細微的放大。除了常見的底部導航欄外，Safari底部操做欄也有放大

講完豎屏，再說橫屏。

和豎屏同樣，橫屏的內容也要放置在Safe Area中

避免將觸發交互行爲的按鈕放在屏幕的角落中。人們會在屏幕底端使用手勢進入主屏或切換應用。這些系統的全局操做優先於App的操做。若是把功能放在角落裏，用戶操做起來也很費勁，儘可能在用戶手指可及區域內設計功能

 

最後說下最核心的問題，Safe Area 範圍有多大？

下午我比對了官網上全部與iPhone X相關的界面，能夠肯定，Safe Area區間以下：

對於習慣用750x1334做圖的設計師而言，iPhone X的到來並不會帶來太大影響，iPhone X與iPhone 4.7’’之間的差別甚至不及當年iPhone 4和iPhone 5之間的差別

 

iPhone 4.7 與iPhone X 的Safe Area高度僅相差67 Point（134 px，@2x）

對於大多數採用瀑布流的頁面來講，僅僅是屏幕高度上的變化，能夠無視。但對於如：新手引導頁、音樂播放器等須要單屏顯示的界面就須要從新佈局。

因爲 iPhone X的屏幕比例發生變化，對於長期靠「等比縮放」完成適配的H5活動頁而言也有不小的影響，須要對頁面結構進行適當微調。

最後，若是應用程序須要隱藏狀態欄，請從新考慮iPhone X上的佈局。iPhone X的顯示高度相對於iPhone 4.7''提供了更多的內容高度，狀態欄和底部能夠帶來更多的空間。但須要就屏幕內容進行適當的調整。

From： http://bbs.zhulong.com/101010_group_100224/detail31160444