關於 iPhone X 你需要知道的 UI 設計規範 & CSS 屬性
For UI 設計師
Apple 官方設計規範標示出,比起 4.7 吋的 iphone,iphone x 高多了 145 pt
source: https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
畫面尺寸為 375 x 812
Status Bar 高度由 20pt 增長為 44pt
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
當橫向擺放時,Home indicator 高會變成 21 pt,左右各有 44 pt 的留白空間,安全空間會變成 724 x 354
Layout Margin
不管是直橫向,除了上面提到安全區域外,通常文字&按鈕等重要元件需要向內縮 15 pt 稱為 Layout Margin。
別想改 Home indicator 顏色
Home indicator 會依據周圍背景,決定自身要變黑或白,在撥放影片時,會將自身隱身,在設計時注意不要加進去了。
做UI設計時要避免以下狀況:
- 操作不要與安全區交疊
- 滿版圖片要拉到位
- 操作不要與 Home indicator交疊
- 底部 tab bars 背景延伸到底
For 前端工程師
Viewport-fit=cover
要使用iPhone X的全螢幕顯示網頁內容的話,就將viewport設定為:
|
|
就會使用到所有螢幕空間
source: http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/
但這時,因為這日系劉海( Notch ) 擋住畫面內容,不得不再多加上 safe-area-inset-*
此屬性能夠讓 iphone x 自動判定在直、橫放都可以保留一定的空間。