手淘Web页面Bar和纵向适配的设计

记得在去年双11的互动页面中,我们折腾了一波iPhone8、iPhone8 plus和iPhone X的适配,特别是iPhone X刘海区域的适配。针对这方面的页面适配,沉淀出相应的适配方案。而今年的双11期间,苹果又推出了iPhone XS、iPhone XR和iPhone XR Max以及众多的安卓刘海设备。言外之意,前端在这方面的适配变得越来越复杂。面对众多场景,我们应该怎么去面对呢?接下来聊聊我在今年双11的主互动玩法中是怎么处理的。

面对的场景

在双11主互动玩法(最近手淘热门活动)双11合伙人 组队PK人气 集能量瓜分10亿红包。这是一个纯Web页面,在整个活动页面中有两个场景的适配是较为蛋疼的。首先就是页头和页脚的位置适配。

由于刘海机的增加,顶部和底部的安全区域成为不定因素,所以这一部分面对的难度和不定因素也变多。稍后我们会深度的剖析这部分从设计到开发应该怎么来处理。

另外一个场景是纵向(垂直)方向的适配。

其实纵向的适配一直是全屏模式的一种痛点。在不同高度的终端上如果要达到一样的效果,实现成本是非常高的。至少目前的各种方案都存在这样的问题。

线上最终效果

先来看看养眼的高端机iPhone X 和 iPhone XS Max:

再来看看普通的iPhone设备(iPhone6, iPhone6+, iPhone7+,iPhone8),我身边的设备都跑了一圈:

最后来看看众生相的安卓设备(我只是截取了部分):

是不是顿时感觉前端苦逼。

理解设计

前面的都是一些前奏,似乎有点长,但不要紧,接下来我们进入正题。

在开始编码之前,理解设计是非常的重要,特别是在这样的复杂场景(主要说的是复杂的适配场景)。整个项目的设计无法一一来进行剖析,这里就拿两个特别之处。因为我们要解的是Web页面的Bar,顶部Bar和底部的Bar。先上一张图:

优秀的设计师会给我提供多种状态,或者告诉我不同状态的尺寸。比如分享的页面,其底部就具备两种尺寸:

短屏下是尺寸是750px * 315px,理解成iPhoneX设备之下,都采用的是这个尺寸,当然背景图片也是如此;另外一个尺寸是750px * 448px,对应iPhone X及新出的iPhone XS/XR/XS Max。事实上这样的理解并不完全正确,因为有一些安卓的设备也具备类似于iPhone X的尺寸或更大的尺寸。暂时先忽略这个现象吧。

另外就是页面的顶部Bar和底部Bar的尺寸了。在iPhone X的设计中,顶部Bar的高是128px(设计师告诉我顶部Bar有两种尺寸,iPhone X以下的是128px,iPhone X 及其他带刘海的设备尺寸是176px),底部Bar尺寸是200px

做过iPhone X 适配,都知道有安全区域一说,或者说顶部刘海和底部Home键的位置(大小),但对于新出来的设备(不管是iOS系列还是Android系列)有好多的不确定。就算是抛开这些新设备,也面临着不少的问题。比如说Bar的尺寸,应该怎么确定,是不是跟着设计稿走就行;纵向布局应该怎么处理短屏和高屏。这一切的一切对于前端来说,在不同的项目中都会有未知的问题出现。那么问题来了,我们可以通过设计的标准或者说技术的手段来规避吗?

在我的理解中应该是可以的。为什么这么说呢?我们先来理解设计的标准(不同的设备出现,他都有一套完成的设计标准)。在接下来的内容我们以iOS系列为依据来做判断,因为安卓我真心的惧怕,也没有抽出那么多的时间一款款的测试(这对于做技术的而言是不好的一点)。

理解标准

理解标准需要具备一些基础,比如说一些术语的描述,如果你感兴趣的话,建议你移步阅读一下《移动端上的设计和适配》一文。如果没有这些基础也不会太防碍你继续往下阅读。

在苹果发布新款设备的时候,不管是设计师还是前端开发,都急切的想知道这些设备的各种参数,比如说分辨率、PPI之类的。

这里给大家特别推荐一个网站Vizdevices,可以让大家轻易的获取有关于主流移动设备的各项参数。比如下面的截图:

估计大家更为关心的是如何在项目中适配:切几倍的图用几倍的尺寸刘海怎么适配(新机是不是和iPhoneX一样)等等。到目前为止,最起码在这个项目中,前端和视觉设计师约定的尺寸还是以750px宽度:

而且我们构建工具中有关于单位之间的转换依旧约定的还是以750px为基础。也就是说目前主流还是以@2x为基准做设计稿,然后提供@2x图给前端,当然也有的设计师会额外提供@3x的切图给到开发人员。

