總結一下最近超火的iPhoneX設計規范，設計師們燥起來吧！
內容以《designing for iPhone X》視頻為主，視頻前半部分與新版HIG/Overview/iPhoneX部分內容相同，白色配圖來自HIG，黑色配圖來自視頻截圖。部分內容來自知乎用戶bigyang。
（為方便閱讀，以下內容文字在前圖片在后）
官方設計規范視頻連接：
Designing for iPhone X - Fall 2017 - Videos - Apple Developer
————————正文分割線————————
一、尺?寸
在縱向方向上，iPhone X上的顯示屏的寬度與iPhone 6，iPhone 7和iPhone 8的4.7英寸顯示屏的寬度相匹配。然而，iPhone X上的顯示屏比4.7英寸顯示屏高145pt，大約20％的內容垂直空間。
屏幕分辨率 1125 x 2436px（375pt×812pt @3x）
所以從頁面視覺來看，我們依然采用老辦法，從2x的iPhone7做為基準去做一稿設計，唯一變化的是可能我們需要采用更高的導航欄，更高的底部標簽欄。所以，iPhone X將延用@3x，不會采用@4x！
二、布 局
在設計iPhone X的界面時，您必須確保布局填滿屏幕，并且不會被設備的圓角，傳感器外殼或被主屏幕的指示燈遮蔽。
iPhone X 屏幕底部任意位置上滑可以返回主屏或者進入任務切換界面，屏幕底部有一個home指示器固定顯示在app上層。
大部分使用系統提供的標準UI元素（如導航欄）的APP會自動適應iPhone X！Navigation bar、tab bar和tool bar會擴展到屏幕頂部和底部弧形區域。
左圖：4.7英寸iPhone? 右圖：iPhone X
水平布局時，table view全屏顯示，內容只在中間安全區顯示，iOS 11新增了一種布局叫做「Safe Area layout guide」。（下圖藍色+紅色區域是安全區域，紅色是margin，注意水平布局時不顯示狀態欄，安全區底部仍然要留出home指示器的位置）
如果app使用自定義控件或非標準布局，要在iPhone X上運行良好需要一點修改。
1、全屏顯示
iPhone X和4.7寸iPhone屏幕長寬比不同，提供 Fill 和 Fit 2種圖片縮放方式。
2、重新設置關鍵交互和關鍵信息的位置。
交互元素不要靠近角落（發現大量我比蘋果設計師聰明系列）
屏幕邊緣的視覺元素要移動位置，部分情況下要重新設計。
iPhone X 狀態欄高度更高，在電話和定位等后臺任務時，高度不會變化（就是打電話和導航時，原先頂部增加的彩色帶，現在變成時間信息底部的彩色氣泡，見下圖）
水平布局時，交互元素兩側距離相等，左側右側旋轉時位置固定，方便用戶記憶。
最后，底部指示器是系統的核心交互，會強制顯示，針對淺色和深色背景會改變顏色。
底部按鈕要避開home指示器，home指示器不需要特殊強調（不要duang！）
應用可以打開edge protection（邊緣保護？），第1次操作拉出home指示器，第2次退出應用。
在底部的點擊操作不會觸發home指示器，即使app內容在指示器下層，也可以被點擊。
全屏模式時指示器自動隱藏，觸摸屏幕可以顯示。
在使用圖片時，請注意長寬比差異。iPhone X具有不同于其它iPhone的長寬比，因此，全屏其它iPhone圖片在iPhone X上全屏顯示時會出現裁剪。同樣，全屏iPhone X圖片在其它iPhone也會出現裁剪，所以請注意兩種設備適配。
還有要注意不要將交互控件放置在屏幕底部和角落。因為這些區域是用戶不好操作的位置，或者操作起來不舒服！
三、圖 標 設 計
底部導航欄圖標，過去的做法是當前激活模塊的圖標為剪影風格，其他圖標為線性風格。設計師需要做兩套圖標。分別是一套剪影，一套線性。而現在統一為剪影，而當前激活模塊的圖標使用平鋪色代表激活。
四、配 色
iPhone X上的顯示器支持P3色彩空間，可以產生比sRGB更豐富，更飽和的顏色。使照片和視頻的顏色更加逼真，增強視覺體驗！
