等待果粉的iPhone X终于预售了！同时期待设计师和开发者，他们将在iPhone X上看到他们的应用程序。苹果公司正式表示：iPhone X是智能手机的未来，未来的风向标可能给UI设计师和开发者带来一些小问题。

作为一名UI设计师，我总结了一些在设计iPhone X App时有效的技术：

1.使用正确的iPhone X画板尺寸

与之前的iPhone不同，iPhone X屏幕比上一代产品高出145个点（约占上一代产品的20％）并且有圆角。如下图所示：

2.避免在屏幕底部设置手势交互

由于Home按钮现在已被放置在底部的细条交互式控件所取代，因此除非必要，否则无需轻松设置手势交互，这可能会使Home提示模糊不清。建议您考虑其他滑动手势以及适合差距的任何界面。

3.显示完美状态栏

与上一代iPhone相比，iPhone X状态栏的垂直高度从22pt增加到44pt。因此，最好将背景扩展到显示边缘（包括状态栏）和垂直可滚动区域。建议将导航栏的颜色扩展到状态栏的背景，否则可能看起来很奇怪，当尝试手动将其与传感器外壳混合时，应用可能会遇到一些奇怪的情况。

用户界面的“全屏”体验非常重要，因此用户不再受到屏幕边缘的干扰。以下是Apple如何为设计师定义安全区域。 （如下图所示）

如果您的应用具有标准组件和自动布局，则您的用户界面也应适当缩放以适合iPhone X屏幕。

PS:只能隐藏状态栏以换取其他值。

4.提供全屏体验

与大多数宽高比不匹配一样，旧款iPhone屏幕的设计要么是裁剪的，要么是白色的。

在iPhone X的内容显示在小于4.5英寸的设备上的情况下，该设计甚至可以将额外的屏幕留空（图中两侧的垂直白边）。为了提供如此好的图像，还可以为不同的宽高比创建单独的屏幕调整。

5.参考正确的解锁方法

关于解锁，iPhone X不像往常一样使用Touch ID，而是使用Face ID;通过投影和分析超过30,000个不可见点来创建精确的面部深度图。如果您的设计涉及解锁Apple Pay或其他系统等功能，请务必参考Face ID而不是传统的Touch ID。

6.使用正确的分辨率

iPhone X具有非常高的分辨率，因为它的新屏幕比前几代更长。其新的超级视网膜显示器的分辨率为2346 x 1125，像素密度为458 PPI。如此高的像素密度意味着切割图需要作为@ 3x而不是@ 2x的资源输出。

最好使用Display P3色彩空间而不是sRGB为iPhone X创建UI界面。这种颜色意味着更丰富，更饱和的界面，可以在显示P3颜色配置文件中导出为16位/通道PNG，最好通过Photoshop而不是Sketch。

Apple是否提供这些资源？

好消息是，Apple在Apple Design Resources和Apple UI指南中提供了这些资源。

原作者：Stefano Malachi