北京時間的9月13日凌晨，美國當(dāng)?shù)貢r間的9月12日上午，蘋果在發(fā)布會上發(fā)布了四款產(chǎn)品，本包括全新的Apple Watch Series 3，Apple TV 4K，iPhone 8/8 Plus，和全新iPhone X四款全新產(chǎn)品。其中X是數(shù)字10的意思，因此蘋果將其讀音讀作“iPhone Ten”。

在屏幕上，iPhone X搭載了一塊2436×1125分辨率的OLED顯示屏，蘋果將之稱為Super Retina Display。它有著iPhone史上最大的458ppi，，支持HDR、3D Touch和True Tone顯示。這款 OLED 屏擁有極佳的對比度、超高的分辨率、極薄的厚度、優(yōu)越的亮度、寬廣的色域、以及優(yōu)秀的色準(zhǔn)，3D Touch, True Tone等等功能。
蘋果還引入了 Animoji(emoji 動畫升級版),讓你可以將樂趣延伸到日常生活中，可以直接實時映射臉部表情的動畫版EMOJI。
屏幕尺寸
“iPhone X”， 5.8 英寸,屏幕分辨率為 1242 x 2800

除去底部固定的功能區(qū)，屏幕顯示范圍的尺寸為 5.15 英寸，458ppi。
豎屏尺寸：1125px × 2436px(375pt × 812pt @3x)
橫屏尺寸：2436px × 1125px(812pt × 375pt @3x)

iPhone 7 設(shè)備渲染后分辨率為 750 x 1334，邏輯分辨率只有 375 x 667。
iPhone X 設(shè)備渲染后分辨率為 1125 x 2436，邏輯分辨率是為 375 x 812。
這就意味著，除去下巴的功能區(qū)，iPhone X與 4.7 寸的7同寬，但是高度多了一截。145pt，導(dǎo)致多出了大約 20％的垂直高度。
就是多了這一截，這一截，在UI設(shè)計方面與iOS開發(fā)適配方面都會出現(xiàn)或多或少的問題。
齊劉海設(shè)計也需要適配。

Layout設(shè)計適配
在針對iPhone X設(shè)計效果時，必須確保布局填滿屏幕，不被設(shè)備的圓角，傳感器區(qū)域（留海）,或訪問主屏幕的指示器擋住。

大多數(shù)應(yīng)用程序使用標(biāo)準(zhǔn)的,系統(tǒng)提供的UI元素，比如導(dǎo)航欄、表視圖、和集合視圖自動適應(yīng)設(shè)備的新形式因素。
背部材料延伸到顯示的邊緣, 并且 UI 元素被適當(dāng)?shù)夭迦牒投ㄎ弧?/p>

對于具有自定義布局的應(yīng)用程序, 支持 iPhone X 也應(yīng)該相對容易, 特別是當(dāng)您的應(yīng)用程序使用自動布局并遵守安全區(qū)域（safe area）和邊界布局參考線（margin layout guides）。
預(yù)覽你的應(yīng)用程序在iPhone X上
你可以使用Xcode的模擬器去預(yù)覽app并且檢查剪裁和其他布局問題，有一些特性，如廣域色，最好在實際設(shè)備上預(yù)覽。

提供全屏體驗
確保背景延伸到顯示的邊緣, 并且垂直滾動的布局 (如tableview和collectionview) 一直延伸到底部。

內(nèi)容留邊距防止剪切
一般情況下, 內(nèi)容應(yīng)居中并間距對稱, 因此它在任何方向上看起來都很棒, 并且不被拐角或設(shè)備的傳感器區(qū)域剪裁, 或者被用于訪問主屏幕的指示器遮擋。為獲得最佳效果, 請使用標(biāo)準(zhǔn)的、系統(tǒng)提供的界面元素和自動布局來構(gòu)建您的界面。所有應(yīng)用程序都應(yīng)遵循 UIKit 定義的安全區(qū)域（safe area）和布局邊距（layout margins）, 從而確保基于設(shè)備和上下文的適當(dāng)?shù)拈g距。安全區(qū)域還可以防止內(nèi)容從狀態(tài)欄、導(dǎo)航欄、工具欄和標(biāo)簽欄底部漏出來。

