三分鐘搞清iPhone X 設計尺寸和適配
三分鐘搞清iPhone X 設計尺寸和適配-移動閱讀二維碼

被iPhone X刷了一天屏,到下午實在受不了各種標題寫著“iPhone X 適配、指南、設計稿” 內容卻是發布會回顧和手機介紹的標題黨。索性自己寫一篇只針對iPhone X適配的貼子,與適配無關的內容通通不要。

iphone-x-design-size-and-fit (7)

iphone-x-design-size-and-fit

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

iphone-x-design-size-and-fit (5)

然而,事情并不是設計圖加長這么簡單。

iphone-x-design-size-and-fit (9)

過去,我們拿到的手機是方方正正的矩形,所以整個屏幕都可以看做是安全區域Safe Area,而如今由于iPhone X屏幕上的“劉?!币约捌聊凰闹懿捎脠A角的設計,需要設計師對繪圖區域做出調整。蘋果給出的安全區域如下:

iphone-x-design-size-and-fit (8)

頁面內容不能超出安全區域(Safe Area)

iphone-x-design-size-and-fit (10)

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

 

頁面頂部和底部變化如下:

iphone-x-design-size-and-fit (13)

iphone-x-design-size-and-fit (14)

右上圖可以看到為了回避“劉?!焙蛨A角,iPhone X的頂部狀態欄和底部菜單欄都進行了增高。

iphone-x-design-size-and-fit (12)

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

 

講完豎屏,再說橫屏。

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

iphone-x-design-size-and-fit (3)

避免將觸發交互行為的按鈕放在屏幕的角落中。人們會在屏幕底端使用手勢進入主屏或切換應用。這些系統的全局操作優先于App的操作。如果把功能放在角落里,用戶操作起來也很費勁,盡量在用戶手指可及區域內設計功能。

iphone-x-design-size-and-fit (16)

最后說下最核心的問題,Safe Area 范圍有多大? 下午我比對了官網上所有與iPhone X相關的界面,可以確定,Safe Area區間如下:

s1

s2?s3

于習慣用750×1334作圖的設計師而言,iPhone X的到來并不會帶來太大影響,iPhone X與iPhone 4.7’’之間的差異甚至不及當年iPhone 4和iPhone 5之間的差異

iphone-x-design-size-and-fit (6)

iphone-x-design-size-and-fit (11)

iPhone 4.7 與iPhone X 的Safe Area高度僅相差71 Point(142 px,@2x)

對于大多數采用瀑布流的頁面來說,僅僅是屏幕高度上的變化,可以無視。但對于如:新手引導頁、音樂播放器等需要單屏顯示的界面就需要重新布局。

iphone-x-design-size-and-fit (1)

由于 iPhone X的屏幕比例發生變化,對于長期靠“等比縮放”完成適配的H5活動頁而言也有不小的影響,需要對頁面結構進行適當微調。

iphone-x-design-size-and-fit (15)

最后,如果應用程序需要隱藏狀態欄,請重新考慮iPhone X上的布局。iPhone X的顯示高度相對于iPhone 4.7’’提供了更多的內容高度,狀態欄和底部可以帶來更多的空間。但需要就屏幕內容進行適當的調整。

iphone-x-design-size-and-fit (2)

如果不是特別需要沉浸式體驗的界面,如視頻、看圖片,建議不要隱藏狀態欄。

官方視頻

 

原文地址:顏偉CSD(公眾號)
作者:海邊來的設計師

本文鏈接:http://www.casaleticia.com/iphone-x-design-size-and-fit.html
本文標簽: , , , , ,