起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識iPhone X適配沒那么復雜，但也不是看上去這么簡單
關于iPhone X適配作者分享了自己的一些心得體會，希望能夠給你帶來幫助。
全世界都在轉發iPhone X的測評報告和HIG，我可能沒有真的看懂…
iPhone X 搭載了超大，高清晰度，大圓角，無邊框的顯示屏，又一次刷新了我們對內容優先的沉浸式體驗的認識?！涡缘胤g自《Human Interface Guiidelines》
屏幕尺寸
我們熟知的iphone 系列開發尺寸概要如下：
圖1-1：iPhone各機型的開發尺寸
轉化成我們熟知的像素尺寸：
圖1-2：每個機型的多維度尺寸
倍圖其實就是像素尺寸和開發尺寸的倍率關系，但這只是外在的表現；
倍圖核心的影響因素在于PPI（DPI），了解屏幕密度與各尺寸的關系有助于我們深度理解倍率的概念。
8在本次升級中，屏幕尺寸和分辨率都遺傳了iPhone6以后的優良傳統；然而iPhone X 無論是在屏幕尺寸、分辨率、甚至是形狀上都發生了較大的改變，下面以iPhone 8作為參照物，看看到底iPhone X的適配 我們要怎么考慮。
我們看看iPhone X尺寸上的變化：
圖1-3：iPhone 8與X 開發尺寸比對
開發尺寸上可以發現X和8的寬度一致，然而在垂直方向上多了145 pt，這就意味著首屏可以展示更多的內容，多出20%的垂直空間。對于京東淘寶而言這應該就意味著更高的商品曝光率或者是更高的運營位價值。
從整體設計尺寸看：iPhone 8的像素尺寸是750*1334 px(@2X)，而iPhone X的像素尺寸是1125*2436 px(@3X)，同樣的寬度 一個用@2X圖，一個用@3X圖，表現出了更高的清晰度。
圖1-4：不同倍圖在表現區域一致時的效果——來自HIG
iPhone X的屏幕密度為458ppi。有一種說法：認為肉眼可識別的最高密度為300ppi。而iPhone X的458ppi在手機屏幕歷史可能僅次于HTC one的468ppi(2013年)， 所以完全可以認為X 是今天市面上最清晰的手機^_^ 無論我這個凡人的肉眼能不能看得出區別來，都不能影響它的傲嬌。
布局
我們再來看看設計師和移動端開發工程師要考慮到的布局：
1-保證你的設計布局能夠填充整個屏幕；
2-注意你的核心內容不要被設備的大圓角、傳感器(齊劉海)、以及底部訪問主屏幕的指示燈遮擋；
圖2-1：iPhone X設計應當填充整個屏幕
圖2-2：注意X的大圓角和傳感器
設計布局要填充整個屏幕，這里有兩塊區域需要額外考慮：
①屏幕頂部，即StatusBar部分，這條狀態欄本來并沒有可發揮的空間，但是iphone的StatusBar與NavigationBar(以下簡稱NavBar)背景是可以通欄的，以達到一種完全沉浸式體驗的設計。
大部分的APP應該也是沒有影響的（主流NavBar都采用純色背景，StatusBar背景沿用NavBar的背景），但是對于那些做了NavBar視覺效果的設計師就要考慮了，你的漸變色背景、或者帶底紋的北背景、還包括電商平臺商品圖是通欄展示的商品圖，多少會對實際效果產生一些影響。
比如，NavigationBar是漸變色背景的，由于X的Status+Nav高度增加，我們1242*192(@3X)的背景圖會被等比例拉伸至這兩塊區域并且剪輯多余部分。如圖2-2
圖2-3：NavBar與StatusBar背景圖適配上的表現
②屏幕底部
圖2-4：訪問主屏幕的指示燈區域——來自WWDC
屏幕底部的虛擬區，替代了home鍵，高度為34pt。
指示燈區域是一個帶著系統功能的內容顯示區域，這就意味著它可以展示你內容，同時如果你的底部是TabBar，那么指示燈區域背景會來自于TabBar背景的延伸，如果我們是一個feed流的頁面，那么底部會展示次屏feed流的局部。
圖2-5：Home Indicator區域的應用——來自WWDC
鑒于圓角、傳感器、指示燈區域的影響，iPhone X給出了設計布局的安全區意見：
圖2-7：iPhone X全屏的安全區（375*734 pt）
再考慮必要的NavBar、TabBar，主題內容顯示的安全區需要根據設計需求進行考慮。根據實際需要，我們添加的所有控件都應當在安全區內，如各類型的Button、Edit Menu、Pickers、Sliders等等。
圖2-8：所有的控件應當放置在安全區域內
圖2-9：安全區域內控件的示范
注意你的內容不要被裁切：建議內容為居中對稱已不被圓角或傳感器等遮擋。也建議使用系統提供的的元素以及自動布局來構建頁面獲得更好的適配效果。
注意StatusBar的高度：X的狀態欄高度會更高，如果有開發伙伴對NavgationBar的位置是通過固定值進行位置的定位的，建議進行APP升級。
如果你的APP是隱藏StatusBar的，建議重新考慮：X為用戶在垂直空間上提供了更多展示余地，且狀態欄中也包含了用戶需要知道的信息，除非能通過隱藏狀態欄帶給用戶額外的價值，否則蘋果建議大家將狀態欄還給用戶。
——任性地翻譯自《Human Interface Guiidelines》
如果看到新的知識點，不定期更新。
本文由 @風口上的豬毛 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖由作者提供
這么看下來，上面去掉劉海，下面去掉home虛擬鍵，X的屏占比高，但可用屏幕占比低。是這樣嗎
可用屏幕占整個手機屏幕的占比 應該還是有提高的，但是沒有屏幕占比那么高。。所謂的全面屏也只是個噱頭罷了
不過對于大多電商運營之類的平臺，首屏可以展示更長的內容了，京東天貓的運營位應該能多賺點錢了
看來玩農藥不僅不耽誤出裝，還會多出局部視野……8000塊錢買個視野buff，這波不虧
感謝給了提醒
666
糾正一下，安卓手機ppi 500以上的多了去了，iphone X在手機屏幕歷史上ppi還真排不上號。。。
恩，文章我本來發在簡書，也有讀者提醒我了，三星galaxy系列有屏幕分辨率500+的。是我孤陋寡聞了
不只是三星galaxy系列，很多android廠商都出過2k屏，所以ppi500以上的真的很多。但是因為2k屏耗電并且對視覺提升不大而且還會影響手機流暢度，你也說了人眼最高識別ppi也就300，所以2k屏那時候只是噱頭，對用戶體驗并沒什么提升。2k熱過去了之后很多廠商都回歸1080p了，不過也有一些2K屏的手機。但是最近一年VR又有點興起了，1080P手機上的效果可以說是很差，加上芯片性能大幅提升，很多廠商又開始使用2K屏幕了。蘋果的ppi一直都不怎么樣，放到android旗艦里面基本是墊底的水平，但是屏幕素質和顯示效果確實好很多，基本秒殺國產旗艦。還有，恭喜樓主上首頁啊，希望以后多交流。
?? 感謝。我也會努力擴展知識面，爭取下次少出丑 ??
iPhone X，iPhone 差，起個好名字很重要的 ??
羅馬數字X代表10吧；10周年紀念的意思么。。
我說的是個梗，開個玩笑
我認真了，見笑了 ??
iPhone X, 垃圾的開始!