注意狀態(tài)欄的高度
在 iPhone X 上, 狀態(tài)欄比其他 iPhone 要高。如果您的應(yīng)用程序假定了一個固定的狀態(tài)欄高度，在狀態(tài)欄下相對定位內(nèi)容, 則必須更新應(yīng)用程序以根據(jù)用戶的設(shè)備動態(tài)定位內(nèi)容。請注意, 當(dāng)后臺任務(wù) (如錄音和定位) 處于活動狀態(tài)時, iPhone X 上的狀況欄不會改變高度。
如果你的應(yīng)用目前隱藏狀態(tài)欄，重新考慮下iPhone X再決定
在iPhone X上的顯示高度比4.7寸的iPhone手機(jī)提供更多的垂直空間內(nèi)容，屏幕的狀態(tài)欄面積可能不會被應(yīng)用程序充分利用。狀態(tài)欄顯示給人們有用的信息。只有在交換附加值時候才能被隱藏。

注意縱橫比差異
iPhone X與4.7寸iPhone比例不同，因此, 全屏 4.7 寸iPhone圖顯示在iPhone X時出現(xiàn)裁剪或上下加框, 同樣的全屏iPhone X 圖顯示在4.7寸iPhone上，出現(xiàn)裁剪或左右加框。確保重要的視覺內(nèi)容在兩個顯示大小的視圖中保持不變。

避免將控件放置于屏幕最底部或者角落
人們使用顯示屏底部邊緣的滑動手勢來訪問主屏幕和應(yīng)用程序切換器, 這些手勢可能會取消您在該區(qū)域?qū)崿F(xiàn)的自定義手勢。屏幕的最遠(yuǎn)的角落可能是人能接觸到的最困難區(qū)域。

不要掩蓋關(guān)鍵的顯示特性
不要企圖隱藏設(shè)備的圓角，傳感器區(qū)域，或用于訪問主屏幕的指示器。視圖放在黑條屏幕的頂部和底部。不要使用像括號、擋板、形狀或教學(xué)文本這樣的視覺修飾來特別標(biāo)示這些區(qū)域。

自動隱藏的指示器
當(dāng)自動隱藏開啟的時候，如果用戶沒有觸碰屏幕幾秒鐘，指示器會淡出。當(dāng)用戶觸摸屏幕時重新出現(xiàn)。此行為應(yīng)僅對被動查看體驗 (如播放視頻或照片幻燈片) 啟用。。

Layout開發(fā)適配
Layout Guides and Safe Area
Layout guides定義的矩形區(qū)域?qū)嶋H上在屏幕上不可見, 但可以幫助定位、對齊和內(nèi)容間距。系統(tǒng)包括預(yù)定義的layout guides, 使其易于在內(nèi)容周圍應(yīng)用標(biāo)準(zhǔn)邊距, 并限制文本的寬度以獲得最佳可讀性。還可以定義自定義 layout guides。
遵守 UIKit 定義的安全區(qū)域和布局邊距所有應(yīng)用程序都應(yīng)遵循 UIKit 定義的安全區(qū)域（safe area）和布局邊距（layout margins）, 從而確保基于設(shè)備和上下文的適當(dāng)?shù)拈g距。安全區(qū)域還可以防止內(nèi)容從狀態(tài)欄、導(dǎo)航欄、工具欄和標(biāo)簽欄底部漏出來。

