For UI 設計師

Apple 官方設計規範標示出,比起 4.7 吋的 iphone,iphone x 高多了 145 pt

Alt text
source: https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

畫面尺寸為 375 x 812
Status Bar 高度由 20pt 增長為 44pt

Alt text
source: https://designcode.io/ios11-iphone-x

扣除掉上方劉海 ( 高 44 pt ),以及下方的 home indicator ( 高 34 pt ),安全區域( Safe Area )就是 375 x 734
包含 Home Indicator,Tab Bar 高度由 49pt 增長為 83pt
鍵盤高度由 216pt 增長為 291pt

Alt text

當橫向擺放時,Home indicator 高會變成 21 pt,左右各有 44 pt 的留白空間,安全空間會變成 724 x 354

Layout Margin

不管是直橫向,除了上面提到安全區域外,通常文字&按鈕等重要元件需要向內縮 15 pt 稱為 Layout Margin。

Alt text

別想改 Home indicator 顏色

Home indicator 會依據周圍背景,決定自身要變黑或白,在撥放影片時,會將自身隱身,在設計時注意不要加進去了。

做UI設計時要避免以下狀況:

  1. 操作不要與安全區交疊
  2. 滿版圖片要拉到位

Alt text

  1. 操作不要與 Home indicator交疊
  2. 底部 tab bars 背景延伸到底

Alt text

For 前端工程師

Viewport-fit=cover

要使用iPhone X的全螢幕顯示網頁內容的話,就將viewport設定為:

1
<meta name="viewport" content="viewport-fit=cover">

Alt text
就會使用到所有螢幕空間

Alt text

source: http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/

但這時,因為這日系劉海( Notch ) 擋住畫面內容,不得不再多加上 safe-area-inset-*

1
2
3
4
constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)

此屬性能夠讓 iphone x 自動判定在直、橫放都可以保留一定的空間。

Alt text

Source: https://medium.com/%40onopko/iphone-x-%E3%81%AE-safari-%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B-web-%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E8%A1%A8%E7%A4%BA-58da5f503d0b