本文有一些关于iPhone X适应的规则，希望对你有所帮助

iPhone X于11月发货，但也许你现在已经收到了改装任务。

官方的“为iPhone X设计”视频，结合官方文档“人机交互指南”，您需要适应指南墨水姐姐为您挑选！

文章较长，建议先查看。

注意：文中的大部分图片均来自官方视频截图和文档图纸，请随意吃。

好的，让我们开始理清关键点！

更高更清晰的屏幕

1.比例变化

iPhone X的显示宽度与4.7英寸iPhone 6,7和8的显示宽度相同。但是，iPhone X的显示屏比4.7英寸显示屏高出145pt，为显示屏增加了约20％的垂直显示空间。内容。

对于更窄的屏幕，需要考虑是否需要重新排列按钮和内容。

另外，当我们进行全屏时，我们需要注意纵横比的差异，特别是由于屏幕比例的变化引起的切割位置的变化。

看着切割说明，我觉得我还是单独改编一下iPhone X的图片是安全的… …

2.超级视网膜

iPhone X的分辨率达到2436 x 1125像素，458 ppi，官方称为Super Retina屏幕。

更高的屏幕质量意味着位图材料的尺寸相应更大。

对于Super Retina屏幕，官方建议尽可能使用PDF矢量图形，这将为您提供更好的显示效果，同时还会降低应用程序的容量。

全面的屏幕折衷产品：“离开大海”和安全区域

让这种强迫症混乱的“留在海里”可以说是对苹果制作全面屏幕的妥协。同时，为了使屏幕尽可能大，屏幕的四个角都是圆形的。

外星人的屏幕无疑让产品设计师感到生气。官方解决方案是：“安全区域布局指南”。

1.安全区布局

顾名思义，“安全区”是一个可以将重要元素放入其中的区域，而不必担心屏幕不规则引起的交互问题。

对于iPhone 8和之前的iPhone，由于常规的矩形屏幕，安全区域是整个屏幕。但对于iPhone X来说，圆角，大海和Home栏使得屏幕交互变得非常棘手。

在这里你可以参考外国用户与“离开海洋”的互动的恶搞：

为了不进行这样的反人类交互，我们需要在形状屏幕的基础上划分矩形安全区域以放置重要内容。

2.安全区值

当移动电话处于垂直方向时，安全区域的上边缘距离屏幕顶部44 pt。因此，安全区并没有与“齐六海”完全齐平，但它必须下降一点。

在“下巴”位置，为了给Home指示器留出足够的空间，它被认为是从底部到顶部推动34磅的安全区域。

当屏幕被越过时，“安全区域”再次改变：Home指示器移动到屏幕的底部，并且“离开海”和“下巴”的安全范围保持不变。换句话说，水平安全区域通过“挤压”更加压缩。

对于指示条位移但纵向安全区不变，官方解释是：

用户在使用手机时严重依赖肌肉记忆（例如，您可以在不键入键盘的情况下打字）。尽管非对称设计可以更有效地使用屏幕，但它与用户的肌肉记忆相反并且可能导致误用。在水平布局中，交互元件两侧之间的距离相等，右侧左侧的位置是固定的，便于用户记忆。

如果你能想到细节，你仍然要向Apple致意。

绿色区域是安全区域，蓝色是边缘

3.例外

但是，有一个例外。如果是长卷轴列表，则复制和按钮可以超出安全区域以实现全屏显示。

安全区域看起来很烦人，但是如果你想把安全区域遮挡并隐藏大海，你就不能放弃它。因为这会使您的应用看起来比其他应用更小，并且它与iOS系统没有统一的整体感觉。

家庭指标

为了实现全屏，Apple删除了物理主页按钮，并将其替换为134 x 5 pt虚拟主页栏。谈到Macbook Pro的Touch Bar，我觉得库克真的很喜欢可以滑动的吧。

简而言之，最初需要主页按钮的操作将由此主页指示器执行。为了与Home Indicator兼容，您需要这样做：

1.避免交互式干扰

“自下而上”成为返回桌面和切换程序的全局系统操作。因此，您需要在应用中避免这种情况，以避免与指标栏进行交互。

但是，在过去的iPhone中，“底端笔画”也用于调用控制中心的手势，因此对于大多数产品设计师来说，它不应该是App中的这种交互。

值得注意的是，不建议在屏幕底部放置太多交互式控件。 Home Indicator周围的间距纯粹是为手势触摸而创建的。将按钮放在条形图附近，用户可能会意外触摸条形图标，或在使用条形图时意外触摸应用程序按钮，从而导致操作干扰。

2.整合为一体

主页指示器将从背景颜色变为白色/黑色，以区别于背景。不要特别强调指标栏，这将被视为官方，仔细审查不会通过你！

面部识别

正如主页按钮的按钮功能被主页指示符替换一样，主页按钮的触摸ID将被面部ID替换。因此，对于Touch ID应用，请务必将Touch ID更改为面部识别码。

话虽如此，我觉得我的脑袋很大。最重要的是，如果真正的机器没有得到它，它需要进行调整。