小莫

随着iPhone X的发售,越来越多的小伙伴已经拿到了这款手机,不知道大家是否已经习惯了iPhone X的交互方式。不少的APP针对iPhone X进行了适配,58APP也不例外,在iPhone X发布之后,我们第一时间就针对这款机型进行了适配。

 

为什么要对iPhone X进行适配 

iPhone X相较过去的iPhone机型,首先在尺寸上有了较大的变化。这款机型给我们带来的最直观的变化有:

  • 屏幕变长;
  • 四个角变为更为软润的大圆角;
  • 顶部出现刘海;
  • 底部出现了Home操作区

 

屏幕变长

1

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

 

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

2

iPhone X垂直方向多出了145pt

 

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

 

顶部大圆角以及刘海

3

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

 

底部大圆角以及Home操作区

4

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

 

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

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

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

5

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

6

  •     注意设计的安全区

7

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

8

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

 

 58App适配时主要适配了哪些模块 

这次的适配,我们着重处理了顶部区域与底部区域,尤其是底部区域,不同状况下底部功能区域与Home操作区的应成为一个完整整体,我们把这些元素更和谐的放进了一个“盒子”。类似官方处理方式,例如:

4

 

顶部栏

顶部栏之前的高度是20pt,iPhone X上是44pt,高了24pt。一般来说,只要使用了系统默认的顶部栏几乎就可以自动适配,但部分技术同学自己写过的一些页面容易出现错位问题。如下图:

9

此外,直接覆盖到顶部的图片也出现了两个问题:

1、顶部电量栏的变高使得图片高度产生变化;

2、顶部刘海对图片进行了切割。

10

针对这部分我们对图片进行了如下处理:对图片进行等比放大来满足电量栏24pt的高度差,另外,要注意等比放大后左右侧以及顶部刘海造成的图片切割。适配后页面如下图:

11

 

底部

这个部分是APP重点适配的部分,因为底部区域虚拟操作区的增加,以往许多底部交互的操作方式都出现了问题。为了保持最好的适配效果,我们针对不同机型进行了单独适配。

底部bar:常见问题如下图:

 

12

通过图片,我们能够看出原有的底部样式并不符合iPhone X的设计原则,虚拟指示灯遮挡住了底部栏按钮,这不仅为我们的用户操作时带来了不便,同时底部圆角也对我们的底部bar造成了切割。我们意识到,适配iPhone X需要把底部bar与Home操作区作为一个整体去处理。

除此之外,iPhone X与其他iPhone机型相差大,适合于iPhone X的样式在其他iPhone 机型上体现并不好,因此,我们决定这个部分要对iPhone X与其他iPhone机型分开适配。

随后我们通过与技术同学的沟通,最后采取了只用一套代码来同时适配不同机型,最后我们采取了如下图的适配方式:

13

针对底部bar在不同业务线的复杂情况,我们将其进行了栅格化,方便各业务线随时添加删减各种功能,同时也方便开发同学进行计算,使用同一套代码来实现适配。

14

筛选器:大部分下拉的筛选器是没有问题的,除非它出现了针对底部对齐的组件。

例如该侧滑筛选器:

15

我们针对这种情况进行了以下适配,避开了底部的操作区域。

16

 

底部悬浮组件:以往我们底部悬浮按钮多是通栏样式的。

17

显然这是不能直接拿来用的,我们对这部分进行了如下适配,解决了悬浮按钮容易出现的问题。

18

 

底部选择器:底部选择器一般只要添加高度即可,部分底部出现遮挡的选择器我们要求全部展示并统一添加了高度。适配效果如图:

19

 

底部悬浮按钮:底部悬浮按件我们将之前的通栏按钮做了更改,­使其更好的适配iPhone X。

20

 

 iPhone X适配小结 

  • 组件栅格化

以底部bar适配为例,我们要全面地去整理归纳,把不同样式不同功能尽可能的整合一起。栅格化的组件可以在功能缺失或变化时自动适配,可以节省大量的维护工作。

  • 区分适配

iPhone X的适配组件在其他iPhone机型上未必有好的视觉表现,条件允许的情况下要区分适配。

  • 快速推进

当我们设计做出适配方案后一定要及时同技术同学沟通,了解适配方案的可行性。确认可行后及时由平台推广至各业务线,及时落地上线。

希望以上内容会对大家适配iPhone X提供一些思路,在此也感谢各位产品同学与技术同学对我们的支持与帮助。同时我们也会对已经上线的其他应用的适配做关注,不断优化我们的适配策略。

 

原文地址:58UXD(公众号)

作者:南小斐

转载请注明:学UI网 » 58同城App iPhone X适配小结

登录收藏
 
你可能喜欢的:
你过来,我有1个设计技巧想对你说你过来,我有1个设计技巧想对你说
为什么你的设计无法让别人记住(一)?为什么你的设计无法让别人记住(一)?
圆角矩形背后的含义|深度解析圆角矩形背后的含义|深度解析
交互基础——页面加载方式交互基础——页面加载方式
一篇文章读懂交互设计7大定律一篇文章读懂交互设计7大定律
​iOS 13 做了哪些体验升级​iOS 13 做了哪些体验升级
音频 | 开屏页设计,看这篇就够了!音频 | 开屏页设计,看这篇就够了!
【UI&UX案例分析】解密停车App(Pazi)的“前世今生”【UI&UX案例分析】解密停车App(Pazi)的“前世今生”
产品体验设计-交互篇(一)产品体验设计-交互篇(一)
PRD分享:「网易云音乐-评论模块」产品需求文档PRD分享:「网易云音乐-评论模块」产品需求文档