iPhone? x 來了，他那修長的身材，黑色齊劉海，刺激著每一個設計師的神經，這么奇葩造型怎么適配？別怕，下面幫你搞定。
蘋果十周年發布會，讓大家又度過一個不眠之夜，面對史上最貴iPhone，朋友，你的腎準備好了嗎？
十周年，果然不負眾望，蘋果搞出了幺蛾子機型，大長臉齊劉海的 iPhone X，還有一個神奇的刷臉功能，從此，生活就變成了這樣：
當然即使如此，也一定擋不住大家買買買的熱情。
然而作為UI設計師，心情卻是復雜而沉重的：
沃草！中間這個“劉海”造型！這個長臉尺寸！是又要做一版嗎？
別怕，下面就來說說，這個奇葩造型如何應對，其實，安卓的尺寸都過來了，沒有切不了的蘋果啦~
為了單位一致，本文數值采用@1x來說明。
先來看看尺寸，不管物理像素如何，我們用邏輯像素來做設計。iPhone X 的邏輯像素寬度并沒有變化，與iPhone 6,7和8相同。只是長度增加了145pt。當設計@1x時 （iPhone 6,7：375X667pt），做iPhone? X的適配的話，畫布建為375x812pt。
由于Retina屏，比例是13:6。在切圖時候，需要導出@3x的尺寸，即1125x2436pt。
另外，屏幕顯示不再是矩形，而是切割成了大圓角矩形，為了避免顯示遮擋，我們需要在四周留出更多邊距。
大家吐槽劉海來了！穩住，我們能贏！
頂部狀態欄，由于全屏和“劉海”的關系，變得更高了，由20pt變成了44pt。
狀態欄變高，導航欄的空間也變大了，變成了88pt，除了視覺更舒適，也能考慮更多的內容。
除了頂部的變化，底部工具欄也有改變，看到右圖的黑線了嗎？這是新的home indicator。由于它在屏幕中，避免干擾操作，這個區域需要空出來，官方文檔距離是34pt。
怎么避免“劉海”尷尬？
很簡單，要保持好安全距離，劉海片兒一點也不可怕！我根據官方文檔量了下，紅色部分邊距是10pt（@1x）
全屏的圖片需要考慮這個問題，特別是人物。否則一律貼上黑色劉海片兒。
游戲等需要橫屏的，關鍵信息左右都要留出空間，否則........
那么橫屏的游戲到底要怎么顯示呢？我認為應該是這樣的：
雖然說頂部狀態欄44pt，底部home indicator是34pt，但是我們無法控制用戶是向左還是向右橫屏，因此兩邊如果要放功能按鈕的話，左右留出44pt+10pt的范圍，底部留出home indicator的34pt。背景和無關緊要的圖則充滿屏幕。
iPhone X 的屏幕分辨率是1125x2436px（458 PPI）。如此高的分辨率使得圖片需要更大，并且最好全部都是矢量的，這里推薦PDF格式。圖片更清楚，體積更小。
來總結一下 iPhone X 對于適配的變化吧：
1.高度增加了145pt，變成812pt.
2.屏幕圓角顯示，注意至少留10pt邊距。
3.狀態欄高度由20pt變成44pt，留意這個距離就能避開“劉海”的尷尬。
4.底部工具欄需要為home indicator留出34pt邊距。
怎么樣，是不是沒那么可怕？你還發現哪些變化呢？歡迎討論。
如果你喜歡我的分享記得給我留言或者點贊哦，
也可以把你的問題寫在下面的評論區。
更多相關的文章記得去我的主頁查閱哦。
