從上周五，我的 iPhone X 總算到了，迫不及待的開(kāi)機(jī)點(diǎn)亮，哇～ 還真是很驚艷。異形全面屏無(wú)疑是它的最大亮點(diǎn)，這樣做的好處就是可以讓別人一眼就能認(rèn)出來(lái)這是 iPhone X，哦不是，可以使用 Face ID，滿足你的裝 X 夢(mèng)。

代價(jià)嘛，就是要專門(mén)為 iPhone  X 做適配，而且 iOS 11 的人機(jī)交互指南單獨(dú)為它新增了一節(jié)。當(dāng)中的坑還真不少，下面就跟大家詳細(xì)說(shuō)說(shuō)。

一、尺寸

iPhone  X 是真 3 倍圖，屏幕分辨率是 1125×2436 px，對(duì)應(yīng)的設(shè)計(jì)稿尺寸是 375×812 pt?？吹?375 就有種看到親人的感覺(jué)，這也就意味著寬度上幾乎不用做修改。

與 iPhone 6、7、8 (375×667pt) 相比，Status Bar 高度由 20pt 變?yōu)?44pt。

底部必須給主頁(yè)指示器（Home Indicator）預(yù)留 34pt，加上 Tab Bar 高度由 49pt 變成 83pt。

所以實(shí)際多出來(lái)的高度是 145-24-34 = 87pt。

另外，鍵盤(pán)高度由 216pt 變?yōu)?291pt，多出了 75pt，文字輸入?yún)^(qū)一定要注意。

適配方法

頂部將 375×667pt 的設(shè)計(jì)稿的 Status Bar 換成 iPhone X 的 Status Bar。Navigation Bar 如果是按 44pt 做的不用修改，如果是 64pt 在 Symbols 里把高度向上延伸 24pt  并填充原有顏色。

底部預(yù)留 34pt 用與放置主頁(yè)指示器（Home Indicator），有 Tab Bar、Toolbar 的頁(yè)面如果是用  Symbols 做的將他們下延 34pt 并填充原有顏色。沒(méi)有 Bar 的頁(yè)面底部不用再填充顏色，只需蓋上主頁(yè)指示器即可。

二、布局

為了不讓邊角圓角和留海影響使用，蘋(píng)果為此不惜引入兩個(gè)新的概念：安全區(qū)域（Safe Area）與 布局邊距（ Layout Margins）。安全區(qū)域用于承載內(nèi)容， 布局邊距限制內(nèi)容邊界。

適配方法

豎屏模式：安全區(qū)域延伸至屏幕左右兩側(cè)，上方留 44pt 給 Status Bar，下方留 34pt 給 主頁(yè)指示器，布局邊距數(shù)值根據(jù)產(chǎn)品自定義。

橫屏模式：安全區(qū)域被四面圍城，左右各留 44pt，上方留32pt，下方留21pt，布局邊距數(shù)值根據(jù)產(chǎn)品自定義。

三、Don’ts and Do’s

3.1 不隱藏 iPhone X 特點(diǎn)，也不要強(qiáng)調(diào)它

3.2 確保控件在安全區(qū)域內(nèi)，特別要注意與主頁(yè)指示器保持距離

3.3 橫屏模式保持控件位置對(duì)稱，幫助用戶建立肌肉記憶

3.4 原來(lái)靠邊的控件需修改樣式

為了幫助大家完成這個(gè)過(guò)渡，蘋(píng)果官方出了一個(gè)設(shè)計(jì)指南視頻，強(qiáng)烈推薦大家觀看

是不是覺(jué)的缺了點(diǎn)什么，沒(méi)錯(cuò)，你還缺少一套 iPhone X 的 UIkit 和 最新的 SF Pro 字體。需要的朋友不用客氣啦

鏈接: https://pan.baidu.com/s/1slNXmAp 密碼: i2w8