前言：蘋果在9月13日發(fā)布了三款新的機型iPhone 8 ，iPhone8 Plus，iPhone X，其中8，8P和7，7P分辨率是一樣的，新增分辨率1125px *2436px 。這個機型對UI設(shè)計師適配會有什么樣的變化？是不是要多切一個尺寸的圖？是不是原來的設(shè)計尺寸不夠了？iPhone X屏幕的特殊形狀對設(shè)計有什么影響？

安心，其實影響不大，但是確實多了一些要注意的點。

一.切圖尺寸

IOS在屏幕上的坐標系以點(pt)為單位，然后映射到顯示屏中的像素。不同的屏幕像素密度不同。普通的屏幕1pt對應(yīng)1px，高分辨率的屏幕，1pt則對應(yīng)更高的像素。這次發(fā)布會發(fā)布的新增的3款機型，屏幕的像素密度沒有發(fā)生變化，設(shè)計師們依然出到3倍圖即可。具體可以看下圖：

二.設(shè)計稿尺寸

大海的團隊，目前設(shè)計工具是Sketch，設(shè)計尺寸是iPhone7 的分辨率750px*1334px 。對我們團隊來講，設(shè)計稿尺寸也不需要做出調(diào)整。

iPhone X 分辨率1125px*2436px，和之前的屏幕相比，屏幕比例發(fā)生了變化。我們轉(zhuǎn)換成pt為單位，來看下屏幕發(fā)生了什么變化。

下圖中左側(cè)是iPhone7 轉(zhuǎn)化成 pt 的示意圖 375pt*667pt，右圖是iPhone X 轉(zhuǎn)化成 pt 的示意圖375pt*812pt   可以發(fā)現(xiàn)屏幕高出了145pt。

為了方便理解，大家可以把這個尺寸理解成當年640px*1136px 和640px*960px 這兩個屏幕之間的關(guān)系，用同樣的注意點去處理設(shè)計時會遇到的問題。

三.iPhone X的屏幕特點

首先我們先看下iPhone X的特殊屏幕到底長什么樣子，看下圖：

值得注意的是，屏幕四角變成了圓角，屏幕上邊也有一部分遮擋區(qū)域。還有很明顯的點，iPhone X去掉了物理Home鍵，看下圖：

我們再來體會下，蘋果官方給的天氣應(yīng)用，桌面，通訊錄的示意圖。

看了這么多示意圖，相信大家應(yīng)該有了比較直觀的感受。我們來具體的看一下對比。下圖中，左側(cè)是iPhone 7的通訊錄頁面，右側(cè)是iPhone X的通訊錄頁面。

可以發(fā)現(xiàn)相對于i7，在iX中狀態(tài)欄+標題欄的高度更高了，標簽欄也更高，留白面積變大很多。但是要注意的是，我們標簽的icon的設(shè)計區(qū)域并沒有發(fā)生變化。

四.iPhone X的安全區(qū)域

我們先看下iPhone 7的安全區(qū)域。安全區(qū)域會根據(jù)狀態(tài)欄，標題欄，標簽欄是否出現(xiàn)，而有所不同。具體看下圖

接下來，我們再看下具體看下iPhone X的安全區(qū)域，下圖中示意了豎屏和橫屏狀態(tài)下，各自的最大安全區(qū)域。

安全區(qū)域可以這么理解，設(shè)計師在設(shè)計界面時，要嚴格把定制化內(nèi)容放置在安全區(qū)域以內(nèi)。舉一個橫屏的例子，下圖中綠色區(qū)域是設(shè)計師可定制的業(yè)務(wù)內(nèi)容區(qū)域，紅色區(qū)域不允許有業(yè)務(wù)內(nèi)容。安全區(qū)域可以防止內(nèi)容覆蓋狀態(tài)欄，導航欄，工具欄和標簽欄。

下圖中藍色區(qū)域?qū)儆诎踩珔^(qū)域中的間距。無論是i7還是iX,都有相應(yīng)的間距。

最后，可以從下面這個圖，對比下，i7和iX橫屏時，表現(xiàn)方式的差別

五.為iPhone X設(shè)計時的注意點

注意點1：狀態(tài)欄和home操作區(qū)域的顏色

可能很多人會不習慣，iX屏幕上方的“劉?！保赡軙性O(shè)計者或開發(fā)者，直接把狀態(tài)欄和底部系統(tǒng)home操作區(qū)域，設(shè)置成黑色。就像下圖中的左側(cè)一樣，要知道蘋果是禁止這樣做的哦~

還有，蘋果也不允許對home操作區(qū)進行特殊定制化的設(shè)計

注意點2：全屏圖片的適配

對于像啟動頁，全屏廣告等這些圖片的適配，設(shè)計師需要多提供一個iX的尺寸。

下圖例1，用i8尺寸的全屏圖片，用到iX中，按比例，讓高度自適應(yīng)于屏幕高度，會出現(xiàn)圖片寬度超出屏幕顯示區(qū)域，圖片左右兩邊被裁切。

下圖例2，用i8尺寸的全屏圖片，用到iX中，按比例，讓寬度自適應(yīng)于屏幕寬度，居中顯示，會出現(xiàn)圖片高度不足以填充全屏，導致屏幕上下沒有內(nèi)容。

注意點3：手勢和邊緣保護

iPhone X使用屏幕邊緣手勢來訪問主屏幕，應(yīng)用程序切換器，通知中心和控制中心。如：從屏幕底部向上滑回到桌面。從屏幕底部向上滑并停頓一下，調(diào)出最近任務(wù)。從屏幕右上角下滑，調(diào)出控制中心。

用戶依靠這些手勢操作手機。在極少數(shù)情況下，像游戲這樣的沉浸式應(yīng)用程序可能需要自定義的屏幕邊緣手勢，優(yōu)先于系統(tǒng)的手勢: 第一次滑動會調(diào)用特定于應(yīng)用的手勢，而第二次滑動則會調(diào)用系統(tǒng)手勢。

由于這樣的邊緣保護會使用戶難以訪問系統(tǒng)級的操作，蘋果公司建議謹慎使用。

結(jié)語：肯定還有大海沒有講到的注意點，有補充或者錯漏的，望可以幫忙指出。感謝閱讀。

本文示意圖來自蘋果官方視頻截圖處理