北京時間的9月13日凌晨，美國當地時間的9月12日上午，蘋果在發布會上發布了四款產品，本包括全新的Apple Watch Series 3，Apple TV 4K，iPhone 8/8 Plus，和全新iPhone X四款全新產品。其中X是數字10的意思，因此蘋果將其讀音讀作“iPhone Ten”。
在屏幕上，iPhone X搭載了一塊2436×1125分辨率的OLED顯示屏，蘋果將之稱為Super Retina Display。它有著iPhone史上最大的458ppi，，支持HDR、3D Touch和True Tone顯示。這款 OLED 屏擁有極佳的對比度、超高的分辨率、極薄的厚度、優越的亮度、寬廣的色域、以及優秀的色準，3D Touch, True Tone等等功能。
蘋果還引入了 Animoji(emoji 動畫升級版),讓你可以將樂趣延伸到日常生活中，可以直接實時映射臉部表情的動畫版EMOJI。
屏幕尺寸
“iPhone X”， 5.8 英寸,屏幕分辨率為 1242 x 2800
除去底部固定的功能區，屏幕顯示范圍的尺寸為 5.15 英寸，458ppi。
豎屏尺寸：1125px × 2436px(375pt × 812pt @3x)
橫屏尺寸：2436px × 1125px(812pt × 375pt @3x)
iPhone 7 設備渲染后分辨率為 750 x 1334，邏輯分辨率只有 375 x 667。
iPhone X 設備渲染后分辨率為 1125 x 2436，邏輯分辨率是為 375 x 812。
這就意味著，除去下巴的功能區，iPhone X與 4.7 寸的7同寬，但是高度多了一截。145pt，導致多出了大約 20％的垂直高度。
就是多了這一截，這一截，在UI設計方面與iOS開發適配方面都會出現或多或少的問題。
齊劉海設計也需要適配。
Layout設計適配
在針對iPhone X設計效果時，必須確保布局填滿屏幕，不被設備的圓角，傳感器區域（留海）,或訪問主屏幕的指示器擋住。
大多數應用程序使用標準的,系統提供的UI元素，比如導航欄、表視圖、和集合視圖自動適應設備的新形式因素。
背部材料延伸到顯示的邊緣, 并且 UI 元素被適當地插入和定位。
對于具有自定義布局的應用程序, 支持 iPhone X 也應該相對容易, 特別是當您的應用程序使用自動布局并遵守安全區域（safe area）和邊界布局參考線（margin layout guides）。
預覽你的應用程序在iPhone X上
你可以使用Xcode的模擬器去預覽app并且檢查剪裁和其他布局問題，有一些特性，如廣域色，最好在實際設備上預覽。
提供全屏體驗
確保背景延伸到顯示的邊緣, 并且垂直滾動的布局 (如tableview和collectionview) 一直延伸到底部。
內容留邊距防止剪切
一般情況下, 內容應居中并間距對稱, 因此它在任何方向上看起來都很棒, 并且不被拐角或設備的傳感器區域剪裁, 或者被用于訪問主屏幕的指示器遮擋。為獲得最佳效果, 請使用標準的、系統提供的界面元素和自動布局來構建您的界面。所有應用程序都應遵循 UIKit 定義的安全區域（safe area）和布局邊距（layout margins）, 從而確保基于設備和上下文的適當的間距。安全區域還可以防止內容從狀態欄、導航欄、工具欄和標簽欄底部漏出來。
注意狀態欄的高度
在 iPhone X 上, 狀態欄比其他 iPhone 要高。如果您的應用程序假定了一個固定的狀態欄高度，在狀態欄下相對定位內容, 則必須更新應用程序以根據用戶的設備動態定位內容。請注意, 當后臺任務 (如錄音和定位) 處于活動狀態時, iPhone X 上的狀況欄不會改變高度。
如果你的應用目前隱藏狀態欄，重新考慮下iPhone X再決定
在iPhone X上的顯示高度比4.7寸的iPhone手機提供更多的垂直空間內容，屏幕的狀態欄面積可能不會被應用程序充分利用。狀態欄顯示給人們有用的信息。只有在交換附加值時候才能被隱藏。
注意縱橫比差異
iPhone X與4.7寸iPhone比例不同，因此, 全屏 4.7 寸iPhone圖顯示在iPhone X時出現裁剪或上下加框, 同樣的全屏iPhone X 圖顯示在4.7寸iPhone上，出現裁剪或左右加框。確保重要的視覺內容在兩個顯示大小的視圖中保持不變。
避免將控件放置于屏幕最底部或者角落
人們使用顯示屏底部邊緣的滑動手勢來訪問主屏幕和應用程序切換器, 這些手勢可能會取消您在該區域實現的自定義手勢。屏幕的最遠的角落可能是人能接觸到的最困難區域。
不要掩蓋關鍵的顯示特性
不要企圖隱藏設備的圓角，傳感器區域，或用于訪問主屏幕的指示器。視圖放在黑條屏幕的頂部和底部。不要使用像括號、擋板、形狀或教學文本這樣的視覺修飾來特別標示這些區域。
自動隱藏的指示器
當自動隱藏開啟的時候，如果用戶沒有觸碰屏幕幾秒鐘，指示器會淡出。當用戶觸摸屏幕時重新出現。此行為應僅對被動查看體驗 (如播放視頻或照片幻燈片) 啟用。。
Layout開發適配
Layout Guides and Safe Area
Layout guides定義的矩形區域實際上在屏幕上不可見, 但可以幫助定位、對齊和內容間距。系統包括預定義的layout guides, 使其易于在內容周圍應用標準邊距, 并限制文本的寬度以獲得最佳可讀性。還可以定義自定義 layout guides。
遵守 UIKit 定義的安全區域和布局邊距所有應用程序都應遵循 UIKit 定義的安全區域（safe area）和布局邊距（layout margins）, 從而確保基于設備和上下文的適當的間距。安全區域還可以防止內容從狀態欄、導航欄、工具欄和標簽欄底部漏出來。
從iOS 7以來，我們在整個操作系統中都有半透明的bars，蘋果鼓勵我們通過這些bars繪制內容，我們是通過viewController 的edgesForExtendedLayout屬性來做這些的。
iOS 7 開始，在 UIViewController中引入的 topLayoutGuide和 bottomLayoutGuide 在 iOS 11 中被廢棄了，取而代之的就是UIView的safeArea的概念，UIView的safeArea是描述你的視圖部分不被任何內容或者bars遮擋的方法。 它提供兩種方式：safeAreaInsets或safeAreaLayoutGuide來提供給你safeArea的參照值，即 insets 或者 layout guide
Xib/Storyboard中開啟
藍色區域即為safeArea
Top/Bottom Layout Guide VS Safe Arae Layout Guide
修復一個相對于導航欄為0的約束
- equalTo: view.topAnchor,
- constant: 64
+ equalTo: view.safeAreaLayoutGuide.topAnchor
iPhone X機型判斷
目前還不知道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 判斷最好直接使用數值，使用低版本SDK的時候，__IPHONE_11_0未必在系統中存在
// 編譯時判斷：檢查SDK版本
#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 110000
// 運行時判斷：檢查當前系統版本
if ([UIDevice currentDevice].systemVersion.floatValue > 11.0f) {
self.view.safeAreaLayoutGuide;
} else {
// 用舊的代替
self.topLayoutGuide;
}
#else
// 用舊的代替
self.topLayoutGuide;
#endif
}
原生控件frame變化
在iPhone X系統會自動修改StatusBar與Tabbar的高度，Tabbar從49pt變為83pt。StatusBar由20pt變為了44pt
812pt-667pt = 145pt，145pt-狀態欄增加的24pt-tabbar增加的34pt = 91pt，意味著全使用原生bars的app，如果不是tableview那種頁面。有91pt的空白距離要設計上來做處理。
安全區域擴展到包括自定義視圖 additionalSafeAreaInsets
自定義insets修改視圖的安全區域。
您的容器視圖控制器可以通過嵌入式子視圖控制器的視圖顯示自己的內容視圖。 在這種情況下，請更新子視圖控制器的安全區域，以排除容器視圖控制器內容視圖覆蓋的區域。 UIKit容器視圖控制器已經調整其子視圖控制器的安全區域來解釋內容視圖。 例如，導航控制器可以擴展其子視圖控制器的安全區域，以便導航欄。
要擴展嵌入式子視圖控制器的安全區域，請修改additionalSafeAreaInsets屬性。 假設您定義一個容器視圖控制器，可以在屏幕的底部和右側邊緣顯示自定義視圖，如圖所示。由于子視圖控制器的內容位于自定義視圖下方，因此必須擴展子對象的底部和右側插入。
在容器視圖控制器的viewDidAppear方法進行修改，因為視圖添加到視圖層次結構中，視圖的安全區域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色彩空間，從而產生更豐富，比sRGB更飽和的顏色。
使用廣域色來增強視覺體驗
在此之前，大多數捕獲的照片都是 sRGB 色域。由于 sRGB 色域與大多數顯示器能很好地兼容，因此它也成為網絡上共享圖像的標準。雖然 sRGB 在大多數時候都能很好地表現顯示器的色彩，但是隨著顯示器和相機技術的提高，sRGB 開始顯現它的不足。
使用廣域色的照片和視頻更加逼真, 使用廣域色的可視化數據和狀態指示器更具影響力。請參閱色彩管理。
通常在開發上通常我們使用sRGB來設置顏色，因為sRGB兼容性是最好的。
早在iOS10也已經提供了P3色彩空間與設置方法
+ (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切換，通知中心和控制中心。
避免干擾系統的屏幕邊緣手勢
人們依靠這些手勢在每個應用程序中工作。在極少數情況下, 像游戲這樣的沉浸式應用程序可能需要自定義屏幕邊緣手勢, 優先于系統的手勢, 第一次swipe調用應用程序特定的手勢, 第二swipe調用系統手勢。此行為 (稱為邊緣保護) 應謹慎實施, 因為它使人們更難訪問系統級操作。參考章節Gestures.
額外的設計考慮
引用正確的驗證方式
iPhone X 使用Face ID 進行驗證。如果您的應用程序集成了蘋果支付或其他系統認證功能, 不要在 iPhone X上引用Touch ID驗證, 同樣的請確保您的應用程序不在支持Touch ID 的設備上引用 "Face ID"。參考章節 Authentication.
不要重復提供鍵盤功能
在iPhone X中,Emoji/Globe 按鈕和 Dictation 按鈕也自動顯示在鍵盤的下方，即使使用自定義鍵盤。你的應用程序不能影響這些按鈕，所以避免引起混亂，不要在你的鍵盤再次添加他們。
參考章節 Custom Keyboards.
擴展閱讀
UILayoutGuide, layoutMarginsGuide, readableContentGuide, and safeAreaLayoutGuide.
人機交互指南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 設計模板 ：https://developer.apple.com/design/resources/#ios-apps
iOS開發之SDK兼容性指南