從iOS 7以來，我們在整個操作系統(tǒng)中都有半透明的bars，蘋果鼓勵我們通過這些bars繪制內(nèi)容，我們是通過viewController 的edgesForExtendedLayout屬性來做這些的。
iOS 7 開始，在 UIViewController中引入的 topLayoutGuide和 bottomLayoutGuide 在 iOS 11 中被廢棄了，取而代之的就是UIView的safeArea的概念，UIView的safeArea是描述你的視圖部分不被任何內(nèi)容或者bars遮擋的方法。 它提供兩種方式：safeAreaInsets或safeAreaLayoutGuide來提供給你safeArea的參照值，即 insets 或者 layout guide
Xib/Storyboard中開啟

藍(lán)色區(qū)域即為safeArea

Top/Bottom Layout Guide VS Safe Arae Layout Guide

修復(fù)一個相對于導(dǎo)航欄為0的約束

-  equalTo: view.topAnchor,
-  constant: 64
+  equalTo: view.safeAreaLayoutGuide.topAnchor

iPhone X機(jī)型判斷
目前還不知道iPhone X的Devive Model，可以拿分辨率來判斷。

#define iPhoneX ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1125, 2436), [[UIScreen mainScreen] currentMode].size) : NO)

SDK兼容
使用新API時，要從編譯時與運行時同事判斷。才是徹底的SDK兼容。

//__IPHONE_11_0 判斷最好直接使用數(shù)值，使用低版本SDK的時候，__IPHONE_11_0未必在系統(tǒng)中存在
// 編譯時判斷：檢查SDK版本
#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 110000
    // 運行時判斷：檢查當(dāng)前系統(tǒng)版本
    if ([UIDevice currentDevice].systemVersion.floatValue > 11.0f) {
         self.view.safeAreaLayoutGuide;
    } else {
        // 用舊的代替
        self.topLayoutGuide;
    }
#else
    // 用舊的代替
    self.topLayoutGuide;
#endif
}

原生控件frame變化

在iPhone X系統(tǒng)會自動修改StatusBar與Tabbar的高度，Tabbar從49pt變?yōu)?3pt。StatusBar由20pt變?yōu)榱?4pt

812pt-667pt = 145pt，145pt-狀態(tài)欄增加的24pt-tabbar增加的34pt = 91pt，意味著全使用原生bars的app，如果不是tableview那種頁面。有91pt的空白距離要設(shè)計上來做處理。

安全區(qū)域擴(kuò)展到包括自定義視圖 additionalSafeAreaInsets

自定義insets修改視圖的安全區(qū)域。

您的容器視圖控制器可以通過嵌入式子視圖控制器的視圖顯示自己的內(nèi)容視圖。 在這種情況下，請更新子視圖控制器的安全區(qū)域，以排除容器視圖控制器內(nèi)容視圖覆蓋的區(qū)域。 UIKit容器視圖控制器已經(jīng)調(diào)整其子視圖控制器的安全區(qū)域來解釋內(nèi)容視圖。 例如，導(dǎo)航控制器可以擴(kuò)展其子視圖控制器的安全區(qū)域，以便導(dǎo)航欄。
要擴(kuò)展嵌入式子視圖控制器的安全區(qū)域，請修改additionalSafeAreaInsets屬性。 假設(shè)您定義一個容器視圖控制器，可以在屏幕的底部和右側(cè)邊緣顯示自定義視圖，如圖所示。由于子視圖控制器的內(nèi)容位于自定義視圖下方，因此必須擴(kuò)展子對象的底部和右側(cè)插入。

image.png

在容器視圖控制器的viewDidAppear方法進(jìn)行修改，因為視圖添加到視圖層次結(jié)構(gòu)中，視圖的安全區(qū)域inset不正確。

override func viewDidAppear(_ animated: Bool) {
   var newSafeArea = view.safeAreaInsets
 
   // Adjust the safe area to accommodate 
   //  the width of the side view.
   if let sideViewWidth = sideView?.bounds.size.width {
      newSafeArea.right += sideViewWidth
   }
 
   // Adjust the safe area to accommodate 
   //  the height of the bottom view.
   if let bottomViewHeight = bottomView?.bounds.size.height {
      newSafeArea.bottom += bottomViewHeight
   }
 
   // Adjust the safe area insets of the 
   //  embedded child view controller.
   let child = self.childViewControllers[0]
   child.additionalSafeAreaInsets = newSafeArea
}

