随着iPhone X的发售，越来越多的小伙伴已经拿到了这款手机，不知道大家是否已经习惯了iPhone X的交互方式。不少的APP针对iPhone X进行了适配，58APP也不例外，在iPhone X发布之后，我们第一时间就针对这款机型进行了适配。
为什么要对iPhone X进行适配
iPhone X相较过去的iPhone机型，首先在尺寸上有了较大的变化。 这款机型给我们带来的最直观的变化有：
屏幕变长；
四个角变为更为软润的大圆角；
顶部出现刘海；
底部出现了Home操作区。
-
屏幕变长
iPhone X与其他机型在@2x时尺寸对比
iPhone X与Plus开发模式下宽度相同，因此切图使用跟Plus一样的@3x大小即可。
iPhone X垂直方向多出了145pt
对于大多数采用瀑布流的页面来说，仅仅是屏幕高度上的变化，可以无视。但对于如：新手引导页、音乐播放器以及以大部分H5运营页面等需要单屏显示的界面就需要重新布局或适配。
-
顶部大圆角以及刘海
iPhone X的顶部有了大的圆角以及刘海，顶部电量栏高度有所增加，且隐藏式顶部bar会出现图片遮挡的情况。
-
底部大圆角以及Home操作区
iPhone X的底部有了大的圆角以及H ome操作区，在设计中需要为它保留位置，并考虑好周围元素与它的兼容。
iPhone X适配需要遵循哪些原则
-
你需要为大屏幕做好准备，内容要铺满屏幕
如下图所示，我们的内容需要铺满屏幕，不能通过遮挡部分区域而造成视觉上的屏幕缩短。
-
注意核心内容不要被设备的大圆角、传感器以及Home虚拟区指示灯遮挡
-
注意设计的安全区
-
Home区指示灯会根据背景色变化成为黑白两种颜色与背景区分
不要在指示灯上做特殊强调，以免不能通过。注：58APP无横屏模式，因此暂不用适配横屏。
58App适配时主要适配了哪些模块
这次的适配，我们着重处理了顶部区域与底部区域，尤其是底部区域，不同状况下底部功能区域与Home操作区的应成为一个完整整体，我们把这些元素更和谐的放进了一个“盒子”。类似官方处理方式，例如：
-
顶部栏
顶部栏之前的高度是20pt，iPhone X上是44pt，高了24pt。 一般来说，只要使用了系统默认的顶部栏几乎就可以自动适配，但部分技术同学自己写过的一些页面容易出现错位问题。如下图：
此外，直接覆盖到顶部的图片也出现了两个问题：
1、顶部电量栏的变高使得图片高度产生变化；
2、顶部刘海对图片进行了切割。
针对这部分我们对图片进行了如下处理：对图片进行等比放大来满足电量栏24pt的高度差，另外，要注意等比放大后左右侧以及顶部刘海造成的图片切割。适配后页面如下图：
-
底部
这个部分是APP重点适配的部分，因为底部区域虚拟操作区的增加，以往许多底部交互的操作方式都出现了问题。为了保持最好的适配效果，我们针对不同机型进行了单独适配。
底部bar： 常见问题如下图：
通过图片，我们能够看出原有的底部样式并不符合iPhone X的设计原则，虚拟指示灯遮挡住了底部栏按钮，这不仅为我们的用户操作时带来了不便，同时底部圆角也对我们的底部bar造成了切割。我们意识到，适配iPhone X需要把底部bar与Home操作区作为一个整体去处理。
除此之外，iPhone X与其他iPhone机型相差大，适合于iPhone X的样式在其他iPhone 机型上体现并不好，因此，我们决定这个部分要对iPhone X与其他iPhone机型分开适配。
随后我们通过与技术同学的沟通，最后采取了只用一套代码来同时适配不同机型，最后我们采取了如下图的适配方式：
针对底部bar在不同业务线的复杂情况，我们将其进行了栅格化，方便各业务线随时添加删减各种功能，同时也方便开发同学进行计算，使用同一套代码来实现适配。
筛选器： 大部分下拉的筛选器是没有问题的，除非它出现了针对底部对齐的组件。
例如该侧滑筛选器：
我们针对这种情况进行了以下适配，避开了底部的操作区域。
底部悬浮组件： 以往我们底部悬浮按钮多是通栏样式的。
显然这是不能直接拿来用的，我们对这部分进行了如下适配，解决了悬浮按钮容易出现的问题。
底部选择器： 底部选择器一般只要添加高度即可，部分底部出现遮挡的选择器我们要求全部展示并统一添加了高度。适配效果如图：
底部悬浮按钮： 底部悬浮按件我们将之前的通栏按钮做了更改，使其更好的适配iPhone X。
iPhone X适配小结
-
组件栅格化
以底部bar适配为例，我们要全面地去整理归纳，把不同样式不同功能尽可能的整合一起。栅格化的组件可以在功能缺失或变化时自动适配，可以节省大量的维护工作。
-
区分适配
iPhone X的适配组件在其他iPhone机型上未必有好的视觉表现，条件允许的情况下要区分适配。
-
快速推进
当我们设计做出适配方案后一定要及时同技术同学沟通，了解适配方案的可行性。确认可行后及时由平台推广至各业务线，及时落地上线。
希望以上内容会对大家适配iPhone X提供一些思路，在此也感谢各位产品同学与技术同学对我们的支持与帮助。同时我们也会对已经上线的其他应用的适配做关注，不断优化我们的适配策略。
·End·
微交互 ∣细节设计成就卓越产品
长按，识别二维码，加关注
分享文章, 让更多的人知道微交互
