iPhone 8/8 plus和iPhone X 已經(jīng)發(fā)布數(shù)日，iOS 11的設(shè)計規(guī)范也更新了，UI設(shè)計師們有的忙了。網(wǎng)絡(luò)上關(guān)于iPhone X 的UI設(shè)計文章也是一大波。今天我們就集各家之所長，來系統(tǒng)的總結(jié)一下。

先來一波iPhone家族，初步的了解一下。

因為使用iPhone 5/5c/5s/SE的用戶越來越少，4英寸的屏幕對于現(xiàn)在大屏手機的時代顯得過于小了，所以它們的尺寸已經(jīng)不作為ios的設(shè)計尺寸，這里就不多贅述了。

詳細的屏幕尺寸分解再來一波。

這里應(yīng)該有一處關(guān)于7 plus的物理尺寸：1080×1920px，基本上用不到，也就不贅述了，我也就沒放上去。iPhone 8/8 Plus和iPhone 7/7 plus的顯示屏相匹配，外觀上并沒有太多的變化，僅僅增加了無線充電等功能和處理器的提升，iPhone X才是我們設(shè)計時需要關(guān)注的焦點，它首次使用了OLED屏幕，分辨率達到1125×2436px @3x，PPI達到了458ppi。

那么當我們進行設(shè)計時，iPhone X究竟使用什么尺寸呢？其實iPhone X可看做是iPhone 7的加長版，習慣了用750x1334px作圖的設(shè)計師，iPhone X的到來并不會帶來太大影響，所以我們繼續(xù)使用@2x模式下的設(shè)計尺寸：750x1624px。

下面我們就針對iPhone X設(shè)計尺寸和iPhone 7進行對比分析：

一.頁面頂部和底部對比

狀態(tài)欄40px VS 88px

標簽欄98px VS 98px 68px (Home Indicator)

對比之下可以看出，iPhone X的頂部狀態(tài)欄和底部標簽欄都進行了增高，而且在設(shè)計時，如果頂部和底部有背景色的話，都可以進行延伸，蘋果禁止將這2處背景色設(shè)置為黑色去隱藏這兩部分。

下圖所示：@1x尺寸下，iPhone X比iPhone 7一共多出了145pt，頂部44pt比iPhone 7多出了24pt，底部34pt，多出的高度就是：145-24-34=87pt，1pt=2px,也就是174px，這高度是可以自由利用的。