Color適配
iPhone X支持P3色彩空間，從而產(chǎn)生更豐富，比sRGB更飽和的顏色。
使用廣域色來增強(qiáng)視覺體驗
在此之前，大多數(shù)捕獲的照片都是 sRGB 色域。由于 sRGB 色域與大多數(shù)顯示器能很好地兼容，因此它也成為網(wǎng)絡(luò)上共享圖像的標(biāo)準(zhǔn)。雖然 sRGB 在大多數(shù)時候都能很好地表現(xiàn)顯示器的色彩，但是隨著顯示器和相機(jī)技術(shù)的提高，sRGB 開始顯現(xiàn)它的不足。
使用廣域色的照片和視頻更加逼真, 使用廣域色的可視化數(shù)據(jù)和狀態(tài)指示器更具影響力。請參閱色彩管理。

+ (UIColor *)colorWithDisplayP3Red:(CGFloat)displayP3Red green:(CGFloat)green blue:(CGFloat)blue alpha:(CGFloat)alpha NS_AVAILABLE_IOS(10_0); 
- (UIColor *)initWithDisplayP3Red:(CGFloat)displayP3Red green:(CGFloat)green blue:(CGFloat)blue alpha:(CGFloat)alpha NS_AVAILABLE_IOS(10_0);

Gestures
iPhone X使用屏幕邊緣手勢提供訪問home屏幕功能，app切換，通知中心和控制中心。
避免干擾系統(tǒng)的屏幕邊緣手勢
人們依靠這些手勢在每個應(yīng)用程序中工作。在極少數(shù)情況下, 像游戲這樣的沉浸式應(yīng)用程序可能需要自定義屏幕邊緣手勢, 優(yōu)先于系統(tǒng)的手勢, 第一次swipe調(diào)用應(yīng)用程序特定的手勢, 第二swipe調(diào)用系統(tǒng)手勢。此行為 (稱為邊緣保護(hù)) 應(yīng)謹(jǐn)慎實施, 因為它使人們更難訪問系統(tǒng)級操作。參考章節(jié)Gestures.

額外的設(shè)計考慮
引用正確的驗證方式
iPhone X 使用Face ID 進(jìn)行驗證。如果您的應(yīng)用程序集成了蘋果支付或其他系統(tǒng)認(rèn)證功能, 不要在 iPhone X上引用Touch ID驗證, 同樣的請確保您的應(yīng)用程序不在支持Touch ID 的設(shè)備上引用 "Face ID"。參考章節(jié) Authentication.

不要重復(fù)提供鍵盤功能
在iPhone X中,Emoji/Globe 按鈕和 Dictation 按鈕也自動顯示在鍵盤的下方，即使使用自定義鍵盤。你的應(yīng)用程序不能影響這些按鈕，所以避免引起混亂，不要在你的鍵盤再次添加他們。
參考章節(jié) Custom Keyboards.
擴(kuò)展閱讀
UILayoutGuide, layoutMarginsGuide, readableContentGuide, and safeAreaLayoutGuide.
人機(jī)交互指南iPhone X：https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
Designing for iPhone X：https://developer.apple.com/videos/play/fall2017/801/
Adaptivity and Layout：https://developer.apple.com/ios/human-interface-guidelines/visual-design/adaptivity-and-layout/
Positioning Content Relative to the Safe Area ：https://developer.apple.com/documentation/uikit/uiview/positioning_content_relative_to_the_safe_area?language=objc
iPhone X UI 設(shè)計模板 ：https://developer.apple.com/design/resources/#ios-apps
iOS開發(fā)之SDK兼容性指南