Angeange 设计沉思录|58同城App iPhone X适配小结
加入收藏 评论

设计沉思录|58同城App iPhone X适配小结

随着iPhone X的发售,越来越多的小伙伴已经拿到了这款手机,不知道大家是否已经习惯了iPhone X的交互方式。不少的APP针对iPhone X进行了适配,58APP也不例外,在iPhone X发布之后,我们第一时间就针对这款机型进行了适配。为什么要对iPhone X进行适配iPhone X相较过去的iPhone机型,首先在尺寸上有了较大的变化。 这款机型给我们带来的最直观的变化有:屏幕变长;...

随着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。 一般来说,只要使用了系统默认的顶部栏几乎就可以自动适配,但部分技术同学自己写过的一些页面容易出现错位问题。如下图:

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

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

    1. 顶部电量栏的变高使得图片高度产生变化;
    2. 顶部刘海对图片进行了切割。
  • 底部

    这个部分是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提供一些思路,在此也感谢各位产品同学与技术同学对我们的支持与帮助。同时我们也会对已经上线的其他应用的适配做关注,不断优化我们的适配策略。

0

0位设计师推荐


Angeange
设计沉思录|58同城App iPhone X适配小结
相关文章

Copyright © 2011 - 2020 UIYuan设计师交流平台, All Rights Reserved. 皖ICP备18024424号-2

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源,商业媒体及纸媒请先联系:service@uiyuan.com

UI园会员交流QQ群: 233748945 / 73425514