特码走势图 ?/? 文章 ?/? 经验分享  /  正文

经验分享

看看特码报:来自58同城的App iPhone X适配干货经验分享

时间:2018-01-05  来源:58UXD 南小斐 原文链接

为什么要对iPhone X进行适配 

特码走势图 www.ho8xt.cn iPhone X相较过去的iPhone机型,首先在尺寸上有了较大的变化。这款机型给我们带来的最直观的变化有:

  • 屏幕变长;

  • 四个角变为更为软润的大圆角;

  • 顶部出现刘海;

  • 底部出现了Home操作区。

屏幕变长

iPhone X与其他机型在@2x时尺寸对比

iPhone X与Plus开发模式下宽度相同,因此切图使用跟Plus一样的@3x大小即可。

iPhone X垂直方向多出了145pt

对于大多数采用瀑布流的页面来说,仅仅是屏幕高度上的变化,可以无视。但对于如:新手引导页、音乐播放器以及以大部分H5运营页面等需要单屏显示的界面就需要重新布局或适配。

顶部大圆角以及刘海

iPhone X的顶部有了大的圆角以及刘海,顶部电量栏高度有所增加,且隐藏式顶部bar会出现图片遮挡的情况。

底部大圆角以及Home操作区

iPhone X的底部有了大的圆角以及Home操作区,在设计中需要为它保留位置,并考虑好周围元素与它的兼容。

iPhone X适配需要遵循哪些原则 

  • 你需要为大屏幕做好准备,内容要铺满屏幕

如下图所示,我们的内容需要铺满屏幕,不能通过遮挡部分区域而造成视觉上的屏幕缩短。

  • 注意核心内容不要被设备的大圆角、传感器以及Home虚拟区指示灯遮挡

  • 注意设计的安全区

  • Home区指示灯会根据背景色变化成为黑白两种颜色与背景区分

不要在指示灯上做特殊强调,以免不能通过。注:58APP无横屏模式,因此暂不用适配横屏。

58App适配时主要适配了哪些???nbsp;

这次的适配,我们着重处理了顶部区域与底部区域,尤其是底部区域,不同状况下底部功能区域与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提供一些思路,在此也感谢各位产品同学与技术同学对我们的支持与帮助。同时我们也会对已经上线的其他应用的适配做关注,不断优化我们的适配策略。

特别说明:本站所收集的素材版权归原作者所有,在此仅供学习参考,请勿用于任何商业用途!

经验分享特码走势图

欢迎交流点评

扫一扫加公众号(uibaba)

特码走势图
  • 这种文章,一个中学生都可以写得比他好!呵呵! 2018-11-17
  • 667| 648| 562| 976| 603| 303| 686| 124| 71| 254|