iPhone X的UI设计技巧

如下内容由Mockplus团队翻译整理，仅供学习交流，Mockplus是更快更简单的原型设计工具。

 

果粉们翘首以待的iPhone X终于开始预售了！一样满怀期待的还有设计师和开发人员，他们将在iPhone X上看到他们的App了。苹果官方表示：iPhone X是智能手机的将来，而这个将来的风向标可能将会给UI设计师和开发人员带来一些小麻烦。

做为一名UI设计师，我总结了一些在设计iPhone X App时有效的技巧供你们参考：

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

与以前的iPhone不一样，iPhone X屏幕比前一代高145点（约为前一代的20％），并有圆角。以下图所示：

 

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

因为Home键如今已经被放置在底部的细条交互式控件所取代，除非很是必要，不然不要轻易设置手势交互，它可能会遮挡住Home提示条。 建议您能够考虑其余滑动手势和任何能与缺口适配的界面。

 

 

3.    显示完美的状态栏

与上一代iPhone相比iPhone X状态栏的垂直高度增长了一倍，从22pt增长到44pt。所以，您最好将背景扩展到显示屏的边缘(包括状态栏)，以及垂直可滚动的区域。建议将导航栏的颜色延伸到状态栏的背景，不然看起来会很奇怪，而且App在试图将它与传感器外壳进行手动混合时可能会遇到一些奇怪的状况。

用户界面的“全屏”体验是很是重要的，让用户再也不受屏幕边缘的干扰。如下是苹果为设计师定义安全区域的方式。（以下图示）

 

若是您的App应用平台标准组件和自动布局，您的用户界面也应适当地缩放以适应iPhone X屏幕。

 

PS:只能隐藏状态栏以换取附加值。

4.   提供全屏体验

与大多数宽高比不匹配同样，适用于旧款iPhone屏幕的设计要么被裁剪，要么被添加白边。

在iPhone X的内容被显示在一个小于4.5英寸设备上的状况下，该设计甚至能够把多余的屏幕留白（图中两边垂直的白边）收起来。为了交付这样的好图像，为不一样的长宽比建立独立的屏幕适配也是值得的。

 

 

5.   参考正确的解锁方法

关于解锁，iPhone X并无一如既往地采用Touch ID，而是使用Face ID； 经过投射和分析超过3万多个不可见的点，从而建立一张精确的面部深度图。若是您的设计涉及了像Apple Pay或其余系统的解锁功能，那么必定要参考Face ID，而不是传统的Touch ID。

6.   使用正确的分辨率导出正确的颜色

iPhone X具备很高的分辨率，由于相较以往几代，它具备更长的新屏幕。它的新超级视网膜显示屏具备2346 x 1125分辨率和458 PPI的像素密度。如此高的像素密度意味着切图将须要以@3x而不是@ 2x的资源输出。

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

 

 

 

苹果提供这些资源吗？

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

原文做者：Stefano Malachi

地址：https://medium.muz.li/ui-design-tips-for-iphone-x-2652b2b248ce

 

学习工具，但不受限于某种工具。Mockplus作原型，更快更简单，如今下载Mockplus，免费体验畅快的原型设计之旅。