手机适配采用几倍图与PPI有关系,也就是像素密度,所以我们可以理解为什么iPhone4、5、6之间分辨率和屏幕尺寸不一样,但是同样采用@2x图的原因,是因为它们有同样的PPI(326ppi。但新款的设备就不一样了:

从上图中我们可以获知,iPhone XS与iPhone X的数据是一致的。因此我们可以得出iPhone XS可以像iPhone X一样,提供@3x的尺寸:

而iPhone XS Max的PPI和iPhone X/XS是一样的,都是458PPI,只是其分辨率和Viewport要更大。由此可以推论出iPhoneXs Max使用的同样是三倍图@3x

从屏幕(Viewport)宽高比例来看:

  • iPhoneXS Max宽度1242/3=414pt,iPhone8 Plus宽度1242/3=414pt,两者的宽度一致
  • iPhoneXS Max高度2688/3=896pt,iPhone8 Plus高度2208/3=736pt

iPhoneXS Max比iPhone8 Plus长一截,多了160pt

因此,我们这次的设计,iPhoneXS Max也跟着iPhone X走的:

接着我们最后来看iPhone XR这款设备。其PPI是326,分辨率为828px * 1792px,屏幕宽度比为:414px * 896px。而iPhone其他款设备,比如iPhone 7 Plus、iPhone 7,甚至iPhone 5,它们的PPI都是326。也就是说iPhoneXR与苹果二倍图的PPI是一致。如此就可以推论出iPhoneXR使用的是二倍图@2x

同样从页面宽高比例来看:

  • iPhoneXR宽度828/2=414pt,iPhoneXS Max宽度1242/3=414pt
  • iPhoneXR高度1792/2=896pt,iPhoneXS Max高度2688/3=896pt

如果你够仔细的话,不难发现,从设备的宽度(Viewport)比来看,iPhoneXR 和 iPhoneXS Max是一样的,如下图所示:

对于设计和开发而言,他们不同之处就是iPhoneXR使用的是@2x图或尺寸,而iPhoneXS Max是@3x图或尺寸:

上面就是有关于苹果新机和老设备之间的差异。但这仅仅是iOS系列,我们还需要面对的是复杂的Android系列,但这一块在这篇文章不做过多阐述,因为我目前还不具备方面能力,能把这里面的故事说清楚。

有了这些基础和概念,我们就可以继续下一步的探讨了。

这些新尺寸对我们Web页面的设计和布局有何影响?如何去适配?

其实这才是我们一线开发人员最为关心的东西。

苹果自从iOS11开始,抛出一个安全区域的概念(其实现在安卓刘海机也有安全区域存在)。对于Web页面设计和开发都有必要对这一概念有所了解。那先花一点时间来了解一下安全区域,如果你对这方面很熟悉,你可以跳过这一节,继续往下阅读。

安全区域

安全区域(Safe Area),一个熟悉又陌生的词语。

熟悉是因为在平面设计中,由于印刷裁切过程中的误差,设计师需要给设计稿预留出「出血」 位置,确保设计内容在安全区域中;陌生又是因为在互联网设计中已极少被提及。

这里指的安全区域不仅仅针对于iOS的设备,只不过以iOS设备为例。所以这里所指的设备安全区域指的是屏幕内适合放置控件的安全区域。

在没有状态栏和其他东西的 iPhone 8 里,Safe Area 是指整个屏幕。

当加入状态栏后,Safe Area 便向下减少了 20pt。当我们加入 Navigation 的时候,Safe Area 又减少了 44pt。同理,我们再加入 Tabbar 的时候,Safe Area 又减少了 44pt(PS:此处更正, Tabbar 高度应该是 49pt)。

在 iPhone X 里,当我们没有使用状态栏时,Safe Area 依然和上下边有一定的距离。按照我的测量,此时距离底部应该是 43pt,距离顶部应该是 44pt

同理,加入不同 Bar 之后,iPhone X 的 Safe Area 都会有相应的变化。

后续设计中,iPhone XS/XR/XS Max可以按这个距离做为设计依据。

遵守 Safe Area (安全区域) 的界定

拿苹果官网针对于iPhone X的安全区域来举例。

状态栏。遵守安全区域的界定,在状态栏下面留出适当的空间。避免为状态栏高度预设值,这可能会导致您的内容被状态栏遮挡或形成错位。

圆弧展示角和传感器槽。您的 App 的内容元素和控制按键应避开屏幕角落和传感器槽,让其在填满屏幕的同时不被角落切割。

主屏幕指示器。为使 App 的内容和控件始终保持清晰可见且便于点按,请确保您的 App 不会干扰主屏幕指示器。

屏幕边缘手势。iPhone X 显示屏利用屏幕边缘手势来访问主屏幕,App 切换器,通知和控制中心。请避免对这些手势造成干扰。您可将控件移到安全区域并调整用户界面。极少数情况下,您可以考虑使用边缘保护:用户的首个滑动手势将被视为 App 内的特定手势,第二次滑动才会被视为系统手势。

确保您的代码能适应不同的屏幕宽高比。许多 App 会根据特定的宽度,高度或宽高比来定位其内容。请检查您的内容是否已正确缩放并定位。

调整视频的缩放度。iPhone X 上的视频内容应填满屏幕。但是,如果这导致顶部或底部被切割,或侧面裁剪太多,则应将视频拉伸或缩小以配合屏幕。当 AVPlayerViewController 自动管理时,基于AVPlayerLayer 的自定义视频播放器需要选择适当的初始视频重力设置,并允许用户根据自己的喜好在 aspect (固定宽高比) 和 aspectFill (固定宽高比且全屏) 观看模式之间进行切换。

安全区域布局

新发布的iPhoneXS、XS Max、XR都采用了全面屏设计,因此我们必须保证布局填满屏幕,并且考虑到交互操作,要留出安全区域,才不会被圆角、刘海影响使用,布局的左右边距可根据产品自定义,这些点与iPhoneX是相同的。

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/mobile/taobao-bar-design.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部