被iPhone X刷了一天屏吃度，到下午實(shí)在受不了各種假帖项阴。標(biāo)題寫(xiě)著“iPhone X 適配喊式、指南锌奴、設(shè)計(jì)稿” 內(nèi)容卻是發(fā)布會(huì)回顧和手機(jī)介紹扣讼。索性自己去官網(wǎng)找素材寫(xiě)一篇只針對(duì)iPhone X適配的貼子，與設(shè)計(jì)圖無(wú)關(guān)的內(nèi)容通通不提
昨夜發(fā)布的iPhone 8屬于常規(guī)升級(jí)缨叫，屏幕與以往的iPhone6、6S荔燎、7系列相同耻姥。在昨天發(fā)布的新機(jī)中，只有iPhone X的分辨率發(fā)生了變化有咨，但變化僅限于物理像素層面琐簇。在真正決定屏幕內(nèi)容的邏輯像素層面，新版的iPhone X與過(guò)去我們熟知的iPhone 4.7''座享、iPhone 5.5'' 放大模式寬度相同婉商。通俗的說(shuō)，iPhone X可看做是iPhone 4.7'' 的加長(zhǎng)版
然而渣叛，事情并不是設(shè)計(jì)圖加長(zhǎng)這么簡(jiǎn)單丈秩。
過(guò)去，我們拿到的手機(jī)是方方正正的矩形淳衙，所以整個(gè)屏幕都可以看做是安全區(qū)域Safe Area蘑秽，而如今由于iPhone X屏幕上的“劉航戎”以及屏幕四周采用圓角的設(shè)計(jì)，需要設(shè)計(jì)師對(duì)繪圖區(qū)域做出調(diào)整肠牲。蘋(píng)果給出的安全區(qū)域如下
頁(yè)面內(nèi)容不能超出安全區(qū)域（Safe Area）
避免將觸發(fā)交互行為的按鈕放在屏幕的底部幼衰，人們會(huì)在屏幕底端使用手勢(shì)進(jìn)入主屏或切換應(yīng)用。（底部橫條是Home鍵）
頁(yè)面頂部和底部變化如下
右上圖可以看到為了回避“劉鹤忽ǎ”和圓角渡嚣，iPhone X的頂部狀態(tài)欄和底部菜單欄都進(jìn)行了增高。
值得注意的是肥印，iPhone X 底部操作欄目進(jìn)行了細(xì)微的放大识椰。除了常見(jiàn)的底部導(dǎo)航欄外，Safari底部操作欄也有放大
講完豎屏竖独，再說(shuō)橫屏裤唠。
和豎屏一樣，橫屏的內(nèi)容也要放置在Safe Area中
避免將觸發(fā)交互行為的按鈕放在屏幕的角落中莹痢。人們會(huì)在屏幕底端使用手勢(shì)進(jìn)入主屏或切換應(yīng)用种蘸。這些系統(tǒng)的全局操作優(yōu)先于App的操作绽左。如果把功能放在角落里芭毙，用戶操作起來(lái)也很費(fèi)勁，盡量在用戶手指可及區(qū)域內(nèi)設(shè)計(jì)功能
最后說(shuō)下最核心的問(wèn)題钞钙，Safe Area 范圍有多大坦辟？
下午我比對(duì)了官網(wǎng)上所有與iPhone X相關(guān)的界面刊侯，可以確定，Safe Area區(qū)間如下：
對(duì)于習(xí)慣用750x1334作圖的設(shè)計(jì)師而言锉走，iPhone X的到來(lái)并不會(huì)帶來(lái)太大影響滨彻，iPhone X與iPhone 4.7’’之間的差異甚至不及當(dāng)年iPhone 4和iPhone 5之間的差異
iPhone 4.7 與iPhone X 的Safe Area高度僅相差67 Point（134 px，@2x）
對(duì)于大多數(shù)采用瀑布流的頁(yè)面來(lái)說(shuō)挪蹭，僅僅是屏幕高度上的變化亭饵，可以無(wú)視。但對(duì)于如：新手引導(dǎo)頁(yè)梁厉、音樂(lè)播放器等需要單屏顯示的界面就需要重新布局辜羊。
由于 iPhone X的屏幕比例發(fā)生變化，對(duì)于長(zhǎng)期靠“等比縮放”完成適配的H5活動(dòng)頁(yè)而言也有不小的影響词顾，需要對(duì)頁(yè)面結(jié)構(gòu)進(jìn)行適當(dāng)微調(diào)八秃。
最后，如果應(yīng)用程序需要隱藏狀態(tài)欄肉盹，請(qǐng)重新考慮iPhone X上的布局昔驱。iPhone X的顯示高度相對(duì)于iPhone 4.7''提供了更多的內(nèi)容高度，狀態(tài)欄和底部可以帶來(lái)更多的空間垮媒。但需要就屏幕內(nèi)容進(jìn)行適當(dāng)?shù)恼{(diào)整舍悯。
如果不是特別需要沉浸式體驗(yàn)的界面航棱，如視頻、看圖片萌衬，建議不要隱藏狀態(tài)欄饮醇。
