被iPhone X刷了一天屏淘菩，到下午實(shí)在受不了各種假帖褥民。標(biāo)題寫著“iPhone X 適配涤伐、指南、設(shè)計(jì)稿” 內(nèi)容卻是發(fā)布會(huì)回顧和手機(jī)介紹徙菠。索性自己去官網(wǎng)找素材寫一篇只針對(duì)iPhone X適配的貼子讯沈，與設(shè)計(jì)圖無關(guān)的內(nèi)容通通不提
昨夜發(fā)布的iPhone 8屬于常規(guī)升級(jí)，屏幕與以往的iPhone6婿奔、6S缺狠、7系列相同。在昨天發(fā)布的新機(jī)中脸秽，只有iPhone X的分辨率發(fā)生了變化，但變化僅限于物理像素層面蝴乔。在真正決定屏幕內(nèi)容的邏輯像素層面记餐，新版的iPhone X與過去我們熟知的iPhone 4.7''、iPhone 5.5'' 放大模式寬度相同薇正。通俗的說片酝，iPhone X可看做是iPhone 4.7'' 的加長(zhǎng)版
然而囚衔，事情并不是設(shè)計(jì)圖加長(zhǎng)這么簡(jiǎn)單。
過去雕沿，我們拿到的手機(jī)是方方正正的矩形练湿，所以整個(gè)屏幕都可以看做是安全區(qū)域Safe Area，而如今由于iPhone X屏幕上的“劉荷舐郑”以及屏幕四周采用圓角的設(shè)計(jì)肥哎，需要設(shè)計(jì)師對(duì)繪圖區(qū)域做出調(diào)整。蘋果給出的安全區(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ì)微的放大吊圾。除了常見的底部導(dǎo)航欄外达椰，Safari底部操作欄也有放大
講完豎屏，在說橫屏项乒。
和豎屏一樣啰劲，橫屏的內(nèi)容也要放置在Safe Area中
避免將觸發(fā)交互行為的按鈕放在屏幕的角落中。人們會(huì)在屏幕底端使用手勢(shì)進(jìn)入主屏或切換應(yīng)用板丽。這些系統(tǒng)的全局操作優(yōu)先于App的操作呈枉。如果把功能放在角落里，用戶操作起來也很費(fèi)勁埃碱，盡量在用戶手指可及區(qū)域內(nèi)設(shè)計(jì)功能
最后說下最核心的問題猖辫，Safe Area 范圍有多大？
下午我比對(duì)了官網(wǎng)上所有與iPhone X相關(guān)的界面砚殿，可以確定啃憎，Safe Area區(qū)間如下：
對(duì)于習(xí)慣用750x1334作圖的設(shè)計(jì)師而言，iPhone X的到來并不會(huì)帶來太大影響似炎，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è)面來說，僅僅是屏幕高度上的變化羡藐，可以無視贩毕。但對(duì)于如：新手引導(dǎo)頁(yè)、音樂播放器等需要單屏顯示的界面就需要重新布局仆嗦。
由于 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)欄和底部可以帶來更多的空間谆棺。但需要就屏幕內(nèi)容進(jìn)行適當(dāng)?shù)恼{(diào)整。
如果不是特別需要沉浸式體驗(yàn)的界面罕袋，如視頻改淑、看圖片，建議不要隱藏狀態(tài)欄炫贤。
知行辦公溅固，專業(yè)移動(dòng)辦公平臺(tái)https://zx.naton.cn/
原創(chuàng)團(tuán)隊(duì)
【總監(jiān)】十二春秋之，3483099@qq.com兰珍；
【Master】zelo侍郭，616701261@qq.com；【運(yùn)營(yíng)】運(yùn)維艄公掠河，897221533@qq.com亮元；
【產(chǎn)品設(shè)計(jì)】流浪貓，364994559@qq.com唠摹；【體驗(yàn)設(shè)計(jì)】兜兜爆捞，2435632247@qq.com；
【iOS】淘碼小工勾拉，492395860@qq.com煮甥；iMcG33K，imcg33k@gmail.com藕赞；
【Android】人猿居士成肘，1059604515@qq.com；思路的頓悟斧蜕，1217022114@qq.com双霍；
【java】首席工程師MR_W，feixue300@qq.com批销；【測(cè)試】土鏡問道洒闸，847071279@qq.com；
【數(shù)據(jù)】fox009521均芽，42151960@qq.com丘逸；【安全】保密，你懂的掀宋。
