iPhone X 简单介绍

iPhone X 包含了一个大的、高分辨率的、圆形的、边缘边缘的超级视网膜显示屏，提供了一种前所未有的沉浸式、内容丰富的体验。

OV_Hero.png

Screen Size 屏幕大小
在肖像定位中，iPhone X上显示的宽度与4.7英寸的iPhone 6、iPhone 7和iPhone 8的宽度相匹配。然而，在iPhone X上的显示比4.7英寸高145pt，这使得内容的垂直空间增加了大约20%。

screenSize.png

Layout 布局
在为iPhone X设计时，你必须确保布局充满了屏幕，并且不会被设备的圆角、传感器外壳或进入主屏幕的指示器所遮挡。

layout.png

大多数应用程序使用标准的系统提供的UI元素，比如导航栏、表和集合，自动地适应设备的新表单元素。背景材料扩展到显示的边缘，UI元素适当地嵌入和定位。

OV_UI_Appearance_47.png

OV_UI_Appearance_X.png

在iPhone X上预览你的应用程序。
您可以使用模拟器(包含在Xcode中)预览您的应用程序，并检查剪切和其他布局问题。如果你的应用程序支持横向模式，确保你的布局看起来很棒，不管设备是向左还是向右旋转。在iPhone x上不支持倒立竖屏模式，一些功能，比如宽色图像，在实际设备上是最好的预览。

提供全屏体验。
确保背景扩展到显示的边缘，垂直可滚动的布局，如表和集合，一直保持到底部。

设置基本内容以防止剪辑。
一般来说，内容应该是居中对称的，所以它在任何方向上看起来都很好，不会被角落或设备的传感器外壳夹住，也不会被用来访问主屏幕的指示器所遮挡。为了达到最好的效果，使用标准的系统提供的界面元素和自动布局来构建你的界面。应用程序应该遵循UIKit定义的安全区域和布局边界，确保基于设备和上下文的适当的设置。安全区域还可以防止内容来自于状态栏、导航栏、工具栏和标签栏。

iphone_vh.png

当设备处于横向定位时，它可能适合于某些应用程序，比如在屏幕下方(在安全区下面延伸)放置tappable控件，以允许更多的内容空间。当在屏幕顶部和底部放置控件时，使用匹配的insets，并在主指示器周围留下足够的空间，这样人们在试图与控件交互时不会意外地锁定它。

iphone_h.png

注意状态栏的高度。iPhone X上的状态栏比其他iPhone的高。如果你的应用假设一个固定的状态栏高度在状态栏下面，你必须根据用户的设备动态地更新你的应用程序。注意，iPhone X上的状态栏在后台任务(如语音记录和位置跟踪)活动时不会改变高度。

如果你的应用程序目前隐藏状态栏，重新考虑iPhone x的决定，iPhone的显示高度提供了比4.7“iPhone”更垂直的内容空间，而状态栏占据了屏幕的一个区域，你的应用程序可能无法充分利用。状态栏也显示了人们认为有用的信息。它只应该被隐藏起来以换取增值。

iphone_6pic.png

当重新使用现有的艺术品时，要注意纵横比的差异。iPhone X的纵横比为4.7英寸。因此，在iPhone X上显示全屏时，全屏幕4.7“iPhone艺术作品出现了裁剪或字母组合。同样，在4.7英寸的iPhone上显示全屏时，全屏幕的iPhone X艺术作品也出现了裁剪或折叠。”确保重要的视觉内容在显示尺寸上保持一致。

避免在屏幕底部和角落里显式放置交互控件。人们在屏幕的底部使用滑动手势来访问主屏幕和应用程序切换器，这些手势可以取消你在这一区域所实现的定制手势。屏幕的最远角落可能是人们难以到达的地方。

插图宽屏按钮。扩展到屏幕边缘的按钮可能看起来不像一个按钮。在全宽度按钮的两侧，尊重标准的UIKit边缘。在屏幕底部出现一个全宽度的按钮，当它有圆角并与安全区域的底部对齐时，它看起来是最好的，这也保证了它不会与Home指示器相冲突。

iphone_margins.png

不要屏蔽或特别注意关键的显示功能。不要试图隐藏设备的圆角、传感器外壳或显示器，通过在屏幕顶部和底部放置黑条来访问主屏幕。不要使用像方括号、边框、形状或指导语这样的视觉装饰来特别注意这些区域。

允许自动隐藏指示器，以节省访问主屏幕。当启用自动隐藏时，如果用户没有接触屏幕几秒钟，该指示器就会消失。当用户再次触摸屏幕时，它会重新出现。这种行为应该只适用于消极的观看体验，如播放视频或照片幻灯片。

Color
iPhone X上的显示支持P3颜色空间，它可以产生比sRGB更丰富、更饱和的颜色。

使用更宽的颜色来增强视觉体验。使用宽颜色的照片和视频更逼真，使用宽颜色的视觉数据和状态指示器更有影响力。

iphoneX_color.png

video ：自行参考官方文档。

手势：
iPhone X上的显示屏使用屏幕边缘手势来提供对主屏幕、应用程序切换器、通知中心和控制中心的访问。
避免干扰系统的屏幕边缘手势。在很少的情况下，像游戏这样的沉浸式应用程序可能需要自定义的屏幕边缘手势，这种手势在系统的手势中占据优先位置——第一次的滑动调用了特定于应用程序的手势，而第二次滑动调用了系统手势。这种行为(称为边缘保护)应该很少执行，因为它使得人们很难访问系统级的操作。开发人员指导,请参见preferredScreenEdgesDeferringSystemGestures ui()方法。要了解更多关于系统手势的信息，请参见手势。

额外的设计考虑
引用准确身份验证方法。iPhone X支持Face ID进行身份验证。如果你的应用程序与Apple Pay或其他系统认证功能相集成，不要在iPhone x上引用Touch ID，同样，要确保你的应用程序在支持Touch ID的设备上不使用Face ID。
不要重复系统提供的键盘功能。在iPhone X上，表情符号/Globe键和听写键会自动出现在键盘下方——甚至在使用定制键盘时也是如此。你的应用程序不能影响这些键，所以避免在你的键盘上重复它们造成混乱。看到自定义键盘。
确保你的网站在iPhone X的边缘显示上看起来很棒，在webkit.org上看到为iPhone X设计的网站。

有关设计和开发人员的指导，请观看以下视频:

• Fall 2017: Designing for iPhone X
• Fall 2017: Building Apps for iPhone X
• WWDC 2017: Auto Layout Techniques in Interface Builder
• WWDC 2017: Designing Across Platforms
• WWDC 2017: Modern User Interaction on iOS
• WWDC 2017: Updating Your App for iOS 11

免责声明：以上内容均来自官方文档 iOS 设计指南 ，在 有道翻译 的基础上进行修改整理，仅用于个人学习。因个人水平有限，如果存在错误，请读者谅解并指出，非常感谢！