固定在屏幕上展示的内容应始终在安全区域内，如顶导、底部tab栏等。垂直滚动的内容，如列表，图片流，需要一直延伸到底部，也就是会在安全区之外展示，这样才能确保提供全面屏操作体验。

　　常用元素适配方案

　　正是因为 iPhone X 有着许多操作特性，我们的设计方案必须针对 iPhone X 进行适配。以下是针对常见界面元素整理的通用适配规则。

　　1. 吸顶元素

　　对于吸顶元素的适配原则是：避让状态栏，内容区吸附于安全区顶部，状态栏背景颜色根据吸顶元素进行调整。

　　顶部导航栏：导航栏直接平移到安全区顶部即可，iPhone X 状态栏高度自动适配，状态栏底色与iPhone 8 时保持统一。

　　顶部通知：通知区域平移至安全区域，通知背景向上加高 44pt，状态栏内容保持在最上层展示。

　　2. 吸底元素

　　吸底元素的适配原则是：内容平移至安全区底部，界面背景层元素(界面背景色、背景图片、全屏地图等)充满屏幕，主屏幕指示条下方区域与吸底元素颜色协调。

　　吸底tab栏、选择器、对话输入框等：信息内容平移至安全区域底部，主屏幕指示条下方填充相应背景色。

　　吸底按钮：信息内容平移至安全区域底部，界面底部背景填充相应背景色，按钮可点击区域不变。

　　底部扩展信息：有些信息位于底部隐藏状态，需展开显示，由于 iPhone X 屏幕较长，且安全区域未撑满屏幕，所以会露出原本隐藏的信息。这时候通常会采用形状遮罩遮盖隐藏信息，或对底部隐藏信息的位置进行特殊调整。

　　3. 信息流

　　信息流从主屏幕指示条下方穿过，撑满屏幕显示，滑动浏览信息不受影响。主屏幕指示条下方内容仍可点击，此区域滑动手势优先触发系统操作。信息流最底部内容要保障在安全区内。

　　4. 全屏元素

　　全屏元素多为图片、视频、游戏画面、全屏地图等信息，适配规则是：全屏元素在 iPhone X 上仍要保持充满屏幕的状态，要保证图像信息比例正确不变形，并接受硬件传感器齐刘海和圆角遮罩。

　　全屏图片：因全屏图片在 iPhone X 上仍要保持全屏的话，会被裁剪掉图片信息，所以要根据画面具体元素进行选择，是充满屏幕裁剪图片，还是在空白区域填充色块(系统默认填充黑色)。App 开屏图片直接调取 iPhone 8 Plus 在 iPhone X 展示会被裁剪，所以最好是单独出图适配，图片尺寸为 375pt×812pt (1125×2436px @3x)。

　　因 iPhone X 与 iPhone 8 Plus 都使用@3x图片，所以开屏图片不做单独适配的话可以调取 iPhone 8 Plus 图片裁剪使用。

　　全屏阅读模式：当需要沉浸式阅读的时候，我们会采用隐藏状态栏的形式，将屏幕全部用于展示信息，但是这种形式在iPhone X 上因为齐刘海的原因效果并不理想。所以在 iPhone X 上建议保留顶部状态栏，信息在顶部安全区内展示，状态栏的底色可以根据信息内容进行调整。

　　5. 左右布局元素

　　最典型的左右布局就是抽屉导航，抽屉拉出后，如果信息卡片和主屏幕指示条交错叠加，就会稍显信息混乱，建议抽屉导航的宽度根据主屏幕指示条的位置进行调整，完整露出或完全遮挡指示条。

　　6. 居中元素

　　居中元素在适配中的影响较小，对话框、Toast 提示等均不需单独适配。

　　对话框：对话框为全局居中的元素，不受四周元素的影响，在 iPhone X 上不需单独适配，保障对话框的背景充满屏幕即可。

　　缺省页：因顶部状态栏是不建议遮挡的部分，所以顶部加上顶导距离会很高，这样就导致整体界面稍有重心下移的感觉。尤其在缺省图形居中的界面，重心下移的感觉更为明显，这种情况下建议对界面元素进行单独适配调整，以便达到视觉平衡。